anime.js实现带笔画动画效果的复选框(推荐)

anime.js

Anime.js是一个灵活且轻量级的JavaScript动画库。

它与CSS、单个转换、SVG、DOM属性和JS对象相关联。

特征

特定的动画参数，特定的目标值，多个定时值，播放和控制运动路径。在网页或APP的开发中，动画的恰当应用可以起到锦上添花的作用。正确使用动画不仅可以帮助用户理解交互，还可以大大提升web应用的魅力和体验。而在当前的网页开发中，动画已经成为一种设计标准，变得越来越重要。尤其是在一些用户交互的地方，使用动画可以给用户更好的反馈，提升用户的操作体验。

在网页开发中，实现动画的技术有很多。在本文中，我们使用了一个轻量级且功能强大的javascript动画库animation.js来编写动画效果。创建和管理动画非常方便。如果你不熟悉这个库的使用，可以先阅读并写一篇介绍性的文章。本文主要利用它来达到以下效果：

动画效果很简单，主要由一个圆和一个白钩组成。在CSS中使用边框半径创建这个圆非常方便。使用它可能比使用SVG创建圆更简单，代码更少，但在这种效果下，因为白钩需要由SVG实现，所以圆也是由SVG实现的。而且，现在SVG越来越流行，SVG是一个可以随意上下缩放的向量。以下是此圆的SVG代码：

Svg类='勾号' xmlns=' http://www.w3.org/2000/SVG'宽度=' 32 '高度=' 32' viewbox=' 003232' circle类=' circle' CX=' 16' cy=' 16' r='

首先，实现一个简单的动画效果，将圆圈从无到有放大到全尺寸。要达到这个效果，我们需要做两件事：1。给圆起一个类名；2.实例化一个animation.js的时间轴，并使用它来组合多个动画效果。当然不使用时间轴来创建动画效果，但是可以直接使用构造函数来创建动画效果。但是使用时间轴的好处是可以更方便的管理动画，比如各种效果之间的连接和延迟，我们可以更精细的控制动画效果。这里的缩放效果是通过缩放这个SVG直接实现的，代码如下：

var checkTimeline=anime . timeline({ autoplay : true，direction: 'alternate '，loop : true })；检查时间表。添加({target: '。勾号'，scale: [{value: [0，1]，持续时间： 600，宽松度3360' easeoutquad'}])简要解释了这段代码。首先定义一个动漫的例子，通过自动播放、方向、循环，定义动画自动播放，循环执行。要动画化的元素，即勾号，由targets参数制定，从0缩放到1，动画时间为600毫秒，并且还定义了动画的运动曲线。

在动画制作中，动画执行周期时间的选择也是非常重要的一点。一方面，我们不希望用户等待太久，这会降低整个交互体验，让用户在交互过程中感到索然无味。另一方面，我们不希望所有的交互行为在操作过程中立即发生，这样会显得突兀。在这个例子中，放大和缩小的整个动画周期还是有点长。当然，在开发阶段，适当的扩展有利于调试。但是在实际的制作环境中，UI动画是越简单越好。所以在动画的开发中，需要通过调试不断达到理想的状态。其实用一些动画曲线工具，可以让动画体验更加舒适自然。在这里，你可以参考一个谷歌动画曲线指南。

使用曲线是动画开发中必不可少的一部分，可以使动画体验更加舒适自然。在实际开发中，针对不同类型的动画选择不同的动画曲线也是做动画时必须注意的一点。曲线的选择也受制于特定的动画场景，如形状之间的动画、抛物线运动等。总之，有必要复合一个物理运动定律。CSS3中常用的运动曲线有缓和、缓和、缓和。例如，缓和意味着慢出动画，这使得动画在开始时比线性动画更快，在结束时变慢。缓和缓和动画，开始慢，结束快，与缓和动画正好相反。一般来说，UI界面动画中，安逸动画比较适合。因此，在此复选框的动画示例中，适合使用慢速动画。

接下来是钩子的动画。像钩子这样的形状通常在SVG中通过路径来实现。具体路径的详细介绍可以在本文中找到。在实际开发中，一般采用AI或Inkscape等矢量设计工具进行设计，然后导出SVG格式。具体到这个钩子，实现起来也很简单，三个锚点就可以实现一个钩子的形状。最后将linecap的属性值设置为2.5px，实现钩子两端的圆角效果。

在这里，在整个设计过程中遵守某些设计原则是很重要的。例如，一致性是这种效果中的一个重要设计原则。如果在静态图形中使用圆角，最好在动画中保留圆角。当然，你也可以用方形角。总之，请在整个过程中保持UI的一致性。

导出代码如下：

path class=' check ' d=' M9 16 l55 9-9 ' fill=' none ' stroke=' # fff ' stroke-width=' 2.5 ' stroke-line cap=' round '和circle是集成的，效果如下：

现在看起来还不错，只是最后一步是做一个画图动画效果。关于使用SVG实现笔画动画，我已经讲了很多。在animation.js中，实现一个笔画动画也很简单。提供了anime.setDashoffset计算路径长度的方法，可以实现一个绘图动画效果。代码如下：

检查时间线。添加({ 0.}) /*前面的步骤*/。添加({ targets: '。check '，strokedashoffset : { value :[anime . setdashoffset，0]，Duration : 700，Delay : 200，easy : ' Ease Out Quarter ' }仍然是老套路，所以先选择要动画化的元素。后者是设置路径的dashoffset值，初始值为整个路径的长度，整个路径在画布外不可见；通过动画。setdashoffset方法，将其值设置为0，并将其显示在画布中，就可以达到绘制动画的效果。

最后，设置钩子的变换来移动它的位置，使它在圆的中心。

好了，一个有动画效果的复选框完成了！可以发现，使用animation.js开发动画效果非常简单。

摘要

以上是anime.js介绍的带有描摹动画效果的复选框(推荐)，希望对大家有帮助。