The previous article introduced a simple combination effect (combine effect ).ArticleDescribes related APIs.
Since each effect class inherits from effect. base, the default options and basic methods mentioned last time are defined in the effect. base class. These basic methods are:
- Beforesetup: This method is called when an animation object is created. If the OBJ parameter of the current effect object is accepted, all methods will accept this parameter. it must be noted that to cancel the current effect, it must be performed in the boforesetup phase.
- Aftersetup: Call an object after it is created. It is strange that this method will be executed even if the current effect is canceled in the beforesetup stage. This may be a poor framework, and examples will be provided later.
- Beforeupdate: Because the update () method is called for each frame, the beforeupdate () method is called before each frame is executed.
- Afterupdate: This method is called after each frame is executed.
- Beforefinish: Call this method before the animation ends.
- Afterfinish: Call this method after the animation ends.
The event execution sequence is obviously: beforesetup-> aftersetup-> beforeupdate-> afterupdate [-> boforeupdate-> afterupdate-> ......]-> boforefinish-> afterfinish.
All methods contain an OBJ parameter. The common attributes and methods of this OBJ Parameter
- Currentframe attribute: current number of frames
- Options: options of the current Animation
- State: Current Status: idle-> running-> finished
- Effects: returns an array of core objects. Each effect has the element attribute and can return DOM elements.
- Cancel (): cancels the current Animation
Cancel current Animation VaR Oanimation = New Effect. Puff ('imgpuffwithcancel ',
{
Beforesetup: beforeanimationsetupwithcancel, /**/ /*Execution sequence of six events*/
Aftersetup: afteranimationsetup,
Beforeupdate: beforeanimationupdate,
Afterupdate: afteranimationupdate,
Beforefinish: beforeanimation,
Afterfinish: afteranimation,
From: 0.2 ,
To: 1
}
);
$ ( " MSG " ). Innerhtml = "" ;
_ Alert ( " Effect. appear object has been created, current state: " + Oanimation. State );}
Function Beforeanimationsetupwithcancel (OBJ)
{
_ Alert ("Effect. appear object will be installed (Setup). Now is the best time to cancel, the current status:"+OBJ. State );
OBJ. Cancel ();
_ Alert ("Animation canceled!");
}
Function Afteranimationsetup (OBJ)
{
/**//*This event is executed even if the animation is canceled in beforeanimationsetup, but cancel does not work during aftersetup.*/
_ Alert ("Effect. appear object has been installed (Setup), even if the animation aftersetup event is canceled, it will be executed, the current status:"+OBJ. State );
}
Function Afteranimation (OBJ)
{
_ Alert ( " Animation has been finished! Current state: " + OBJ. State );
OBJ = OBJ. effects [ 0 ]; /**/ /*Note that puff registers two effects, so you need to use them to obtain the animation source.*/
_ Alert ( " Currentframe: " + OBJ. currentframe + " \ Nfinishedon (MS ): " + OBJ. finishon + " \ Nelement: " + OBJ. element. tagname + " # " + OBJ. element. ID + " \ Nduration (s ): " + OBJ. Options. Duration + " \ Nfrom: " + OBJ. Options. From + " \ Nto: " + OBJ. Options. );
}
the running effect of the above example is here. All the examples in this series are stored in this directory and are constantly updated. if you need Source Code , email me: yanghengfeng@163.com.
the example aims to illustrate the problem. Obviously, afteranimation won't be executed. I have to say a few more words. For a specific effect class, it may be a unique interface, for more information, see Code
.
