Como alcançar um exemplo de animação de caminho personalizado na tela

No projeto recente, preciso fazer uma nova demanda: realizar a animação de caminho personalizado na tela. O caminho personalizado de So So -chamado aqui não apenas inclui uma linha reta, talvez várias combinações de movimento em linha reta e até incluem a curva Bessel.

Então, como podemos alcançar esse efeito de animação na tela? De fato, é muito simples.

Antes de fazer a animação, devemos obter o caminho da animação primeiro. Basta usar a API SVG, para que não precise inseri -la na página)

 Const Path = 'M0,33.90861 25.90861,16 48,16 C70.09139,16 88.33.90861 88,56 C88,78.09139 105.90861 128,92 C150.091988.72.720.90.90861150.091913.72139 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8.78.09139 8,56 Z '; PathElement.SetAttributen (NULL, 'D', PATH);

As duas APIs fornecidas pelo SVGPathElement são críticas.

O método getToTallength pode obter o comprimento total do SVGPathElement

O método getPointTLength é passado para um comprimento X, que retornará as coordenadas finais do comprimento do ponto de partida do SVGPathElement.

Use essas duas APIs para atualizar continuamente as coordenadas gráficas desenhadas em tela através de um ciclo, e a animação do caminho pode ser alcançada:

 Length = PathElement.getToTall Length (); 0; mover (x, y); , Canvas.head); closepath ();}

Por fim, encapsulamos -o para realizar uma função simples que realiza animação personalizada na tela:

 Função custmepath (path, func) {const Forms = document.createElementns ('http://www.w3.org/2000/svg', caminho); constência const = 1000; Etapa) .x); 'M0, 0 C8.33.9961 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90862 128.92.9091.2098.2139 160.5666666666666660.513,213,213,213.2139860.906666666666666666660.50860660.213.213.213.213.213.9860.566666660 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16,16,16. 96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; {context.clearrect (0, 0, canvas.width, canvas.Height);

A implementação de idéias é aproximadamente como descrito acima, mas esse não é o resultado final. Quando decidimos fazer uma animação de caminho personalizado na tela, devemos não apenas considerar como alcançá -la, mas também considerar a otimização do desempenho. Como controlar a taxa de quadros para o ideal? etc.

Embora eles não estejam no escopo da discussão deste artigo, deve valer a pena pensar.

O acima é todo o conteúdo deste artigo.