一、效果
说明：类似携程切换往返地址
二、实现
1）.wxml:
<view class="animation"> <view class="dis-flex"> <view class='flex3' animation="{{lAnimate}}">{{start}}</view> <view class='flex1' bindtap="trigger"> <image src="../../images/change.png" class="flexImg" animation="{{imgAnimation}}"></image> </view> <view class='flex3' animation="{{rAnimate}}">{{end}}</view> </view></view>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) | 平移变换 |
