编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

轻量级JS动画库——Velocity.js(js 动画引擎)

wxchong 2024-07-26 22:51:41 开源技术 25 ℃ 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 等。

官网:http://velocityjs.org/

中文网站:http://www.mrfront.com/docs/velocity.js/index.html

Velocity.js 可以在不引入 jQuery 的情况下单独使用。如果你需要大部分动画效果能兼容 IE8, 就必须引入 jQuery。

它也可以和Zepto一起使用, 写法和 jQuery 一样:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<img src="img/mouse.gif" />
<div>111</div>
<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
<script src="js/velocity.min.js"></script>
<script type="text/javascript">
/*
Velocity(document.getElementsByTagName("img")[0], {
opacity: 0.5,
scale: 2,
}, {
duration: 1000
});
*/
Velocity(document.getElementsByTagName("div")[0], {
//颜色只能通过16进制进行表示
"color": "#fff",
"width": "400px",
"background-color": "#666"
}, {
duration: 500,
begin: function(){
console.log("动画开始之前")
},
progress: function(){
console.log("loading···")
},
complete: function(){
console.log("end")
},
//display: "none",
loop: true
});
//$("div").velocity({width: 500}).velocity({height: 600})
</script>
</body>
</html>

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表