MovieClip - bobby169/createjsDoc GitHub Wiki

MovieClip

movieclip类将TweenJS Timeline与EaselJS Container关联起来。它允许您创建封装时间线动画、状态更改和同步操作的objects。The MovieClip class has been included in the EaselJS minified file since 0.7.0.

目前,movieclip只有在tick based(而不是基于time based)的情况下才能正常工作,尽管已经做出了一些让步来支持未来基于时间的时间表。

初始化部份源码

function MovieClip(props) {
  this.Container_constructor();
  !MovieClip.inited&&MovieClip.init(); // static init

  var mode, startPosition, loop, labels;

  // handle old params (mode, startPosition, loop, labels):
  // TODO: deprecated param handling:
  if (props instanceof String || arguments.length > 1) {
    mode = props;
    startPosition = arguments[1];
    loop = arguments[2];
    labels = arguments[3];
    if (loop == null) { loop = -1; }
    props = null;
  } else if (props) {
    mode = props.mode;
    startPosition = props.startPosition;
    loop = props.loop;
    labels = props.labels;
  }
  if (!props) { props = {labels:labels}; }
  this.mode = mode||MovieClip.INDEPENDENT;
  this.startPosition = startPosition||0;
  this.loop = loop === true ? -1 : (loop || 0);
  this.paused = props.paused||false;
  props.useTicks = props.paused = true;
  this.timeline = new createjs.Timeline(props);

示例代码

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", stage);

var mc = new createjs.MovieClip({loop:-1, labels:{myLabel:20}});
stage.addChild(mc);

var child1 = new createjs.Shape(
  new createjs.Graphics().beginFill("#999999")
  .drawCircle(30,30,30));
var child2 = new createjs.Shape(
  new createjs.Graphics().beginFill("#5a9cfb")
  .drawCircle(30,30,30));

mc.timeline.addTween(
  createjs.Tween.get(child1)
  .to({x:0}).to({x:60}, 50).to({x:0}, 50));
mc.timeline.addTween(
  createjs.Tween.get(child2)
  .to({x:60}).to({x:0}, 50).to({x:60}, 50));

mc.gotoAndPlay("start");

It is recommended to use tween.to() to animate and set properties (use no duration to have it set immediately), and the tween.wait() method to create delays between animations. Note that using the tween.set() method to affect properties 可能无法提供所需的结果.

MovieClip.INDEPENDENT = "independent"; 默认方式

movieclip将独立于其父级前进,即使父级已暂停。

MovieClip.SINGLE_FRAME = "single";

movieclip将只显示一个帧(由startposition属性确定)。

MovieClip.SYNCHED = "synched";

movieclip只有在其父级前进时才会前进,并且将与父级movieclip的位置同步。

startPosition

指定要在此movieclip中播放的第一帧,或在mode=MovieClip.SINGLE_FRAME为单帧时显示的唯一帧。

frameBounds:Array

An array of bounds for each frame in the MovieClip. 这主要是用工具输出的。

advance(time)

推进播放头前进,每次tick的时候自动进行