Recentemente, fiz um projeto em que é necessário perceber os efeitos da animação da chuva e da neve leve, então fiz um componente de queda aqui para mostrar os objetos que caem comuns dessa tela. Antes de apresentar o texto principal para você, deixe -me mostrar as renderizações:
Exibir renderizações:
Chove e neve
Parece bom. Comparado ao uso da criação de elementos DOM para criar imagens de movimento de posição de vários objetos, o uso de tela será mais fácil e rápido, e o desempenho será melhor.
Código de chamada
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <titter> document src = "canvasdrop.js"> </sCript> <cript> canvasdrop.init ({type: "chuva", // tipo de gota, chuva ou snowpeed: [0.4,2.5], // speed range size_range: [0,5,1.5], // o tamanho e a faixa de radius tem verdadeiro: //: [0,5,1.5], // o tamanho do tamanho e o radius tem verdadeiro: //: [0,5,1.5], // o tamanho do tamanho e o radio tem verdadeiro: //: [0,5,1.5], // o tamanho do tamanho e o raio tem verdadeiro, //: //: [0.5,5], // o tamanho do tamanho e o radius e o radio. Hasgravity: True // Existe alguma consideração por gravidade}); </sCript> </body> </html>OK, vamos explicar o princípio simples de implementação. Primeiro, defina algumas variáveis globais que usaremos, como ângulo de direção do vento, probabilidade, dados de objetos etc.
Defina variáveis globais
// Defina dois dados do objeto // as quedas do objeto do objeto do objeto // e o objeto de rebote bola o objeto Var Drops = [], saltos = []; // A aceleração da gravidade é definida como 0.2/One Frame Var Gravity = 0.2; var speed_x_x, // velocidade de aceleração horizontal_x_y, // Longilation ACCELAISTRO; // Direção do vento // A largura e a altura do pixel da tela var veiawidth, CanvasHeight; // A probabilidade de criar gota var drop_chance; // configure objeto var opts; // padrão, se houver um método de requestanimação. || window.webkitRequestanimationframe || window.mozRequestanimationframe || window.orequestanimationframe || window.msRequestanimationFrame || function (retorno de chamada) {window.setTimeout (retorno de chamada, 1000 /30);};Defina o objeto principal
Em seguida, precisamos definir vários objetos importantes. Há menos objetos que a organização precisa definir. No total, apenas três objetos principais são definidos em todo o componente de queda, que são os seguintes:
Objeto de velocidade vetorial, com X e unidades de tamanho de velocidade Y vertical: V = pixels de deslocamento/quadros
O entendimento do objeto vetor
var vetor = função (x, y) {// Atributo privado Velocidade horizontal x, velocidade vertical ythis.x = x || 0; this.y = y || 0;}; // Método público- Adicionar: função de mudança de velocidade, aumente a velocidade de acordo com os parâmetros // devido às necessidades dos negócios, toda a aceleração em queda é considerada, para que não haja desaceleração e pode ser expandida no estágio posterior/** @param v objeto || string */vetor.prototype.add = function (v) {if (vx! {// retorna uma instância de vetor com o mesmo atributo de velocidade retorna novo vetor (this.x, this.y);}; soltar o objeto Drop, ou seja, as gotas de chuva e a neve no efeito acima, mais tarde você pode expandi -lo para um meteorito ou concha. A definição básica do objeto Drop é a seguinte // construtor var derrube = function () {/ * .... */}; // public métod update Drop.prototype.UpDate = function () {/ * .... */}; // public métod-Drawdrop.prototype.draw = function () {/ * ...... */}Depois de ler os três métodos acima, você adivinhou o papel deles? Vamos entender o que esses três métodos fazem.
Construtor
O construtor é principalmente responsável por definir as informações iniciais do objeto Drop, como velocidade, coordenadas iniciais, tamanho, aceleração etc.
// Construtor Dropvar Drop = function () {// Defina aleatoriamente as coordenadas iniciais de Drop // Primeiro selecione o elemento queda de qual lado é o de var aleatomedge = math.random () * 2; if (RandomEdge> 1) {this.Pos = New Vector (50 + Math.random () * Canvas.width, -8) Math.Random () * Canvas.Height);} // Defina o tamanho do elemento queda // O valor aleatório é obtido pela faixa de raio da função chamada opts this.Radius = (opts.size_Range [0] + math.random () * Ots.size_Range [1]) * DPR; (Opts.speed [0] + math.random () * opts.speed [1]) * dpr; this.prev = this.pos; // multiplique o ângulo por 0,017453293 (2PI/360) para convertê -lo em radianos. Var cadager = 0,017453293; // obtenha o ângulo da direção do vento wind_anger = opts.wind_direction * cadager; // obtenha a velocidade de aceleração lateral_x = this.speed * math.cos (wind_anger); // obtém a velocidade longitudinal de aceleração;Método de atualização do objeto Drop
O método de atualização é responsável por alterar os atributos de cada instância de queda de quadro, como alterar o deslocamento.
Drop.prototype.Update = function () {this.prev = this.pos.copy (); // Se houver gravidade, a velocidade longitudinal será aumentada se (opts.hasgravity) {this.vel.y += gravidade;} // this.pos.add (this.vel);};O método de desenho do objeto Drop
O método de desenho é responsável por desenhar cada instância de queda de quadro
Drop.prototype.draw = function () {ctx.beginpath (); ctx.moveto (this.pos.x, this.pos.y); // Atualmente, existem apenas duas situações, uma é a chuva, isto é, curva bezier if (opts.type == "Rain") {Ctx.ArvErt. Math.abs (this.radius * math.cos (wind_anger)); var ay = math.abs (this.radius * math.sin (wind_anger)); ctx.beziercurveto (this.pos.x + ax, this.pos.y + ay, this.prev.x + ax, this.rev. this.pos.y); ctx.stroke (); // o outro é neve---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Devolva o objeto de recuperação de cair e cair, isto é, as gotículas de água que se recuperam da água da chuva acima, você também pode se expandir para recuperar cascalho ou fumaça no estágio posterior
A definição é muito simples, então não vou explicar em detalhes aqui
var Bounce = function (x, y) {var dist = math.random () * 7; var angle = math.pi + math.random () * math.pi; this.pos = new vetor (x, y); this.Radius = 0.2+ math.random () * 0.8; this.vel = news (math.os.Cos = 0,2+ math.random () * 0.8; this.vel = news (math.oss = 0.2+ math.random () * 0.8; this.vel = news (math.os. dist);}; bounce.prototype.UpDate = function () {this.vel.y += gravidade; this.vel.x *= 0,95; this.vel.y *= 0.95; this.pos.add (this.vel);}; bounce.prototype.draw = function () {ct.bpath.bgin; this.radius * dpr, 0, math.pi * 2); ctx.fill ();};Interface externa
atualizar
Isto é, a função inicial equivalente a toda a animação de tela
função update () {var d = new Date; // Limpe o desenho ctx.clearrect (0, 0, canvas.width, canvas.Height); var i = gotas.length; while (i-) {var. {// Se você precisar de recuperação, adicione a instância de salto à matriz de salto se (opts.hasbounce) {var n = Math.Round (4 + math.random () * 4); enquanto (n-) salta.push (novo bounce (grow.pos.x, canvas.Height));} // Se a instância de gota cair para a parte inferior, você precisará ser limpo na matriz de gotas do objeto da instância. {var Bounce = salta [i]; Bounce.Update (); Bounce.draw (); if (Bounce.pos.y> Canvas.Height) salta.splice (i, 1);}} // se o número de lesão gerado cada vez é se (tota. Opts.numlevel; para (; i <len; i ++) {Drop.push (new Drop ());}}} // loop continuamente updateRequestanimframe (atualização);}init
Interface init, inicialize todas as propriedades básicas de toda a tela da tela, como obter a proporção de pixels da tela e definir o tamanho do pixel da tela e definir o estilo da tela
function init (opts) {opts = opts; canvas = document.getElementById (opts.id); ctx = canvas.getContext ("2d"); //// compatível com as telas de alta-definição, os pixels de tela de câmbio e o pixels de câmbio e a janela.DevicePixelratio; As telas de alta definição, portanto, o comprimento e a largura da tela do quadro de arte devem ser multiplicados por dpr canvaswidth = canvas.clientwidth * dpr; canvasHeight = canvas.clientHeight * dpr; // defina a largura e a altura da placa de arte. setStyle ();} função setStyle () {if (opts.type == "chuva") {ctx.linewidth = 1 * dpr; ctx.strokestyle = 'rgba (223.223,223,0.6)'; ctx.fillstyle = = 'RGBA (223.223,223,0.6)';} else {ctx.linewidth = 2 * dpr; ctx.strokestyle = 'rgba (254,254,254,0.8)'; ctx.fillstyle = 'rgba (254,254,24,2)';Conclusão
OK, um componente de queda simples foi concluído, é claro, há muitas coisas que não são perfeitas. Depois de escrever esse componente, para a implementação da animação da tela, acredito que há muitos lugares para descobrir na cena do H5.
Por fim, vamos falar sobre as deficiências e trabalhos posteriores:
0. Não há interfaces externas suficientes para esse componente, a faixa ajustável não é muito grande e a abstração não é muito completa.
1. Conjunto de settyle estilo básico
2. A personalização dos métodos de atualização e desenho dos objetos de gota e rejeição permite que os usuários defina mais formulários e efeitos de estilo de velocidade de queda e mudança de tamanho.
3. A interface para pausa de animação, operações de aceleração e desaceleração deve ser adicionada.
O exposto acima é o conhecimento relevante sobre JS e tela que eu apresentei a você sobre como alcançar efeitos chuvosos e de neve. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!
Este artigo é reproduzido: http://blog.csdn.net/xllily_11/article/details/51444311