Cómo crear efectos de animación 3D con lienzo HTML5
Así que decidí escribir yo mismo un marco de animación simple para construir algunos efectos de animación de manera más conveniente.
Describiré la implementación de mi pequeño marco de animación en varios capítulos:
1. Extracción de clases generales: objetos de animación y objetos de marco.
2. Combinación con carne: una ecuación de movimiento fácil de descomponer
3. Implementación de la barra de progreso: precarga la imagen del lienzo.
4. Pruebas de demostración: a través de un marco de pruebas de demostración.
Esta sección habla primero sobre la extracción de clases generales.
De hecho, he utilizado esta idea tomada de flash en mi artículo anterior: un objeto de animación (similar a un componente en flash) y un objeto de fotograma (similar a un componente en flash) (un fotograma). La animación se logra dibujando continuamente cada objeto animado en el cuadro actual. Con estos dos objetos y algunos métodos de movimiento, podemos construir una animación.
Primero, echemos un vistazo al objeto de animación Aniele:
/*
*Objeto de animación Aniele
*El antepasado de todos los objetos de animación.
*/
varAniele=function(){
this . img = new image();
//Definir objeto de animación Ubicación
this.loca={
x:300,
y:300
}
/ /Definir el tamaño del objeto de animación (se puede escalar)
this.dw
this.dh
//Atributo de velocidad del objeto de animación
this.speed={
x:0,
y:0
}
// Establece la transparencia del objeto.
this .alpha = 1;
//Establecer voltear la imagen, 1 significa no voltear, -1 significa voltear.
this.scale={
x:1,
y:1
}
// Una biblioteca de métodos de movimiento que definen objetos animados.
this . motionfncs =[];
}
Aniele.prototype={
//Agregar un método de movimiento
addMotionFnc:function(name, fnc) {
this . motionfncs[name]= fnc;
},
//Eliminar método de movimiento
deleMotionFnc: función (nombre) {
this . motionfncs[nombre]= null
},
//Movimiento transversal; Todos los métodos de movimiento en la biblioteca de métodos.
countMotionFncs:function() {
for(vari = 0;i
if(this.motionFncs[i]==null)
Continuar;
this.motionFncs[i] se llama (esto);
}
},
// Métodos para dibujar usted mismo, incluidas funciones: giro horizontal
draw: función (lienzo, ctx) {
//Almacenamiento del estado del lienzo CTX
<; p>//Cambiar transparencia.CTX .global alpha = this . alpha;
// Lograr volteo horizontal y vertical, definir los dos parámetros de posición dx, dy de drawImage.
vardx = esta . loca x;
vardy = esta . .scale.y! =1){
if(esta . escala . x <0){
Console.log(this.img.width)
dx = lienzo. ancho-este. loca. x-este img.
ctx.translate(canvas.width, 1); .scale.x, 1);
}
if (this . escala . y & lt; 0){
dy = altura del lienzo -this . . loca . y -this . img . altura;
ctx.translate(1,canvas.height);
ctx.scale(1,this.scale.y);
}
}
if(this.dw==null)
this dw = this img . p>
if(this.dh==null)
this DH = this img
//Dibujar un objeto
. ctx.drawImage(this.img, dx, dy, this.dw, this. DH);
//Restaurar el estado del lienzo CTX ();
}< /. p>
}
Principales propiedades de los objetos de animación:
this . img = new image(); Introducimos una imagen y la adjuntamos al objeto de animación ;
This.loca.x, etc.; el tamaño y posición de la imagen, transparencia, etc. , conveniente para llamar al dibujar;
this . motionfncs =[]; Definimos una biblioteca de métodos de movimiento para objetos de animación y colocamos todas las reglas de movimiento de los objetos de animación en esta biblioteca de métodos de movimiento para una administración unificada (cada objeto de animación tiene su propia biblioteca de métodos de movimiento).
Métodos principales de objetos de animación:
AddMotionFnc: Agregar métodos de movimiento a la biblioteca de métodos de movimiento de objetos de animación;
DeleMotionFnc: De métodos de movimiento de objetos de animación Eliminar un método de movimiento de la biblioteca;
CountMotionFncs: recorre todos los métodos de movimiento en la biblioteca de métodos de movimiento del objeto de animación;
Dibujar: dibuja el objeto de animación en el lienzo, aquí usamos el lienzo as Se pasan parámetros a este método para facilitar el dibujo;
En el método de dibujo, encapsulo algunas operaciones simples en imágenes que se usan a menudo en animación: transparencia, escala y volteo.
Con esto parece que tenemos un componente en flash, y podemos cambiarlo a nuestro antojo modificando sus propiedades.
¿Qué pasa con los objetos de marco?
El objeto de marco es responsable de renderizar y administrar todos los objetos de animación:
/*
*Representar objetos de renderizado
*Administrar todos animaciones Objetos y renderizado.
*Parámetros: objeto lienzo, contexto lienzo*/varrender = función (lienzo, CTX) {
//Introducción al lienzo
this.canvas = lienzo
this.ctx = ctx
//Crear lienzo de búfer
this.backBuffer=document. ('lienzo');
este .alto del búfer trasero .
this .backbuffertx = this .back buffer .get context(' 2d ');
//Todos los objetos de animación
this .
}
Render.prototype={
//Inicializar lienzo int
int:function() {
borrar intervalo (this . Sint);
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this backbuffertx . 0, 0, this.backBuffer.width, this .back buffer height
},
//Establecer para comenzar a renderizar
begin:function. () {
this.lastFrame=(nuevaFecha()). getTime();
this . Sint = setInterval((function(programa){
return function(){ programa. render();}
} )(this), segundo);
},
//Método de renderizado principal
render:function() {
/ /Borrar los marcos del historial en el lienzo y almacenar en caché el lienzo.
this.ctx.clearRect(0, 0, this.canvas.width, this . canvas . height);
this .backbuffertx . backBuffer.width, this . back buffer . height);
//Guarda la velocidad de fotogramas de salida actual en tiempo real this.ftp
this.nowFrame=(newDate()). getTime();
este . FTP = 1000/(este . ahora marco-este . último marco);
este último marco = este ahora marco;
//Llame al método de movimiento de cada objeto de animación.
for(vari = 0;i
if(this.aniEles[i]==null)
Continuar;
esto .aniEles[i].countMotionFncs();
//Dibuja el objeto en el lienzo del búfer de fondo
this.aniEles[i].
draw(this.backBuffer, this . backbuffertx);
}
//Dibuja el objeto de fondo en primer plano.
this . CTX . dibujar imagen (this . back buffer, 0, 0
},
//Agregar objeto de animación
<); p>addAniEle: función (nombre, aniEle) {this . anieles[nombre]= aniEle;
},
//Eliminar objeto de animación
p>deleAniEle: función (nombre) {
este anieles[nombre]= null;
}
}
this . anieles =[]; una matriz utilizada para almacenar todas las instancias de animación en el lienzo actual;
Todos los que han usado el lienzo para cargar imágenes. Debe saber que debido a la naturaleza asincrónica de la carga de imágenes, la imagen parpadeará durante la animación. Para evitar este fenómeno, utilizo doble buffer.
Primero, crea un lienzo en segundo plano:
this.backBuffer=document. ('lienzo');
este .alto del búfer trasero .
this.backbuffertx = this.back buffer.get context(' 2d ');
Todos nuestros comandos de dibujo se ejecutan en este lienzo de fondo y, finalmente, el lienzo de fondo se dibuja en el lienzo de primer plano:
este . CTX . dibujar imagen (este . back buffer, 0, 0
Este método consiste en dibujar la imagen en el lienzo de fondo primero y luego copiar el lienzo de fondo en él); en primer plano, llamada tecnología de doble buffer.
Métodos principales de los atributos del marco:
Int: utilizado para inicializar el lienzo;
Begin: método para iniciar el renderizado de la animación;
Renderizado: método de renderizado principal;
AddAniEle: agrega un objeto de animación al fotograma actual
Elimina la animación del fotograma actual
Nuestro proceso de uso del fotograma; objetos es: primero agregue el objeto de animación al fotograma actual y luego deje que el fotograma actual comience a renderizarse.
La Asociación de Operaciones de Red de la Facultad de Computación de Henan Xinhua le dará la respuesta.