介绍
kevas 是一个基于 SVG 的库,它能够让你快速的创建动画,它利用类似 CSS 动画的方式去编辑路径动画,并应用于 SVG 中。使用 kevas,你可以优雅的提供更优秀的动画效果,它的接口也非常低阈值,因此你可以很快上手并运用到你的项目中。
安装
通过 npm 安装 kevas:
--- ------- ------ -----
使用
引入
可以像这样在代码中引入 kevas:
------ - ---- --------
或者这样:
------- --------------------------------
初始化
kevas 初始化是很简单的,只需要传递一个 SVG 元素,然后你就可以开始让它动起来了。
----- --- - ------------------------------- ----- - - --- -------
路径动画
kevas 的核心之一便是路径动画,在 kevas 中,你可以通过向 k.path() 方法传递一个路径来创建一个路径动画。
----- ---- - --------------------------------------- ----- ------ - ---------------------- ----- ------ - ------------------------------------------------------------- ----- ----------------- ------- -- - ------- ---------- --------- ---------- - -------------------- - ---
上面的代码先创建了一个路径动画对象,并设置了它的样式。然后将其从 0% 到 100% 描绘,持续 2 秒,并在结束时触发回调函数。
圆形动画
除了路径动画,kevas 还支持创建圆形,通过向 k.circle() 方法传递半径和圆心位置可以创建一个圆,这个圆可以利用 setColor() 方法来填充颜色。
----- ------ - ------------ --- ---------------------
矩形动画
与圆形动画类似,使用 k.rect() 方法创建一个矩形,并设置宽、高、左上角的 x 坐标和 y 坐标。
----- ---- - --------- -- --- --------------------------------
其他动画
除了路径、圆形和矩形动画,kevas 还支持其他类型的动画,比如三角形和五角星等,你可以使用 k.poly() 方法来创建它们。
----- -------- - -------------------------------------------------- -------- -------- -------- -----
动画组
在 kevas 中,你可以将一系列的动画组合起来,来实现更精美的动画效果。
----- ----- - --------------------- -------------------- ---------------- ------- -- - ------- ---------- --------- ---------- - -------------------- - ---
上面的代码中创建了一个动画组,并将路径动画和矩形动画添加到其中。然后设置了它从 0% 到 100% 描绘,持续 2 秒,并在结束时触发回调函数。最后将它向右和向下移动了 50 像素。
事件监听
kevas 还支持绑定事件监听器,你可以通过 on() 方法来绑定事件。K.events 中包括了鼠标事件类型和键盘事件类型。
----- ---- - --------- -- --- -------------------------------- ---------------- ---------- - ----------------------- ---
总结
kevas 是一个非常容易上手的库,它提供了多种动画类型,而且接口非常简单,所以可以让你轻易的实现多种复杂动画。希望通过该教程能让你更好的利用 kevas 创造有创意的动画效果。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066efe4c49986ca68d8b25