小程序动画

效果需求

1 .先向上，然后向左，一个插入的效果
2 .向上有回弹

实现帧动画 this.animate

1 .缺点

1 .offset参数效果不明显，无法精确的确定每一帧占用的时间，有些效果看不出来
2 .下一次帧移动的距离要继承上次的最终结果，比如第二次向左边移动的时候，也要写向上的移动，不然又会移动到原点
3 .offset问题https://developers.weixin.qq.com/community/develop/doc/0000ec1f9d8e2054eb9ad7bc254c00?_at=1655045375543
4 .原来是要添加初始帧，也就是要变化的属性，一定要在每一帧都有，包括开始和结束,所以最后还是这个方法比较优雅.实现了需要的功能

2 .优点

1 .实现简单，动画结束的回调函数提供了
2 .有重置元素动画的函数

3 .代码

this.animate('.find-room-content-item-new',[
          {opacity:0.9,translateY:-18,ease:"linear",offset:0.9},
          {opacity:1,translate:[-200,-18],ease:"linear",offset:0.1}
          // 第二个动画帧的时候，不会保留第一帧的变化，在y方面是往初始位置变的
        ],1500,function(){
          this.setData({
            isNewEnd:true
          })
          this.clearAnimation('.find-room-content-item-new',function(){
          })
        }.bind(this))

wx.createAnimation方式

1 .缺点

1 .回调函数不明显，只能绑定bindtransitionend 事件
2 .bindtransitionend事件说明:监听小程序的过度属性，比如我属性有2帧，每一帧有2个属性变化，那么这个事件会触发4次，需要知道动画播放完毕，还需要自己做计时器。。
3 .有点拉。

2 .优点

css3动画实现

1 .不能拆分每一帧的实现，animation-timing-function这个函数不能拆开给某一个的变化设置，只能给整个动画，无论有几帧，都调用这个函数
2 .这里如果用animeJs的话应该就没问题了.
3 .感觉这个又简单，效果又好，然后事件也全

css端
.animationAddNew{
  animation: addNew 3s alternate 1;
  animation-timing-function:cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

@keyframes addNew {
  50%{
    opacity: 0.5;
    transform: translateY(-18px);
  }
  100%{
    opacity: 1;
    transform: translate(-200px,-18px);
  }
}

js端
this.setData({
          isNewEnd:false,
          addNewClass:'animationAddNew'
        })
//想要调用动画的话，就把这个class设置到text元素上,动画播放完毕在拿掉这个样式

4 .这又是一个很麻烦的问题，和我的要求还是不符合.

方法3 wx.createAnimation

1 .可以在单独每一帧设置缓动函数，但是结束之后没有回到最初的状态
2 .动画结束之后，样式没有清除

animationiteration animationend

1 .监听的是使用css3@keyframes定义的动画的执行结束事件和动画循环事件