KISSY Anim 小巧玲珑,实现思路借鉴自 Emile, 但比 Emile 更健壮,更易用。赶快来看看吧。
Constructor
new Anim ( elem, props, duration, easing, callback )
- Parameters:
-
elem
<HTMLElement|String>
动画元素,元素或选择器。 -
props
<String|Object>
动画属性,字符串或普通对象。 -
duration
<Number>
动画时长。 -
easing
<String|Function>
平滑函数。 -
callback
<Function>
回调函数。
范例:
KISSY.ready(function(S) {
// 让 #test 元素的宽度在 5s 内从当前值变化到 100px
var anim = new S.Anim('#test', 'width: 100px', 5, 'bounceOut');
// props 可以是 map 对象
// easing 可以是字符串,也可以是 S.Easing 函数
// new 可以省略
var anim2 = S.Anim(
'#test2',
{ background: '#000', color: '#fff' },
5,
S.Easing.bounceOut);
});
props 支持的 CSS 属性有:
backgroundColor borderBottomColor borderBottomWidth borderBottomStyle
borderLeftColor borderLeftWidth borderLeftStyle
borderRightColor borderRightWidth borderRightStyle borderSpacing
borderTopColor borderTopWidth borderTopStyle bottom color
font fontFamily fontSize fontWeight height left letterSpacing lineHeight
marginBottom marginLeft marginRight marginTop maxHeight
maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth
paddingBottom paddingLeft
paddingRight paddingTop right textIndent top width wordSpacing zIndex
虽然数量有限,但在实际应用中你根本不必担心想要设置的属性是否被支持,你大可“随心所欲”。
easing 内置了 16 种,详见 anim-easing.js
Methods
Anim 还有两个方法:run 和 stop. 顾名思义,run 用来运行动画,stop 用来停止动画。
run
Anim run ()
运行实例化的 Anim 对象,如:
KISSY.ready(function(S) {
var anim = S.Anim('#test', 'width: 100px', 5, 'backIn');
anim.run();
});
stop
Anim stop (finish)
停止运行中的 Anim 对象。它有一个 finish 参数,为 falsy 值时,动画会在当前帧直接停止;为 true 值时,动画停止时会立刻跳到最后一帧。
KISSY.ready(function(S) {
var anim = S.Anim('#test', 'opacity: 0.6', 3, 'backIn').run();
// ...
anim.stop();
});
看起来是否很简单呢,看了例子你会觉得更简单:test.html