Velocity.js 简单高效功能丰富的轻量级JS动画库

发布于 2019-05-15 23:12:08 字数 1586 浏览 1428 评论 0

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。

它比 $.animate() 更快更流畅,性能甚至高于 CSS3 animation, 是 jQuery 和 CSS3 transition 的最佳组合,它支持所有现代浏览器,最低可兼容到 IE8 和 Android 2.3。

Velocity 目前已被数以千计的公司使用在自己的项目中,包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等,这里 Libscore.com 统计了哪些站点正使用 velocity.js。

英文官网:http://velocityjs.org/
下载:Velocity.js

使用方法

<div class="element"></div>
<script src="jquery.min.js"></script>
<script src="velocity.min.js"></script>

脚本标准写法

为了简洁,后面的示例代码中 将直接使用 $element 来代替 jQuery 选择器

$(".element").velocity({
  left: "200px"
}, {
  duration: 450,
  delay: 1000
});

$.animate() 的写法,效果同上

$(".element").delay(1000).velocity({left: "200px"}, 450);

不使用 jQuery 时,写法如下

var oBox = document.getElementById('test');
Velocity(oBox,{
  left: "200px"
}, {
  duration: 450,
  delay: 300
});

安装使用

你可以通过 npm 或 bower 安装 Velocity:

npm install velocity-animate
bower install velocity

更多使用方法请参加:https://www.wenjiangs.com/docs/velocity-js

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。