介绍
doodle-vue是一个基于Vue.js的轻量级动画库。它可以帮助你轻松地在你的项目中添加各种动画效果，让你的网站更具交互性和趣味性。使用doodle-vue，你可以很容易地制作出堆叠的、可拖拽的、拉伸的、旋转的、放大缩小的、平移的、多边形的、花哨的文本、背景和图形等各种动画。
安装
你可以使用npm包管理器来安装doodle-vue。在终端或命令窗口中输入下面的命令：
$ npm install doodle-vue --save
使用
第一步，你需要在你的项目中引入doodle-vue。在Vue项目中，你可以在main.js中引入：
import DoodleVue from 'doodle-vue' import 'doodle-vue/dist/doodle-vue.css' Vue.use(DoodleVue)
第二步，你可以在Vue项目的组件中使用doodle-vue。你可以使用组件名字doodle-vue，同时你需要提供不同的属性来控制不同的动画效果。
下面是一个简单的示例：创建一个旋转的正方形。
-- -------------------- ---- -------
----------
----------- ------------------------------
-----------
--------
------ ------- -
------ -
------ -
-------- -
----- ---------------
-
-
-
-
---------在以上代码中，我们将组件名字设置为doodle-vue，然后我们在data中提供了一个属性options，这个属性用来控制旋转正方形的属性。type: 'rotate-square'表示这是一个旋转正方形。
你可以通过给options添加不同的属性来创建不同的动画。下面是一些简单的示例。
- 创建一个顺时针旋转的正方形。
options: {
type: 'rotate-square-cw'
}- 创建一个逆时针旋转的正方形。
options: {
type: 'rotate-square-ccw'
}- 创建一个大小变化的正方形。
options: {
type: 'scale-square'
}- 创建一个拖动可编辑的圆形。
options: {
type: 'drag-circle'
}- 创建一个棱锥。
options: {
type: 'pyramid'
}- 创建一个闪烁的文本。
options: {
type: 'flicker-text'
}- 创建一个旋转的点。
options: {
type: 'rotate-dot'
}定制化
doodle-vue不仅提供了上面这些动画效果，你还可以通过提供自己的CSS或JS代码来创建完全定制化的动画。
下面我们来创建一个自定义动画。
-- -------------------- ---- -------
----------
---- ------------------
----------- ---------------- --
------
-----------
--------
------ ------- -
------ -
------ -
-------- -
--------- -------- ----- ------- -
-------- ----------------- -
------------- - ------
----------------
----------- --- --- -- - - ---------
-----------
-
------ ------------------
-
-
-
-
-
---------
------ -------
---------- -
------ ------
------- ------
-
--------在以上代码中，我们定义了一个圆形，它将会移动。首先我们需要创建一个画布（canvas），然后在画布上绘制圆形。我们将在options中添加自定义代码。customJS属性接受一个返回函数的数组，这个函数在新的帧（frame）时会被调用。在这个函数中，我们绘制了一个圆形。
结论
doodle-vue是一个非常实用的Vue.js动画库，通过它，你可以轻松地实现你的项目中的各种动画效果。在本文中，我们讲解了如何使用doodle-vue，以及如何通过提供自己的CSS或JS代码来创建完全定制化的动画。我们强烈推荐doodle-vue，它将会成为一个Vue.js项目中的有趣的加成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005623581e8991b448df834