让每一名学员高薪就业
返回列表 发新帖

一个高性能js动画库velocity.js简介

[复制链接]

128

主题

430

帖子

2735

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2735

版主论坛荣誉内测

发表于 2018-6-11 17:02:46  | 显示全部楼层 | 阅读模式

、为什么是velocity不是jquery

时下,如何快速制作js动效,许多人可能会首先想到使用jqueryjquery的就是如此流行。使用jquery制作的各种动效在网络上也非常丰富。jquery的优点不言而喻,简单易用,高效开发。但要知道jquery动画性能并不是最优的。因为jquery想要实现的目标太多,动画性能上就不可避免做出妥协。因此要制作高性能js动画,可能不得不放弃jquery转而使用原生js制作动画。那有没有一种js高性能动效库,既jquery一样简单易用,动画又高性能?这就是velocity.js动画库了。

二、velocity的优点

1、Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作,并和$.animate()有相同的 API,但它不依赖 jQuery,可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
2.也有几十种类似animate.css的预定义动画api
3.支持自定义动效,拼装队列动效等等
4.动画回调 比如 Begin & Complete & Progress 回调函数

三、velocity的使用

1、velocity的引入
可以使用script标签引入
<script src="../lib/velocity.min.js"></script>
也可以通过npm安装
npm install velocity-animate

2、Velocity语
Velocity使用和jquery相同的语法。换句话说,如果你熟悉jqueryanimate()函数,那么你只需把animate()语法套用在velocity()就行。

Jquery
$(选择器).animate();
Velocity
$(选择器).velocity();

Velocity参数用法
$element.velocity({
width: "500px", // 动画属性 宽度到 "500px" 的动画
property2: value2 // 属性示例
}, {
/* Velocity 动画配置项的默认值 */
duration: 400, // 动画执行时间
easing: "swing", // 缓动效果
queue: "", // 队列
begin: undefined, // 动画开始时的回调函数
progress: undefined, // 动画执行中的回调函数(该函数会随着动画执行被不断触发)
complete: undefined, // 动画结束时的回调函数
display: undefined, // 动画结束时设置元素的 css display 属性
visibility: undefined, // 动画结束时设置元素的 css visibility 属性
loop: false, // 循环
delay: false, // 延迟
mobileHA: true // 移动端硬件加速(默认开启)
});

简单点就是:
$element.velocity(
{css参数列表},
{动画配置项}
)
其他写法:
$element.velocity({css参数列表 }, dalay延迟,easing缓动效果, function回调函数);
示例:
$element.velocity({ width: "50px" }, 1000);
$element.velocity({ width: "50px" }, 1000, "swing");
$element.velocity({ width: "50px" }, "swing");
$element.velocity({ width: "50px" }, 1000, function() {});
这里特别讲解一个非常有趣的用法,就是动画效果原路返回。如果我们做了一个比较炫酷或者比较复杂的动画效果,然后需要制作动画原路返回的效果,只需如此:
$element.velocity("reverse")
Velocity作者做出的说明是,velocity会自动记录下动画执行的路径、时间以及效果等,然后会按动画原效果返回。也就是说,不管你动画效果设计得再复杂,如果要动画原路返回,只需一句代码,是不是很酷?


   感谢源码时代教学讲师提供此文章!
   本文为原创文章,转载请注明出处!
“尔康,你现在幸福吗?”“紫薇,你忘了?我一直就姓福啊。”
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表