HTML and CSS Reference
In-Depth Information
// existing gameView code goes here
Objective complete - mini debriefing
The green circle displays and hides for just a short moment. It would be too troublesome
to have dedicated logic that keeps track of them. We will use TweenJS to help us here.
TweenJS is similar to the transiion in CSS that animates between keyframes, but TweenJS
is for a canvas object. We deine the target and it animates the properies for us by
interpolaing the steps in between. It makes it easy to select an EaselJS display object,
change its property over ime, and execute the logic ater the animaion is completed.
The following code is an example that selects the circle, sets the x posiion to 0 , and uses
a second to animate it to 300 px x posiion in the bounceIn easing funcion. The to method
takes three arguments. They are the properies object, duraion, and easing funcion,
shown as follows:
createjs.Tween.get(circle).to({x:0}, 0).to({x:300}, 1000, Ease.
The properies object can be any property changes that are made for the selected display
object. The duraion is how long it takes to transform from the current state to the target
properies. When the duraion is 0, it changes to the target properies immediately. The
easing funcion is opional and is used to deine how the animaion spreads within the
duraion. By default, the easing funcion is linear.
In our code based on the green circle, we first show the circle, wait for a while, fade out
the circle, and then make the circle remove itself once the animaion is over:
createjs.Tween.get(circle).wait(500).to({alpha:0}, 1000).
Classified intel
In EaselJS, we can add a stage as one of the Ticker-listener events directly. The default
tick funcion inside stage will invoke the stage.update method for us, as shown in the
following code:
createjs.Ticker.addEventListener("tick", stage);
In some cases where we don't have the custom game-loop logic, we can make use of
this technique.
Search WWH ::

Custom Search