anime.js 实现带有描边动画效果的复选框(推荐)
anime.js
anime.js是一个灵活的轻型JavaScript动画库。
它与CSS,个别变换,SVG,DOM属性和JS对象。
特征
- 具体的动画参数
- 具体目标值
- 多个定时值
- 播放控制
- 运动路径
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用。正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验。并且在现在的网页开发中,动画已经成为了一个设计的标准,变得越来越重要。特别是在一些和用户交互的地方,使用动画能更好的?用户以反馈,提升用户的操作体验。
在网页开发中,有很多种技术来实现动画。在这篇文章中,我们使用anime.js这个轻量强大的javascript动画库来编写动画效果。使用它可以非常方便创建和管理动画。如果你还不是很熟悉这个库的使用方法,可以去看看以前写一篇入门文章。这篇文章主要是使用它来实现下面这个效果:
这个动画效果非常简单,主要是有一个圆圈和一个白色的勾组成。使用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的绿色的圆:
先来实现一个简单的动画效果,把圆圈从无到有放大到完整的尺寸。要实现这个效果我们需要做两件事情: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毫秒,还定义了动画的运动曲线。
在动画制作中,动画执行的周期时间的选择也是一个非常需要关注的点。一方面,我们都不希望用户等待的太久,这样会降低整个的交互体验,使用户在交互的过程中感到迟钝。另一方面,我们也不希望用户在操作的过程中,一切的交互行为马上发生,这样也会显的突兀。在这个实例中,整个放大缩小的动画周期还是有一点点长,当然在开发阶段,适当的延长点有利于调试。但是在实际生产环境中,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的一致性。
导出来代码如下:
<path class="check" d="M9 16l5 5 9-9" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round">
和圆整合一下,效果如下:
现在看起来还不错,只剩下最后一步就是这个勾要做一个绘制的动画效果。使用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 实现带有描边动画效果的复选框(推荐),希望对大家有所帮助。
- 学习HTML5之塔克大战(详细记录)
- 学习HTML5之新特性标签一览(详细)
- poj----(1251)Jungle Roads(最小生成树)
- poj-------(2240)Arbitrage(最短路)
- MySQL在线DDL修改表结构的简单经验分享
- HDUOJ-----(1162)Eddy's picture(最小生成树)
- hduoj----1142A Walk Through the Forest(记忆化搜索+最短路)
- java设计之简单的JAVA计算器
- Java之线程———GUI线程(包含打字游戏和计时器俩个GUI实列)
- la----3695 City Game(最大子矩阵)
- poj------(3468)A Simple Problem with Integers(区间更新)
- hdu-------(1698)Just a Hook(线段树区间更新)
- NBitcoin:密码学第2部分
- gh-ost:在线DDL修改MySQL表结构工具
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 「PostgreSQL技巧」Citus实时执行程序如何并行化查询
- Nginx技术总结之四——集群和负载均衡的算法与实现
- SQL 找出 100 以内的质数
- SQL 获取最长的日期序列
- Lucene基本知识入门
- LeetCode 35. 搜索插入位置
- 【面试系列】反射+动态代理,你为何老是搞不懂?
- 我不知道还可以用 JS 做的 6 件事
- 【服务网格架构】Envoy架构概览(7):断路,全局限速和TLS
- 你的消息队列如何保证消息不丢失,且只被消费一次,这篇就教会你
- 【服务网格架构】Envoy架构概览(9):访问日志,MongoDB,DynamoDB,Redis
- Redis Cluster 原理分析
- Ceph介绍及原理架构分享
- 分布式存储Ceph之PG状态详解
- JS中的事件循环机制与宏队列、微队列笔记