---wxml文件---
<view class='lunbo' animation="{{animationItem}}"
</view>
---JS文件---
var that = this;
//动画样式
that.animationItem = wx.createAnimation({
duration: 500,
timingFunction: 'linear',
transformOrigin: '90% 70%',
success: function(res) {}
});
// 定时器,2S 循环一次
that.data.newLunbo_interval = setInterval(function() {
//开始动画-缩小
that.animationItem.scale3d(0.98, 0.98, 0.1).step();
that.setData({
animationItem: that.animationItem.export()
});
//延迟恢复到原来大小
setTimeout(function() {
that.animationItem.scale3d(1.0, 1.0, 1.0).step();
that.setData({
animationItem: that.animationItem.export(),
});
}, 500)
}.bind(that), 2000);
清理定时器
clearInterval(this.data.newLunbo_interval);
创建wx.createAnimation参数含义
duration 动画持续时间,单位 ms
timingFunction 'linear' 动画的效果
delay 动画延迟时间,单位 ms
transformOrigin '50% 50% 0'
timingFunction 的合法值
'linear' 动画从头到尾的速度是相同的
'ease' 动画以低速开始,然后加快,在结束前变慢
'ease-in' 动画以低速开始
'ease-in-out' 动画以低速开始和结束
'ease-out' 动画以低速结束
'step-start' 动画第一帧就跳至结束状态直到结束
'step-end' 动画一直保持开始状态,最后一帧跳到结束状态
transformOrigin 的合法值
transform-origin: x-axis y-axis z-axis;
x-axis 定义视图被置于 X 轴的何处。可能的值:
left
center
right
length
%
y-axis 定义视图被置于 Y 轴的何处。可能的值:
top
center
bottom
length
%
z-axis 定义视图被置于 Z 轴的何处。可能的值:
length