一个JavaScript图形库:Timeliner

jopen 10年前

Timeliner是一个图形化的JavaScript库,可以进行原型开发,快速创建动画,支持不同的JavaScript/ WebGL框架。

示例

Example

Video

screenshot.png
其它相似的项目:

  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.open-open.com/lib/view/home/1417096795268