微信小程序--动画animation

一. 获取需要实现动画效果的元素

1. 微信小程序获取元素节点：

注意获取元素节点方法为 异步调用 ，因此使用promise，确保节点获取到值后再返回获取的width宽度。

//  参数：select -> 想要获取的节点的类名，使用： getRect(".className") 
 getRect(select) {
   
      const _this = this;
      return new Promise((resolve,reject)=>{
   
        _this.createSelectorQuery()
            .select(select)
            .boundingClientRect(rects => {
   
                if(rects){
   
                    resolve(Math.ceil(rects.width));
                }
        }).exec();
      })
    },

2. 合适的生命周期调用

工具函数写完后，调用获取元素属性，注意生命周期函数使用 ready而非 create 。另外，前面提到获取元素属性的函数是异步的，因此使用了promise，因此在这个步骤使用 promise.all() 获取得到的全部数据并赋值给data中的数据。

ready(