Cómo usar css3 para crear animaciones en mini programas

1. Utilice estilos para implementar la animación del mini programa (el uso es similar al uso de CSS)

archivo wxml

lt image class="aniamtion" src; =" ../.../images/page4.jfif" style="ancho: 200rpx; alto: 200rpx;? posición:? relativa; "gt;lt;/imagegt;

archivo wxss

.aniamtion { Animation: mymove 5s infinito; /* //El atributo infinito representa un bucle infinito. Sin este atributo, la animación solo se ejecutará una vez.

}

@keyframes mymove { de {

/* izquierda: 0px; */

/* transformar: rotar(7deg ) sesgar(50deg) traducir(30rpx, 30rpx); */

transformar: rotar(7deg) sesgar(50deg) traducir(30rpx, 30rpx) */

transformar: rotar3d); (100, 200, 300, 0 grados); } a {

/* izquierda: 200 px; */

/* transformar: rotar (7 grados) sesgar (5 grados) traducir (100 rpx) , 100rpx); */

transformar: rotar3d(200, 300, 400, 360deg); }

}

2. animaciones

Utilice wx.createAnimation(object) para crear animación --gt; devuelve un objeto de animación

Crea una instancia de animación onReady: function () {

this.animation = wx.createAnimation({

duración: 1000,

timingFunction: 'lineal',

retraso: 100,

transformOrigin: " left top 0"

}) },

Llame al método de instancia para describir la animación.

Animation.step() representa la finalización de un grupo de animaciones. Se puede llamar a cualquier número de métodos de animación en un grupo de animaciones. Todas las animaciones de un grupo de animaciones comenzarán al mismo tiempo. no se ejecutará hasta que se complete un grupo de animaciones. Siguiente conjunto de animaciones rotar(){ this.animation.rotate(step() //Breve descripción de la animación this.setData({

). animación: this.animation.export() }) } ,

Finalmente, los datos de la animación se exportarán a través del método de exportación de la instancia de animación y se pasarán a la propiedad de animación del componente.

this.animation.export() exporta la cola de animación.

Después de cada llamada, el método de exportación borrará la operación de animación anterior rotar(){ this.animation.rotate(150).step() // Una breve descripción de la animación this .setData({ // en setData({})

animación: this.animation.export() }) Exportar cola de animación. export() }) },

wxml completo

lt; ver class="container"gt;

lt; }" class="view"gt;

Bloque que realiza animación

lt;

lt;/viewgt;

lt; /viewgt;

lt;/viewgt;

lt; tipo de botón="default" size="mini" bindtap="rotate"gt;

Girar

lt;/buttongt;

wxjs completo

Página({ datos: {

animación: '' }, onReady: función () {

this.animation = wx.createAnimation({

duración: 1000,

timingFunction: 'lineal',

retraso: 100,

transformOrigin: "0 superior izquierdo"

}) }, rotar(){ this.animation.rotate(150).step().translate(100) .step() this.setData({ animación: this.animation.export() }) }

})

3. Utilice el selector para vincular el componente para implementarlo. Efectos de animación (Applet 2.9.0).

.0 está disponible, si la versión no es suficiente, se informará que this.animate no es un método)

lt; textgt; pages/index7/index7.wxmllt;/textgt;

lt; id de vista = "contenedor" estilo="alto: 100px; ancho: 100px; color de fondo: azul; "gt; contenedor

lt;/viewgt;

lt; ver class="bloque " estilo="alto: 100px; ancho: 100px; color de fondo: #ccc; "gt; bloque

lt;/viewgt;

Utilice el selector para seleccionar el componente correspondiente y haga que produzca los efectos de animación correspondientes.

Ejecutar fotogramas clave

onLoad: función () {

this.animate ('#container', [

?{ opacidad: 1.0, rotar: 0, color de fondo: '#FF0000' },

?{ opacidad: 0.5, rotar: 45, color de fondo : '#00FF00' },

?{ opacidad: 1.0, rotar: 90, color de fondo: '#00FF00' },

?90, color de fondo: '#FF0000' },

], 5000 )

this.animate('.block', [

?{ escala: [1, 1], rotar: 0, facilidad : 'ease-out' },

p>

?{ escala: [1.5, 1.5], rotar: 45, facilidad: 'ease-in'},

?{ escala: [2, 2], rotar: 90 },

], 5000) }, }?

4. Utilice la biblioteca de terceros Animation.css

Qué hay que hacer

Desde https ://daneden.github.io/animate.css/Descargar archivo de animación css

Convertir el archivo .css a un Archivo .wxss (se pueden realizar los cambios correspondientes, el tamaño del mini programa es limitado). Después de todo, el tamaño del mini programa es limitado)

Importarlo a su archivo app.wxss

@import "Directorio relativo de archivos de animación"

Vincúlelo a su estilo cuando use

lt; view class ="swing" style="height: 100px; width: 100px; background-color: #ccc;"gt;

block

lt;/viewgt;

// Vincula la animación swing al archivo llamado swing.

.swing{

animación: swing 5s infinito

}.