微信小程序MPvue实现动画效果

以你之姓@ 2023-05-30 08:57 46阅读 0赞

## 动画效果 ##

![在这里插入图片描述][20191108171501665.gif]

## 代码 ##

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

<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();

[20191108171501665.gif]: https://img-blog.csdnimg.cn/20191108171501665.gif
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html