HTML and CSS Reference
In-Depth Information
p.animationFrame = anim.frames.length - 1;
entity.trigger('animEnd');
entity.trigger('animEnd.' + p.animation);
p.animation = null;
p.animationPriority = -1;
if(anim.trigger) {
entity.trigger(anim.trigger,anim.triggerData)
}
if(anim.next) { this.play(anim.next,anim.nextPriority); }
return;
} else {
entity.trigger('animLoop');
entity.trigger('animLoop.' + p.animation);
p.animationFrame = p.animationFrame % anim.frames.length;
}
}
entity.trigger("animFrame");
}
p.sheet = anim.sheet || p.sheet;
p.frame = anim.frames[p.animationFrame];
}
},
play: function(name,priority) {
var entity = this.entity,
p = entity.p;
priority = priority || 0;
if(name != p.animation && priority >= p.animationPriority) {
p.animation = name;
p.animationChanged = true;
p.animationTime = 0;
p.animationFrame = 0;
p.animationPriority = priority;
entity.trigger('anim');
entity.trigger('anim.' + p.animation);
}
}
});
};
As you can see, the meat of the component is the
step
method, which is responsible for updating the
frame
if enough time has passed and then triggering events. But before getting to that, it's time to walk through the
code a piece at a time.
The first three declarations are the connective tissue that enables you to set and retrieve animations. Anim-
ations are stored in a nested hash in the property
Q._animations
. Calling
Q.animations
with a name
