基于css3 animation和transition的动画类库，可以方便的使用js来调用。
不过因为所有实现均基于css3，所以不能像tweenmax那样使用到其他对象，只能作用于dom对象的css属性（可以查阅animation和transition可使用的css属性）。
API
CT.get(target, param);
CT.set(target, params);
CT.fromTo(target, duration, fromParams, toParams);
CT.from(target, duration, fromParams);
CT.to(target, duration, toParams);
CT.kill(target);
CT.killAll();
param为字符串，
Params为数组，
以下是所有配置属性:
type设置为'a'使用animation,不设置则使用transition(transiton动画的创建效率高于animation,但没有animation那样丰富的功能和回调)
ease设置缓动，
delay设置延时时间，
onEnd设置运动完成的返回函数，
onEndParams设置返回函数的参数，
只有当type:'a'时以下属性才能起作用
repeat设置重复次数，
yoyo设置重复时反向，
onStart设置运动开始的返回函数，
onStartParams设置开始返回函数的参数，
onRepeat设置运动循环中每个运动完成的返回函数，
onRepeatParams设置运动完成返回函数的参数，
缓动类
CT.Linear
CT.Quad
CT.Quart
CT.Back
除了CT.Linear只有None一项，其他均有In,InOut,Out三项选择。
以上方法和参数均是参考TweenMax的方式，有使用经验了会很容易上手。
<!DOCTYPE HTML>
<html>
<head>
<script src="../csstween.js"></script>
<style>
body{
background: #000;
font-size: 14px;
}
.b1{
width: 100%;
height: 100%;
}
.box{
width: 100px;
height: 100px;
}
#box1{
background: #f00;
margin-left: 100px;
}
#box2{
background: #0f0;
margin-left: 200px;
}
#box3{
background: #00f;
}
</style>
</head>
<body>
<div class="b1">
<div id="box1" class="box">
</div>
<div id="box2" class="box">
</div>
<div id="box3" class="box">
</div>
</div>
<script>
setTimeout(function(){console.log('start');
CT.to('.b1 #box2', 1, {marginTop:300, opacity:1, ease:CT.Quad.InOut, onEnd:function(){
console.log("complete1");
CT.from('.b1 #box2', 1, {marginTop:100, opacity:0.5, ease:CT.Quad.Out, onEnd:function(){
console.log("complete2");
CT.fromTo('.b1 #box2', 2, {marginLeft:500, opacity:0.5}, {marginLeft:400, opacity:1, ease:CT.Quad.Out, onEnd:function(n){
console.log("complete3", this, n);
}, onEndParams:[50]});
}});
}});
}, 500);
CT.fromTo('.b1 #box1', 1, {
marginLeft:300,
transform:'rotate(80deg)',
opacity:0
}, {
type:'a',
marginLeft:200,
transform:'rotate(300deg)',
opacity:0.5,
repeat:5,
yoyo:true,
delay:1,
ease:CT.Quart.Out,
onStart:function(){
console.log("start");
},
onIteration:function(){
console.log("iteration");
},
onEnd:function(){
console.log("complete");
}
});
</script>
</body>
</html>
网友评论