【文件属性】：
文件名称：canvas-path-animation-demos:【:artist_palette:万物皆可动】详解Canvas路径动画
文件大小：284KB
文件格式：ZIP
更新时间：2021-05-24 02:58:39
HTML
前言
好久不见，我是Channing
因为最近事情比较多，很抱歉已经两个月没有写新文章了
这几天终于有机会也因为工作上的一些灵感于是肝下这篇文章分享给大家
希望能对你有一定的启发或帮助:folded_hands:
拥有了强大的Canvas，我们可以使用JavaScript来控制它从而轻易地绘制出各种各样想要的图形，还可以利用JavaScript将用户的交互与canvas的绘制紧密地连接起来，甚至大可发挥我们的脑洞去做各种各样天马星空的事情。
虽然canvas帮助我们轻松地绘制出了各种各样的图形，但canvas本身并没有过渡效果，每一次绘制出来就不会发生变动，那么如何让“静止”的canvas动起来呢？
首先，我们先了解动画本身的含义，参考*：
动画（英语：Animation）是一种通过定时拍摄一系列多个静止的固态（）以一定频率连续变化、运动（播放）的速度（如每秒16张）而导致肉眼的产生的——而误以为图画或物体（
【文件预览】：
canvas-path-animation-demos-main
----.gitignore(356B)
----src()
--------一条直线的路径动画——缓动函数.html(3KB)
--------一条直线的路径动画——思路2.html(3KB)
--------一条直线的静态绘制.html(1KB)
--------二次贝塞尔曲线——路径动画.html(4KB)
--------折线路径动画.html(4KB)
--------虚线路径动画.html(2KB)
--------一条直线的路径动画——思路1.html(3KB)
--------优弧.html(171KB)
--------三次贝塞尔曲线——路径动画.html(5KB)
--------圆形的路径动画.html(3KB)
----assets()
--------优弧头像.png(125KB)
----utils()
--------aaa.js(55B)
--------Easing.mjs(6KB)
--------Easing.ts(6KB)
----README.md(37KB)
----styles()
--------index.css(886B)