一個JavaScript圖形庫：Timeliner

Timeliner是一個圖形化的JavaScript庫，可以進行原型開發，快速創建動畫，支持不同的JavaScript/ WebGL框架。

示例

Example

Video

其它相似的項目：

1. Timeline.js by Marcin Ignac
2. Keytime Editor by Matt DesLauriers
3. Frame.js by Ricardo Cabello (Side note: mrdoob's talk on this also showcase interesting editors used by the demoscene)

使用

// target is a "pojo" which gets updated when values change.
var target = {
    name1: 1,
    name2: 2,
    name3: 3
};

// initialize timeliner
var timeliner = new Timeliner(target);
timeliner.addLayer('name1');
timeliner.addLayer('name2');
timeliner.addLayer('name3');

當前特性

• slider time scale (basic)
• fix positioning mouse events
• basic play toggled with pause button
• basic hook playback to target object
• basic playback and pause
• semi-allow layer panel to repaint on data change
• show current easing of layers
• update tween props on insert
• show tween values on cursor movement
• edit tween (basic)
• insert tween (basic)
• drag keyframe
• insert keyframe on value adjust
• adjust value
• remove keyframe
• insert keyframe
• adjust values (basic)

項目主頁：http://www.baiduhome.net/lib/view/home/1417096795268