一个JavaScript图形库:Timeliner
jopen
10年前
Timeliner是一个图形化的JavaScript库,可以进行原型开发,快速创建动画,支持不同的JavaScript/ WebGL框架。
示例
其它相似的项目:
- Timeline.js by Marcin Ignac
- Keytime Editor by Matt DesLauriers
- 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)