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


Posted in Javascript onDecember 24, 2017

anime.js

anime.js是一个灵活的轻型JavaScript动画库。

它与CSS,个别变换,SVG,DOM属性和JS对象。

特征

  •  具体的动画参数
  •  具体目标值
  •  多个定时值
  •  播放控制
  •  运动路径

在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用。正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验。并且在现在的网页开发中,动画已经成为了一个设计的标准,变得越来越重要。特别是在一些和用户交互的地方,使用动画能更好的?用户以反馈,提升用户的操作体验。

在网页开发中,有很多种技术来实现动画。在这篇文章中,我们使用anime.js这个轻量强大的javascript动画库来编写动画效果。使用它可以非常方便创建和管理动画。如果你还不是很熟悉这个库的使用方法,可以去看看以前写一篇入门文章。这篇文章主要是使用它来实现下面这个效果:

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

这个动画效果非常简单,主要是有一个圆圈和一个白色的勾组成。使用CSS中的border-radius可以非常方便的创建这个圆。使用它可能比使用SVG来创建圆还要简单些并且代码量也少点,不过在这个效果中,由于那个白色的勾要用到SVG来实现,所以圆圈也使用SVG来实现。而且SVG现在变得越来越流行了,而且SVG是矢量可以随意放大缩小。下面就是这个圆圈的SVG代码:

<svg class="checkmark"
  xmlns="http://www.w3.org/2000/svg"
  width="32"
  height="32"
  viewBox="0 0 32 32">
 <circle class="circle"
   cx="16"
   cy="16"
   r="16"
   fill="#0c3"/>
</svg>

上面的代码简洁明了,主要是绘制了一个半径为16px的绿色的圆:

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

先来实现一个简单的动画效果,把圆圈从无到有放大到完整的尺寸。要实现这个效果我们需要做两件事情:1、给圆圈一个类名;2、实例化一个anime.js的timeline,使用它来可以把多个动画效果组合在一起。当然你也不用timeline来创建动画效果,可以直接使用构造函数创建动画效果。不过使用timeline的好处是,可以更加方便的管理动画,比如各个效果之间的衔接和延迟等,我们可以更精细的控制动画效果。这里的缩放效果,直接是缩放这个SVG来实现的,代码如下所示:

var checkTimeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: true });
checkTimeline
 .add({
 targets: '.checkmark',
 scale: [
  { value: [0, 1], duration: 600, easing: 'easeOutQuad' }
 ]
 })

简单解释下这段代码,首先定义了anime的一个实例,并且通过autoplay、direction和loop定义了动画是自动播放并且是一直循环交替来执行动画。通过targets参数来制定要执行动画的元素即checkmark,从0到1进行缩放,动画时间是600毫秒,还定义了动画的运动曲线。

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

在动画制作中,动画执行的周期时间的选择也是一个非常需要关注的点。一方面,我们都不希望用户等待的太久,这样会降低整个的交互体验,使用户在交互的过程中感到迟钝。另一方面,我们也不希望用户在操作的过程中,一切的交互行为马上发生,这样也会显的突兀。在这个实例中,整个放大缩小的动画周期还是有一点点长,当然在开发阶段,适当的延长点有利于调试。但是在实际生产环境中,UI动画还是越简单越好。所以在动画开发中,就是要不断地通过调试来达到理想的状态。实际上配合一些动画曲线工具,可以使动画的体验更加的舒服自然,这里可以参考下Google的一个动画曲线的指南。

使用曲线在动画开发中是一个必不可少的一部分,它可以使动画的体验更加舒服自然。在实际开发中,为不同类型的动画选择不同的动画曲线也是做动画时,必须要注意的一点。曲线选择也受制于具体动画的场景,比如形状与形状之间的动画,抛物线运动等等,总而言之就是要复合物理运动的一个规律。在CSS3中经常使用的运动曲线是ease-in、ease-out和ease-in-out这三个,比如ease-out表示缓出动画,缓出使动画在开头处比线性动画更快,还会在结尾处减速。ease-out缓入动画,缓入动画开头慢结尾快,与缓出动画正好相反。一般在UI界面动画中,适合使用缓出动画即ease-out。所以,在这个复选框的动画实例中,适合使用缓出动画。

接下来是勾的动画。像勾这类的形状通常由SVG中的路径(path)来实现。具体路径的详细介绍,可以去这篇文章看看。在实际开发中,一般都是使用诸如AI或者是Inkscape等矢量设计工具来设计,然后导出SVG格式。具体到这个勾,实现起来也非常简单,三个锚点就可以实现一个勾的形状。最后设置linecap的属性的值为2.5px来实现勾的两端的圆角效果。

这里要注意的一点的是:要在整个设计过程中,遵守一定的设计原则。比如在这个效果中,一致性就是一个重要的设计原则。如果在静态的图形中,使用了圆角,那么在动画中最好也要保持这个圆角。当然你也可以使用方的角。总之,在整个过程中,请保持UI的一致性。

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

导出来代码如下:

<path class="check"
  d="M9 16l5 5 9-9"
  fill="none"
  stroke="#fff"
  stroke-width="2.5"
  stroke-linecap="round">

和圆整合一下,效果如下:

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

现在看起来还不错,只剩下最后一步就是这个勾要做一个绘制的动画效果。使用SVG实现描边动画效果讲了很多了。在anime.js中,实现一个描边绘制动画也非常简单,它提供了anime.setDashoffset这个方法来计算路径(path)的长度,使用它就可以实现一个绘制的动画效果。代码如下:

checkTimeline
 .add({ ... }) /* Previous steps */
 .add({
 targets: '.check',
 strokeDashoffset: {
  value: [anime.setDashoffset, 0],
  duration: 700,
  delay: 200,
  easing: 'easeOutQuart'
 }

还是老套路,先选择要做动画的元素。后面是来设置路径(path)的dashoffset的值,初始的值整个路径(path)的长度,整个路径是在画布外的不可见;通过anime.setDashoffset方法,把它的值设置为0,出现在画布中,就可以实现绘制动画效果。

最后还通过设置勾的transform来移动它的位置,使它居于圆圈的中心位置。

OK,一个带有动画效果的复选框就完成了!可以发现使用anime.js来开发动画效果还是很简单的。

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

总结

以上所述是小编给大家介绍的anime.js 实现带有描边动画效果的复选框(推荐),希望对大家有所帮助。

Javascript 相关文章推荐
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
vue项目常用组件和框架结构介绍
Dec 24 #Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 #Javascript
JS生成随机打乱数组的方法示例
Dec 23 #Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 #Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 #Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 #Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 #Javascript
You might like
openPNE常用方法分享
2011/11/29 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
详细分析JavaScript函数定义
2015/07/16 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
vue弹窗组件使用方法
2018/04/28 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
简单了解python中的与或非运算
2019/09/18 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
flask项目集成swagger的方法
2020/12/09 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
审核会计岗位职责
2013/11/08 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
英文投诉信格式
2015/07/03 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL