这篇文章将为大家详细讲解有关anime.js如何实现带有描边动画效果的复选框,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>动漫。js
动漫。js是一个灵活的轻型JavaScript动画库。
它与CSS,个别变换,SVG DOM属性和js对象。
<强>特征
,具体的动画参数
<李>,具体目标值
<李>,多个定时值
<李>,播放控制
<李>,运动路径
在网页或者是应用的开发中,动画运用得当可以起到锦上添花的作用。正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验。并且在现在的网页开发中,动画已经成为了一个设计的标准,变得越来越重要。特别是在一些和用户交互的地方,使用动画能更好的給用户以反馈,提升用户的操作体验。
在网页开发中,有很多种技术来实现动画。在这篇文章中,我们使用动漫。js这个轻量强大的javascript动画库来编写动画效果。使用它可以非常方便创建和管理动画。如果你还不是很熟悉这个库的使用方法,可以去看看以前写一篇入门文章。这篇文章主要是使用它来实现下面这个效果:
这个动画效果非常简单,主要是有一个圆圈和一个白色的勾组成。使用CSS中的圆角边框可以非常方便的创建这个圆。使用它可能比使用SVG来创建圆还要简单些并且代码量也少点,不过在这个效果中,由于那个白色的勾要用到SVG来实现,所以圆圈也使用SVG来实现。而且SVG现在变得越来越流行了,而且SVG是矢量可以随意放大缩小。下面就是这个圆圈的SVG代码:
上面的代码简洁明了,主要是绘制了一个半径为16 px的绿色的圆:
先来实现一个简单的动画效果,把圆圈从无到有放大到完整的尺寸。要实现这个效果我们需要做两件事情:1,给圆圈一个类名;2,实例化一个动画。js的时间表,使用它来可以把多个动画效果组合在一起。当然你也不用时间表来创建动画效果,可以直接使用构造函数创建动画效果。不过使用时间轴的好处是,可以更加方便的管理动画,比如各个效果之间的衔接和延迟等,我们可以更精细的控制动画效果。这里的缩放效果,直接是缩放这个SVG来实现的,代码如下所示:
简单解释下这段代码,首先定义了动漫的一个实例,并且通过播放,方向和循环定义了动画是自动播放并且是一直循环交替来执行动画。通过目标参数来制定要执行动画的元素即标记,从0到1进行缩放,动画时间是600毫秒,还定义了动画的运动曲线。
在动画制作中,动画执行的周期时间的选择也是一个非常需要关注的点。一方面,我们都不希望用户等待的太久,这样会降低整个的交互体验,使用户在交互的过程中感到迟钝。另一方面,我们也不希望用户在操作的过程中,一切的交互行为马上发生,这样也会显的突兀。在这个实例中,整个放大缩小的动画周期还是有一点点长,当然在开发阶段,适当的延长点有利于调试。但是在实际生产环境中,UI动画还是越简单越好,所以在动画开发中,就是要不断地通过调试来达到理想的状态。实际上配合一些动画曲线工具,可以使动画的体验更加的舒服自然,这里可以参考下谷歌的一个动画曲线的指南。
使用曲线在动画开发中是一个必不可少的一部分,它可以使动画的体验更加舒服自然。在实际开发中,为不同类型的动画选择不同的动画曲线也是做动画时,必须要注意的一点。曲线选择也受制于具体动画的场景,比如形状与形状之间的动画,抛物线运动等等,总而言之就是要复合物理运动的一个规律。在CSS3中经常使用的运动曲线是在,打发走和ease-in-out这三个,比如打发走表示缓出动画,缓出使动画在开头处比线性动画更快,还会在结尾处减速.ease-out缓入动画,缓入动画开头慢结尾快,与缓出动画正好相反,一般在UI界面动画中,适合使用缓出动画即打发走,所以,在这个复选框的动画实例中,适合使用缓出动画。
