KISSY动画API
Anim (elem, props[, duration, easing, completeFn])
- elem (String|HTMLElement|KISSY.Node|window) – 作用动画的元素节点或窗口（窗口时仅支持 scrollTop/Left）.
elem必须是一个selector或者HTML元素、KISSY.Node window
常见的动画本质上随时间变化，动态的去改变一个DOM元素的属性或样式，但是，有时候期望改变的不是dom的属性或样式。比如：
一道题目
在canvas上画一个圆，想实现其半径逐渐增大的一个动画。怎么实现？
jQuery的实现方式
var ctx = document.getElementById('Canvas').getContext('2d')
function circle(cx,cy,r,opt){
ctx.beginPath();
for(var x in opt){
ctx[x] = opt[x];
}
ctx.arc(cx,cy,r,0,2*Math.PI,true);
ctx.fill();
ctx.closePath();
};
circle(200,200,5,{
fillStyle:"#999"
});
$({r:5}).animate({r:50},{
duration:5000,
step:function(r){
circle(200,200,r,{
fillStyle:"#999"
});
}
});
jQuery的方式非常自然。完整的demo见 http://jsbin.com/uBOtUKa
KISSY的变通实现方式
var ctx = document.getElementById('Canvas').getContext('2d')
function circle(cx,cy,r,opt){
ctx.beginPath();
for(var x in opt){
ctx[x] = opt[x];
}
ctx.arc(cx,cy,r,0,2*Math.PI,true);
ctx.fill();
ctx.closePath();
};
circle(200,200,5,{
fillStyle:"#999"
});
KISSY.use("anim",function(S,Anim){
//必须制指定一个DOM节点作为地一个参数
var anim = new Anim(window.document.body,{
zoom2:1 //这里必须指定一个属性，否则frame不会执行
},{
easing:"swing",
duration:5,
frame:function(fx){
var r = 5+fx.pos*(50-5);
circle(200,200,r);
}
});
anim.run();
完整的demo见 http://jsbin.com/IPUviQU
KISSY Anim 第一个参数必须是Node节点，第二个参数还必须传一个不存在的css属性，否则动画会改变元素的css样式 ，并且每一帧还要用户手动计算渐变过程的插值：
frame:function(fx){
var r = 5+fx.pos*(50-5);
circle(200,200,r);
}
KISSY更加理想的实现方式（目前还不支持）
但是做简单修改即可，see https://github.com/kissyteam/kissy/pull/459
var o = {r:1};
var anim = new Anim(o,{
r:100
},{
easing:"swing",
duration:.5,
frame:function(anim,fx){
var propname = fx.prop;// r
var val = fx.val;// r value
circle(100,100,val);
}
});
anim.run();
YUI3的方式——求怎么实现？
var ctx = document.getElementById('Canvas').getContext('2d')
function circle(cx,cy,r,opt){
ctx.beginPath();
for(var x in opt){
ctx[x] = opt[x];
}
ctx.arc(cx,cy,r,0,2*Math.PI,true);
ctx.fill();
ctx.closePath();
};
circle(200,200,5,{
fillStyle:"#999"
});
YUI().use("anim",function(Y){
var anim = new Y.Anim({
node:window,
from:{
},
to:{
},
duration:1
});
anim.on("tween",function(e){//这里怎么办？？？
console.log(e);
//console.log(this.get("from"));
});
anim.run();
谁来补充下 YUI3的实现 ？ http://jsbin.com/iHUxoXi
110 Dec 22, 2022
28 Jan 18, 2022
13 Dec 1, 2022
4 Jun 10, 2022
26.6k Jan 2, 2023
22.7k Jan 9, 2023
21 Oct 14, 2022
18 Sep 20, 2022
3 Feb 17, 2022
11 Mar 16, 2022
6 Jun 7, 2022
13 Dec 1, 2022
12 May 20, 2022
5 Oct 19, 2022
4 Apr 11, 2022
7 May 5, 2022
40 Dec 22, 2022
7 Feb 21, 2022
155 Dec 29, 2022