js动画库-支持transform,颜色,透明,圆角,平移,集成加速度。
站长压缩自己时间打造的集万千宠爱(动画)于一身的动画库,想用在IE7或者8的就别看了,欢迎大家使用!

插件地址:
https://gamedown.vgs.lenovo.com.cn/public/js/animate.min.js
新1.0.3版本,新增 window, dom 的 scrollTop 和 scrollLeft 动画支持
animate.min.1.0.3.js.zip
预览:
http://www.zixuephp.com/codes/js/animate/
实列简介:
A.move(dom对象,{
css属性设置和jquery一致,目前集成了 width,height,top,left,right,bottom,background,color,borderColor,fontSize,opacty,transform
其中:transform 包括( rotate,scale,translate,skew)
},2000,function(item){
回调结束,item包括DOM对象和各个选项,可以打印查看
console.log('触发完成',item);
},A.Easing.Quadratic.In);
A.Easing.Quadratic.In,加速运动,不传就是匀速运动,包括如下选项:
和tween.js一致。
新1.0.3版 scroll
针对DOM
A.move(document.getElementById('scroll'), {scrollTop: 300, scrollLeft: 300}, 1000, function(item){
A.move(item.dom, {scrollTop: 10}, 1000);
});
针对window对象
A.move(window, {scrollTop: 300}, 1000, function(item){
A.move(window, {scrollTop: 10}, 1000);
});教程:一个小方块位移
A.move(document.getElementById("a"),{ left:500},1000,function(){
alert('距离左侧位移500像素,执行时间为1秒');
})
教程:一个小方块宽高变成200
A.move(document.getElementById("a"),{ width:200,height:200},1000,function(){
alert('小方块宽高变成200,执行时间为1秒');
})
教程:一个小方块背景颜色变成红色
A.move(document.getElementById("a"),{ background:"#ff0000"},1000,function(){
alert('小方块背景颜色变成红色,执行时间为1秒');
})
教程:一个小方块软转360度
A.move(document.getElementById("a"),{ transform:"rotate(360edg)"},1000,function(){
alert('小方块软转360度,执行时间为1秒');
})
第四个参数加速度:Easing
逐渐加速公式:
A.Easing.Quadratic.In
目前支持如下加速度
A.Easing.Linear.None
A.Easing.Quadratic.In,Out,InOut
A.Easing.Cubic.In,Out,InOut
A.Easing.Quartic.In,Out,InOut
A.Easing.Quintic.In,Out,InOut
A.Easing.Sinusoidal.In,Out,InOut
A.Easing.Exponential.In,Out,InOut
A.Easing.Circular.In,Out,InOut
A.Easing.Elastic.In,Out,InOut
A.Easing.Back.In,Out,InOut
A.Easing.Bounce.In,Out,InOut
其他细节组合动画自己就写CSS样式即可,记得是驼峰法命名哦,其他子尝试吧,如有问题请联系站长邮箱 904561283@qq.com
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#a{
width: 50px;
height: 50px;
background: #f00;
position: absolute;
left:50px;
top:20px;
}
#b{
width: 50px;
height: 50px;
background: #00d6b2;
position: absolute;
left:0px;
top:80px;
}
#c{
width: 200px;
height: 200px;
background: #00d6b2;
position: absolute;
left:80px;
top:130px;
margin-left: 10px;
}
#f{
width: 120px;
height: 80px;
background: #f00;
position: absolute;
left:80px;
top:360px;
/*border-radius: 30%;*/
transform:rotate(45deg);
/* rotate(45deg) scale(0.5,0.5) rotate(15deg) skew(200deg,200deg) */
}
#e{
width: 100px;
height: 100px;
background: #000000;
position: absolute;
left:300px;
top:330px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c" style="width:200px;height:200px;left:80px;top:130px;"></div>
<div id="f"></div>
<div id="e"></div>
<script src="https://gamedown.vgs.lenovo.com.cn/public/js/animate.min.js"></script>
<script>
var ops = 1;
var type = false;
function autoAnm(dom){
var op = !type?0.5:1;
A.move(dom,{
//opacity:op,
//background:"#00ff00",
//top:"425px",
//width:110.56,
//borderRadius:"100px",
transform:"rotate(360deg)" // rotate(45deg) scale(0.1,0.1) skew(30deg,30deg) rotate(45deg) translate(24px,0px) skew(0.1deg,0.1deg) skew(200deg,200deg) translate(100px,0px) rotate(30deg) scale(2.5,2.5) translate(100px,30px)
},11500,function(item){
//A.move(item.dom,{
// //width:300,
// //height:300,
// //background:"#0000ff",
// //borderRadius:"0px",
// transform:"skew(0deg,0deg)"
//},600,function(item){
//},Easing.Elastic.Out);
},null);
}
autoAnm(document.getElementById("f"),ops);
A.move(document.getElementById("a"),{
left:500,
top:150
},2000,function(){
console.log('触发完成');
},A.Easing.Quadratic.In);
A.move(document.getElementById("b"),{
left:500,
top:180,
width:300,
height:190
},2000,function(item){
console.log('触发完成',item);
A.move(document.getElementById("b"),{
left:100,
top:50
},1200,function(item){
console.log('触发完成',item);
//setTimeout(function(){
console.log(item.dom);
A.move(item.dom,{
left:300,
top:300,
width:100,
height:100
},800,function(item){
console.log('触发完成',item);
}, A.Easing.Quintic.InOut);
//},1000);
},A.Easing.Quintic.Out);
},A.Easing.Cubic.InOut);
A.move(document.getElementById("c"),{
width:100,
height:100,
opacity:0.3,
color:"#ff0"
},2000,function(item){
console.log('触发完成',item);
},A.Easing.Elastic.In);
A.move(document.getElementById("e"),{
top:630
},1300,function(item){
A.move(item.dom,{
top:50,
background:"#ff0000",
opacity:0.3,
width:600,
height:600,
},1600,function(item){
console.log('触发完成',item);
A.move(item.dom,{
width:100,
height:100,
transform:"rotate(45edg)"
},1600,function(item){
});
}, A.Easing.Quintic.InOut);
}, A.Easing.Cubic.Out);
</script>
</body>
</html>
调用方法详解:
A.move(dom对象,{
css属性设置和jquery一致,目前集成了 width,height,top,left,right,bottom,background,opacty,transform
其中:transform 包括( rotate,scale,translate,skew)
},2000,function(item){
回调结束,item包括DOM对象和各个选项,可以打印查看
console.log('触发完成',item);
},A.Easing.Quadratic.In);
A.Easing.Quadratic.In,加速运动,不传就是匀速运动,包括如下选项:
和tween.js一致。
目前支持如下加速度
A.Easing.Linear.None
A.Easing.Quadratic.In,Out,InOut
A.Easing.Cubic.In,Out,InOut
A.Easing.Quartic.In,Out,InOut
A.Easing.Quintic.In,Out,InOut
A.Easing.Sinusoidal.In,Out,InOut
A.Easing.Exponential.In,Out,InOut
A.Easing.Circular.In,Out,InOut
A.Easing.Elastic.In,Out,InOut
A.Easing.Back.In,Out,InOut
A.Easing.Bounce.In,Out,InOut