Documento oficial de animación del miniprograma
Necesita usar wx.createAnimation ({}) para crear una animación de instancia de animación y llamar al método de la instancia para describir la animación. Finalmente, los datos de animación se exportan a la propiedad de animación del componente a través del método de exportación de la instancia de animación.
La mayoría de los métodos en la instancia de animación son para establecer el estilo de animación y devuelven el objeto de la instancia de animación en sí, por lo que podemos usar la escritura en cadena. Debe prestar atención a los dos métodos animation.step () y animation.export ()
- paso () significa que se completa un grupo de animaciones, se puede llamar cualquier número de métodos de animación en un grupo de animaciones, todas las animaciones en un grupo de animaciones comenzarán al mismo tiempo, y el siguiente grupo de animaciones se realizará después de se completa un grupo de animaciones
- export () Exporta la cola de animación. ** El método de exportación borrará la operación de animación anterior después de cada llamada **
data: {
myanimation:null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var animation = wx.createAnimation({
delay: 0,
duration:2000
})
console.log(animation)
//表示动画 放大2倍 step表示一组动画结束
animation.scale(1.5,5).opacity(0.5).backgroundColor("#000").step()
//导出对应的动画数据
var arr = animation.export()
console.log(arr)
//将动画数据赋值给对应组件的animation属性
this.setData({
myanimation:arr
})
},