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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 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
php 函数使用方法与函数定义方法
2010/05/09 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
js验证表单第二部分
2006/11/25 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
python threading模块操作多线程介绍
2015/04/08 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python异常处理知识点总结
2019/02/18 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
幼儿园大班家长评语
2014/04/17 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
完整版商业计划书
2014/09/15 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python