小程序 wx.createAnimation(Object object)使用方法

布满荆棘的人生 2022-11-27 07:19 257阅读 0赞

常规套路:  
1.data 中声明动画:animation。**`data:{ animation:{} }`**  
2.合适的时机创建一个动画实例animation。**`this.animation = wx.createAnimation({})`**  
3.调用实例的方法来描述动画。简单点说就是设置各种动画属性值,例如：**`this.animation.rotate(150).scale(3)`**  
4.调用动画操作方法后要调用 **`step()`**来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，step和 wx.createAnimation() 配置参数相同；  
5.最后通过动画实例的**`export`**方法导出动画数据传递给组件的animation。就是动画输出啦,让他动起来  
**注意:export 方法每次调用后会清掉之前的动画操作**

API

![format_png][]

image.png

![format_png 1][]

image.png

### 案例1 ###

核心结构 index.wxml

<view  animation="{
       {animation}}">我在做动画</view>
    <button bindtap="rotateFn">旋转</button>

数据和逻辑 index.js

Page({
      data: {
        animation:{}
      },
      onReady: function () {
        this.animation = wx.createAnimation({
            duration:600,
            timingFunction:'linear',
            delay:500
        })
      },
      rotateFn:function(){
          this.animation.rotate(150).scale(3).step({ ducation: 8000 }) 
          this.setData({  
              animation: this.animation.export()   //输出动画  
          })
      }
    })

### 案例2 ###

用定时器循环播放动画  
效果如下：

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzcyMTgyMy0xOWIyNWJhNjAyMTAyYTcwLmdpZj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzI5NC9mb3JtYXQvd2VicA][]

GIF.gif

onReady: function () {
        this.animation = wx.createAnimation({
          duration: 100,
          timingFunction: 'linear',
          delay: 10,
          transformOrigin: '50% 0 0'
        })    
      },
      onShow: function () {  
        let next = true;
        setInterval(function () {
          if (next) {
            this.animation.scale(0.9).step();
            next = !next;
          } else {
            this.animation.scale(1).step();
            next = !next;
          }
          this.setData({  //输出动画  
            animation: this.animation.export()
          })
        }.bind(this), 500)
      },

[format_png]: /images/20221124/6624c343e0ec47e6a55e2322123c4f7d.png
[format_png 1]: /images/20221124/dc266d7a602349778892ad90219b8efe.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzcyMTgyMy0xOWIyNWJhNjAyMTAyYTcwLmdpZj9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzI5NC9mb3JtYXQvd2VicA]: /images/20221124/ea782c79c67343a4b981f6aef4cb2286.png