微信小程序-wx.createAnimation动画实现

一、效果

说明：类似携程切换往返地址

二、实现

1）.wxml:

  
    {{start}}
    
      
     
    {{end}}
  

2).wxss:

.animation{
  margin-top: 20rpx;padding: 10rpx 30rpx;background-color: #FFFFFF;
}
.dis-flex{
  display: flex;
}
.flex1{
  flex: 1;text-align: center;
}
.flex3{
  flex: 3;text-align: center;
}
.flexImg{
  width:20px;height:20px;
}

3).js：*******最重要的部分！**********

注意：图片记得要复位，不然再次点击的时候不能发生旋转。

 data: {
    lAnimate: '',
    rAnimate: '',
    imgAnimation:'',
    start: '北京',
    end: '深圳'
  },

 trigger() {
    let that = this;
    let option = {
      duration: 100, // 动画执行时间
      timingFunction: 'ease-in' // 动画执行效果
    };
    let lanimation = wx.createAnimation(option); // 创建动画
    let ranimation = wx.createAnimation(option);
    let imgAnimation = wx.createAnimation({
      duration: 200,
      timingFunction: 'linear'
    });
    // 起点
    lanimation.translateX(100);
    lanimation.opacity(0.1).step();
    // 终点
    ranimation.translateX(-100);
    ranimation.opacity(0.1).step();
    //中间图标
    imgAnimation.rotate(180).step();
    that.setData({
      lAnimate: lanimation.export(),// 开始执行动画
      rAnimate: ranimation.export(), // 开始执行动画
      imgAnimation: imgAnimation.export()
    })
    setTimeout(() => {
      // 起点
      lanimation.translateX(0);
      lanimation.opacity(1).step();
      // 终点
      ranimation.translateX(0);
      ranimation.opacity(1).step();
      //图片 在100ms后执行一个在0s时间完成新的动画让它复位至0度
      imgAnimation.rotate(0).step({ duration: 0, transformOrigin: "50%,50%", timingFunction: 'linear' })
      that.setData({
        imgAnimation: imgAnimation.export(),
        lAnimate: lanimation.export(),// 开始执行动画
        rAnimate: ranimation.export(),// 开始执行动画
        end: that.data.start,
        start: that.data.end
      })
    }, 100);
  }

三、API说明

wx.createAnimation(Object object)

创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

Object object

属性	类型	默认值	必填	说明
duration	number	400	否	动画持续时间，单位 ms
timingFunction	string	'linear'	否	动画的效果
delay	number	0	否	动画延迟时间，单位 ms
transformOrigin	string	'50% 50% 0'	否

timingFunction 的合法值:

值	说明	最低版本
'linear'	动画从头到尾的速度是相同的
'ease'	动画以低速开始，然后加快，在结束前变慢
'ease-in'	动画以低速开始
'ease-in-out'	动画以低速开始和结束
'ease-out'	动画以低速结束
'step-start'	动画第一帧就跳至结束状态直到结束
'step-end'	动画一直保持开始状态，最后一帧跳到结束状态

Animation方法：  

方法	说明
export ()	导出动画队列。export 方法每次调用后会清掉之前的动画操作。
opacity()	设置透明度。透明度，范围 0-1
rotate(number angle)	从原点顺时针旋转一个角度。旋转的角度范围 [-180, 180]
scale(number sx, number sy)	当仅有 sx 参数时，表示在 X 轴、Y 轴同时缩放sx倍数；在 Y 轴缩放 sy 倍数
skew(number ax, number ay)	对 X、Y 轴坐标进行倾斜
step(Object object)	表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
translate(number tx, number ty)	平移变换