This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revision | |||
tutorials:more_about_tweens [2013/03/05 10:19] – external edit 127.0.0.1 | tutorials:more_about_tweens [2013/06/26 11:38] (current) – [Canceling A Tween] daniel | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ===== More about Tweens ===== | ||
+ | What's a Tween, you ask? Let's have a look at Wikipedia: It tells us that [[wp> | ||
+ | |||
+ | That's about right for Sparrow too. Like e.g. in Flash/ | ||
+ | |||
+ | ==== Tweening Object Properties ==== | ||
+ | |||
+ | Let's go with a simple real-world example: Imagine a nice little stage containing a blast door that is going to be shut. | ||
+ | |||
+ | For those of you who need a background story: | ||
+ | |||
+ | //" | ||
+ | |||
+ | Knock yourself out! ;-) | ||
+ | |||
+ | What we are going to do is animate the closing of the blast door: | ||
+ | |||
+ | <code objc> | ||
+ | // Create a door of the blast persuasion. | ||
+ | // The initial y value is -440 which means that the door is wide open. | ||
+ | // (We are going to see 40px of the door.) | ||
+ | |||
+ | BlastDoor *blastDoor = [[BlastDoor alloc] initWithY: | ||
+ | [self addChild: | ||
+ | |||
+ | // Create the corresponding tween and feed him the door object, state the time it | ||
+ | // takes to close and the final value for Y. In our case this is 0, since we want | ||
+ | // the door to shut completely. | ||
+ | |||
+ | SPTween *tween = [SPTween tweenWithTarget: | ||
+ | | ||
+ | |||
+ | //Delay the tween for two seconds, so that we can see the change in scenery. | ||
+ | [tween setDelay: | ||
+ | |||
+ | //Tell the tween that it should transition the Y value to 0. | ||
+ | [tween animateProperty: | ||
+ | |||
+ | //Register the tween at the nearest juggler. (We will come back to jugglers later.) | ||
+ | [self.stage.juggler addObject: | ||
+ | </ | ||
+ | |||
+ | ...aaand that's it! We now have an animated blast door that moves (closes) from Y=-440 to Y=0 in 4.0 seconds. Cool, right? But wait, it gets better! | ||
+ | ==== Transition Types ==== | ||
+ | |||
+ | Sparrow offers a variety of transition types which you can use for your tweens. A transition type defines the way the object properties value will travel from N to M, in our case from -440 to 0. Typically you will start with a linear transition ('' | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | For our blast door example it makes sense to let the door fall down from the ceiling instead of slowly lowering it to the floor. So instead of using '' | ||
+ | |||
+ | <code objc> | ||
+ | //Change the transition type to an ease-out-bounce and | ||
+ | //adjust the tween duration to fit our needs. | ||
+ | SPTween *tween = [SPTween tweenWithTarget: | ||
+ | | ||
+ | |||
+ | //Leave the rest of the code as is. | ||
+ | </ | ||
+ | |||
+ | Alright! The door finally slams into the ground as one would expect it to. It feels way heavier now and heavier means more secure. We achieved that by changing only two variables of our code. | ||
+ | |||
+ | But what if Ruth Lezz needs to get off the station, hacks into the security system and stops the doors from closing? Read on... | ||
+ | |||
+ | ==== Canceling A Tween ==== | ||
+ | |||
+ | Sometimes it may be necessary to cancel a tween while it is already in its tweening phase. There are three ways to achieve that: | ||
+ | |||
+ | - You can keep track of your SPTween object and remove it from its juggler when the time has come. | ||
+ | - You can remove all tweens of a certain object. | ||
+ | - Or you can stop the whole juggler from executing any more tweens. | ||
+ | |||
+ | We are going to use the second option and stop all tweens targeting the door as soon as Ruth Lezz has successfully hacked into the security system: | ||
+ | |||
+ | <code objc> | ||
+ | - (void) closeTheDoor | ||
+ | { | ||
+ | //Create the tween. | ||
+ | SPTween *tween = [SPTween tweenWithTarget: | ||
+ | | ||
+ | [tween animateProperty: | ||
+ | [self.stage.juggler addObject: | ||
+ | } | ||
+ | |||
+ | //This method gets called when Ruth Lezz has hacked the | ||
+ | //security system. | ||
+ | - (void) onSecuritySystemHacked | ||
+ | { | ||
+ | //Remove the tween when the time has come. | ||
+ | [self.stage.juggler removeObjectsWithTarget: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | So what we did is react to the players actions and stop the blast door from closing as soon as the security system got hacked. | ||
+ | |||
+ | In the code above, all animations were carried out by that ominous " | ||
+ | |||
+ | ----- | ||
+ | |||
+ | //Next section: [[More about Jugglers]]// |