1. Declarar animación en datos: animación. 2. Cree una animación de instancia de animación en el momento adecuado. 3. Llame al método de la instancia para describir la animación. Por ejemplo: 4. Después de llamar al método de operación de animación, debe llamarse para indicar la finalización de un grupo de animaciones. Puede llamar a cualquier cantidad de métodos de animación en un grupo de animaciones. Todas las animaciones en un grupo de animaciones comenzarán en al mismo tiempo Paso y configuración de wx.createAnimation() Los parámetros son los mismos 5. Finalmente, exporte los datos de animación y páselos a la animación del componente a través del método de instancia de animación. Es la salida de animación para hacer que se mueva. Nota: el método de exportación borrará la operación de animación anterior después de cada llamada.data:{ animation:{} }
this.animation = wx.createAnimation({})
this.animation.rotate(150).scale(3)
step()
export
<view animation="{
{animation}}" class="animation">
测试使用——小程序循环播放~~~
</view>
.animation{
width: 100%;
transform: translateX(100%);
position: fixed;
top: 45%;
font-size: 16px;
font-weight: bold;
}
/**
* 生命周期函数--监听页面初次渲染完成
*/
Page({
/**
* 页面的初始数据
*/
data: {
animation:{}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
this.animation1();
},
animation1(){
var animation1 = wx.createAnimation({
duration: 5000,
timingFunction: 'linear',
transformOrigin:"100% 0 0"
})
animation1.translateX('-100%').step();
this.setData({
animation:animation1.export(),
})
//设置循环动画
this.animation = animation1;
setInterval(function(){
//第二个动画 文字位置初始化
this.animation2();
//延迟播放滚动动画(效果会更好点)
setTimeout(function(){
this.animation.translateX('-100%').step();
this.setData({
animation: animation1.export(),
})
}.bind(this),200);
}.bind(this),5000);
},
/**
* 第二个动画 文字位置初始化
*/
animation2(){
var animation2 = wx.createAnimation({
duration: 0,
timingFunction: 'linear',
transformOrigin:"100% 0 0"
})
animation2.translateX('100%').step();
this.setData({
animation:animation2.export(),
})
},
/**
* 解决小程序退出、隐藏后台动画停止
*/
onHide: function () {
//解决小程序退出、隐藏后台动画停止
//重新触发动画方法即可
this.bindAnimation();
}
})