上一节介绍了通过CSS属性keyframes设置图片选择动画,本文介绍以下两种形式的动画:
this.animate
接口(旧的)wx.createAnimation
接口(新的,2.9.0开始支持)<view class="container"> <view class="box"> <!--this.animate--> <image id="loading" src="/images/icon_loading.png"></image> <text>加载中...</text> </view> </view>
page { background: gray; } .box { width: 400rpx; height: 300rpx; background: white; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 30rpx; } .box image { width: 100rpx; height: 100rpx; } .box text { margin-top: 20rpx; font-size: large; font-weight: bold; }
onShow: function () { this.animate('#loading', [ { opacity: 1.0, rotate: 0}, { opacity: 1.0, rotate: 45 }, { opacity: 1.0, rotate: 90 }, { opacity: 1.0, rotate: 360 }, ], 5000) },
<view class="container"> <view class="box"> <image id="loading" src="/images/icon_loading.png" animation="{{animationData}}"></image> <text>加载中...</text> </view> </view>
page { background: gray; } .box { width: 400rpx; height: 300rpx; background: white; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 30rpx; } .box image { width: 100rpx; height: 100rpx; } .box text { margin-top: 20rpx; font-size: large; font-weight: bold; }
data: { animationData: '' }, onShow: function () { var anim = wx.createAnimation({ duration: 5000, timingFunction: "linear" }) this.animationData = anim; anim.rotate(180).step(); this.setData({ animationData: anim.export() }) },