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

home › anim › anim :