在Canvas中如何实现自定义路径动画?


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来在Canvas中如何实现自定义路径动画?,Canvas实现自定义路径动画的注意事项有哪些,下面就是实战案例,一起来看一下。

在最近的项目中笔者需要做一个新需求:在canvas中实现自定义的路径动画。这里所谓的自定义路径不单单包括一条直线,也许是多条直线的运动组合,甚至还包含了贝塞尔曲线

那么如何才能在canvas中实现这种动画效果呢?其实很简单,对于路径的处理svg非常在行,因此在canvas中实现自定义路径动画,我们需要借助svg的力量。

创建Path

制作动画前,先要拿到动画的路径,对此我们可以直接使用svg的path定义规则,比如我们定义了一条较为复杂的路径(它到底长什么样大家可以自己试试,这里就不展示了),然后,我们需要将定义好的路径导入进一个新生成的path元素中(我们只是借助svg的api,因此并不需要将其插到页面内)

1

2

3

4

5

const path = 'M0,0 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 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';

  

const pathElement = document.createElementNS('http://www.w3.org/2000/svg',"path");

pathElement.setAttributeNS(null, 'd', path);

getTotalLength与getPointAtLength

SVGPathElement提供的这两个api很关键,可以说它是实现路径动画的最为核心的地方(在svg内实现自定义路径动画一般也是通过这两个api去解决)详情请戳:SVGPathElement MDN

getTotalLength方法可以获取SVGPathElement的总长度

getPointAtLength方法,传入一个长度x,将返回距离SVGPathElement起点的长度为x的终点坐标。

利用这两个api,通过循环的方式不断去更新canvas内所绘制的图形坐标,即可实现路径动画:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

const length = pathElement.getTotalLength();

const duration = 1000; // 动画总时长

const interval = length / duration;

const canvas = document.querySelector('canvas');

const context = canvas.getContext('2d');

let time = 0, step = 0;

  

const timer = setInterval(function() {

  if (time <= duration) {

    const x = parseInt(pathElement.getPointAtLength(step).x);

    const y = parseInt(pathElement.getPointAtLength(step).y);

    move(x, y);  // 更新canvas所绘制图形的坐标

    step++;

  } else {

    clearInterval(timer)

  }

}, interval);

  

function move(x, y) {

   context.clearRect(0, 0, canvas.width, canvas.height);

   context.beginPath();

   context.arc(x, y, 25, 0, Math.PI*2, true);

   context.fillStyle = '#f0f';

   context.fill();

   context.closePath();

}

最后,我们把它封装一下,即可实现一个在canvas中实现自定义动画的简易函数啦:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

function customizePath(path, func) {

    const pathElement = document.createElementNS('http://www.w3.org/2000/svg',"path");

    pathElement.setAttributeNS(null, 'd', path);

      const length = pathElement.getTotalLength();

    const duration = 1000;

    const interval = length / duration;

    let time = 0, step = 0;

    

      const timer = setInterval(function() {

        if (time <= duration) {

              const x = parseInt(pathElement.getPointAtLength(step).x);

              const y = parseInt(pathElement.getPointAtLength(step).y);

              func(x, y);

              step++;

        } else {

              clearInterval(timer)

        }

     }, interval);

}

1

2

3

4

5

6

7

8

9

10

11

12

const path = 'M0,0 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 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';

const canvas = document.querySelector('canvas');

const context = canvas.getContext('2d');

function move(x, y) {

      context.clearRect(0, 0, canvas.width, canvas.height);

    context.beginPath();

      context.arc(x, y, 25, 0, Math.PI*2, true);

      context.fillStyle = '#f0f';

      context.fill();

      context.closePath();

}

customizePath(path, move);

实现思路大致如上所述,然而这并不是最终成果。当我们决定要在canvas制作自定义路径动画时,我们不仅要考虑如何实现,更要考虑性能优化,比如在这个实现思路中,我们是否可以减少不必要的渲染次数?帧率如何控制达到最优?等等。

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

HTML的table鼠标拖拽排序该如何实现

html属于什么文件html的文件该如何打开

Html怎样实现动态显示颜色块的报表效果

以上就是在Canvas中如何实现自定义路径动画?的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html5 canvas标签的作用以及canvas标签的历史由来介绍

图文详解如何用canvas画实心圆和空心圆

如何使用html5 canvas绘制一个矩形

html5 canvas api中drawimage()方法的使用代码实例分享(图)

canvas 动态图表

html的a标签href属性指定相对路径与绝对路径的用法讲解

html5 canvas 图形组合是如何实现的?附代码

关于canvas下载二维码和图片加水印的方法

canvas基础的学习

在html5 canvas中放入图片和保存为图片的方法

更多相关阅读请进入《canvas》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...