wxml
<view>
<view>
<image style="width:32rpx; height:32rpx;background:red;" animation="{{animationMiddleHeaderItem}}"></image>
</view>
</view>
js
Page({
data:{
animation:''
},
onReady: function () {
var circleCount = 0;
// 心跳的外框动画
this.animationMiddleHeaderItem = wx.createAnimation({
duration:1000, // 以毫秒为单位
timingFunction: 'linear',
delay: 100,
transformOrigin: '50% 50%'
});
setInterval(function() {
if (circleCount % 2 == 0) {
this.animationMiddleHeaderItem.translate(100).step();
} else {
// this.animationMiddleHeaderItem.translate(0).step();
}
this.setData({
animationMiddleHeaderItem: this.animationMiddleHeaderItem.export()
});
circleCount++;
if (circleCount == 1000) {
circleCount = 0;
}
}.bind(this), 1000);
}
})