---wxml文件---
<view class='lunbo' animation="{{animationItem}}"
</view>
---JS文件---
var that = this;
//動(dòng)畫(huà)樣式
that.animationItem = wx.createAnimation({
duration: 500,
timingFunction: 'linear',
transformOrigin: '90% 70%',
success: function(res) {}
});
// 定時(shí)器募狂,2S 循環(huán)一次
that.data.newLunbo_interval = setInterval(function() {
//開(kāi)始動(dòng)畫(huà)-縮小
that.animationItem.scale3d(0.98, 0.98, 0.1).step();
that.setData({
animationItem: that.animationItem.export()
});
//延遲恢復(fù)到原來(lái)大小
setTimeout(function() {
that.animationItem.scale3d(1.0, 1.0, 1.0).step();
that.setData({
animationItem: that.animationItem.export(),
});
}, 500)
}.bind(that), 2000);
清理定時(shí)器
clearInterval(this.data.newLunbo_interval);
創(chuàng)建wx.createAnimation參數(shù)含義
duration 動(dòng)畫(huà)持續(xù)時(shí)間载慈,單位 ms
timingFunction 'linear' 動(dòng)畫(huà)的效果
delay 動(dòng)畫(huà)延遲時(shí)間侧漓,單位 ms
transformOrigin '50% 50% 0'
timingFunction 的合法值
'linear' 動(dòng)畫(huà)從頭到尾的速度是相同的
'ease' 動(dòng)畫(huà)以低速開(kāi)始押框,然后加快,在結(jié)束前變慢
'ease-in' 動(dòng)畫(huà)以低速開(kāi)始
'ease-in-out' 動(dòng)畫(huà)以低速開(kāi)始和結(jié)束
'ease-out' 動(dòng)畫(huà)以低速結(jié)束
'step-start' 動(dòng)畫(huà)第一幀就跳至結(jié)束狀態(tài)直到結(jié)束
'step-end' 動(dòng)畫(huà)一直保持開(kāi)始狀態(tài)模软,最后一幀跳到結(jié)束狀態(tài)
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
最后編輯于 :2020.06.30 09:49:59
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者