blear.classes.animation

1Introduction

description：单元素动画组合类
author：ydr.me
create：2016-04-20 10:41
update：2016-04-20 10:41
github：https://github.com/blearjs/blear.classes.animation

2Example

var Animation = require('blear.classes.animation');

var an = new Animation(divEl);

// 1、先将元素宽度过渡为 100px
an.transit({
    width: 100
});

// 2、再将元素应用 abc 关键帧动画
an.frame('abc');

// 执行动画
an.start();

3Static

3.1`defaults`

默认参数继承于 blear.core.transform。

4Prototype

4.1`.transit(to, [options]): an`

an.transit(divEl, {
    width: 100,
    transform: {
        translateX: 200,
        rotate: 300
    }
});

4.1.1`to`

类型：Object
说明：样式，参考 blear.core.transform

4.1.2`options`

类型：Object
说明：动画配置
默认：defaults

4.1.3`an`

类型：Animation
说明：支持链式调用

4.2`#frame(name, [options]): an`

an.frame(divEl, 'myKeyFrameName');

4.2.1`name`

类型：String
说明：帧动画名称，参考 blear.core.keyframe

4.2.2`options`

类型：Object
说明：动画配置
默认：defaults

4.2.3`an`

类型：Animation
说明：支持链式调用

4.3`#start([callback]): an`

动画完毕开始，结束后回调

4.3.1`callback`

类型：Function
说明：动画完成后回调

4.3.2`an`

类型：Animation
说明：支持链式调用

4.4`#destroy(): undefined`

销毁实例。

5Events

5.1`start(info)`

动画开始时触发。

5.1.1`info`

类型：Object
说明：信息

5.1.2`info.timeStamp`

类型：Number
说明：时间戳

5.2`stepIn(meta)`

进入某次动画时触发。

5.2.1`meta`

类型：Object
说明：动画元信息

5.2.2`meta.type`

类型：String
说明：动画类型，有：
- transition
- keyframes

5.2.3`meta.index`

类型：Number
说明：动画索引值

5.2.4`meta.to`

类型：Object
说明：动画终点

5.2.5`meta.frameName`

类型：Object
说明：帧动画名词

5.2.6`meta.options`

类型：Object
说明：配置

5.2.7`meta.startTime`

类型：Number
说明：某次动画开始时间

5.3`stepOut(meta)`

某次动画完成后触发。

5.3.1`meta.type`

类型：String
说明：动画类型，有：
- transition
- keyframes

5.3.2`meta.index`

类型：Number
说明：动画索引值

5.3.3`meta.to`

类型：Object
说明：动画终点

5.3.4`meta.frameName`

类型：Object
说明：帧动画名词

5.3.5`meta.options`

类型：Object
说明：配置

5.3.6`meta.startTime`

类型：Number
说明：某次动画开始时间

5.3.7`meta.stopTime`

类型：Number
说明：某次动画结束时间

5.3.8`meta.elapsedTime`

类型：Number
说明：某次动画流逝时间

5.4`stop(info)`

动画结束时触发。

5.4.1`info.timeStamp`

类型：Number
说明：时间戳

5.4.2`info.elaspedTime`

类型：Number
说明：流逝时间