微信小程序MPvue实现动画效果-向日葵屋

动画效果

在这里插入图片描述

代码

如果是微信原生代码，只是setData方式不同而已，基本相同！
微信官方文档

<template>
<view>
    <view class="bottom" @click="doAnimation">
        <img src="/static/images/add.png">
        <p>按钮</p>
    </view>
    <view>
        <view class="create_ball" :animation="animation1" @click="create(1)">类1</view>
        <view class="create_ball" :animation="animation2" @click="create(2)">类2</view>
        <view class="create_ball" :animation="animation3" @click="create(3)">类3</view>
    </view>
</view>
</template>
<script> export default { data() { return { animation1: { }, animation2: { }, animation3: { }, stretch: false, //判断是否展开，默认不展开 running: false //动画正在运行状态：控制动画运行完毕后才能再次运行 } }, onShow: function () { }, created() { }, methods: { doAnimation1() { var that = this; if (that.running) { //如果动画正在运行，点击无效 return; } that.running = true; setTimeout(() => { //默认400ms能点击一次 var _that = this; _that.running = false; },400) if (!that.stretch) { //展开动作 var animation1 = wx.createAnimation({ duration: 300, delay: 0, timingFunction: 'ease', }); var animation2 = wx.createAnimation({ duration: 300, delay: 50, timingFunction: 'ease', }); var animation3 = wx.createAnimation({ duration: 300, delay: 100, timingFunction: 'ease', }) //表示一组动画完成 animation1.translateX(-85).translateY(-15).opacity(1).step(); //表示一组动画完成 animation2.translateX(-70).translateY(-65).opacity(1).step(); //表示一组动画完成 animation3.translateX(-15).translateY(-85).opacity(1).step(); //清掉之前的动画操作 that.animation1 = animation1.export(); that.animation2 = animation2.export(); that.animation3 = animation3.export(); } else { //收起动作 var animation1 = wx.createAnimation({ duration: 300, delay: 100, timingFunction: 'ease', }) var animation2 = wx.createAnimation({ duration: 300, delay: 50, timingFunction: 'ease', }) var animation3 = wx.createAnimation({ duration: 300, delay: 0, timingFunction: 'ease', }) animation1.opacity(0).step(); animation2.opacity(0).step(); animation3.opacity(0).step(); that.animation1 = animation1.export(); that.animation2 = animation2.export(); that.animation3 = animation3.export(); } that.stretch = !that.stretch; //取反 // setTimeout(() => {//自动恢复初始状态方法 // console.log(12); // var _that = this; // var animation1 = wx.createAnimation({ // duration: 1000, // timingFunction: 'ease', // }) // var animation2 = wx.createAnimation({ // duration: 1000, // timingFunction: 'ease', // }) // var animation3 = wx.createAnimation({ // duration: 1000, // timingFunction: 'ease', // }) // animation1.opacity(1).step(); // animation2.opacity(1).step(); // animation3.opacity(1).step(); // _that.animation1 = animation1.export(); // _that.animation2 = animation2.export(); // _that.animation3 = animation3.export(); // }, 1000) }, doAnimation() { //启动动画 var that = this; if (that.running) { //如果动画正在运行，点击无效 return; } that.running = true; setTimeout(() => { //默认400ms能点击一次 var _that = this; _that.running = false; }, 400) if (!that.stretch) { //展开动作 this.showAnimation(); } else { //收起动作 this.hiddenAnimation(); } that.stretch = !that.stretch; //取反 }, showAnimation() { //展示动画 var that = this; var animation1 = wx.createAnimation({ duration: 300, delay: 0, timingFunction: 'ease', }); var animation2 = wx.createAnimation({ duration: 300, delay: 50, timingFunction: 'ease', }); var animation3 = wx.createAnimation({ duration: 300, delay: 100, timingFunction: 'ease', }) //表示一组动画完成 animation1.translateX(-85).translateY(-5).opacity(1).step(); //表示一组动画完成 animation2.translateX(-70).translateY(-55).opacity(1).step(); //表示一组动画完成 animation3.translateX(-15).translateY(-75).opacity(1).step(); //清掉之前的动画操作 that.animation1 = animation1.export(); that.animation2 = animation2.export(); that.animation3 = animation3.export(); }, hiddenAnimation() { //隐藏动画 var that = this; var animation1 = wx.createAnimation({ duration: 300, delay: 100, timingFunction: 'ease', }) var animation2 = wx.createAnimation({ duration: 300, delay: 50, timingFunction: 'ease', }) var animation3 = wx.createAnimation({ duration: 300, delay: 0, timingFunction: 'ease', }) animation1.opacity(0).step(); animation2.opacity(0).step(); animation3.opacity(0).step(); that.animation1 = animation1.export(); that.animation2 = animation2.export(); that.animation3 = animation3.export(); }, create_match(tag){ console.log("111！" + tag); }, } } </script>
<style scoped> .create_ball { height: 80rpx; width: 80rpx; line-height: 80rpx; position: fixed; right: 10rpx; bottom: 20rpx; background-color: green; border-radius: 50%; opacity: 0; text-align: center; vertical-align: middle; } .bottom { z-index: 999; position: fixed; right: 10rpx; bottom: 20rpx; width: 136rpx; height: 136rpx; border-radius: 140rpx; background: #78a2f0; text-align: center; font-size: 24rpx; box-shadow: 0px 2px 6px #7497d5; } .bottom img { width: 40rpx; height: 40rpx; display: block; margin: 0 auto; margin-top: 28rpx; position: relative; } .bottom p { top: 4rpx; position: relative; width: 80rpx; height: 28rpx; font-size: 20rpx; font-family: PingFang SC; font-weight: 400; line-height: 28rpx; color: rgba(255, 255, 255, 1); opacity: 1; margin-left: 28rpx; margin-top: 12rpx; } </style>

大屏适配

上述方法在大屏上或者横屏的手机上会出现问题，需要添加一个参数用来计算

//data中新增参数
data(){ 
    return { 
        rpx: 0, //动画适配比例
    }
}
//onLoad
onLoad() { 
    Object.assign(this.$data, this.$options.data());
    wx.getSystemInfo({ 
      success: function (res) { 
        let rpx = 1 * (res.windowWidth * res.pixelRatio) / (750 * res.pixelRatio);
        that.rpx = rpx;
      }
    })
    //this.btnClick('全部','')
  },
//动画参数修改
 //表示一组动画完成
      animation1.translateX(-170 * that.rpx).translateY(-10 * that.rpx).opacity(1).step();
      //表示一组动画完成
      animation2.translateX(-140 * that.rpx).translateY(-110 * that.rpx).opacity(1).step();
      //表示一组动画完成
      animation3.translateX(-30 * that.rpx).translateY(-150 * that.rpx).opacity(1).step();