Package | com.greensock.plugins |
Class | public class ThrowPropsPlugin |
Inheritance | ThrowPropsPlugin TweenPlugin Object |
ThrowPropsPlugin
allows you to smoothly glide any property to a stop, honoring
an initial velocity as well as applying optional restrictions on the end value. You can define
a specific end value or allow it to be chosen automatically based on the initial velocity and ease
or you can define a max/min range or even an array of snap-to values that act as notches.
ThrowPropsPlugin
even integrates VelocityTracker
so that you can
have it "watch" certain properties to keep track of their velocities for you and then use
them automatically when you do a throwProps
tween. This is perfect
for flick-scrolling or animating things as though they are being thrown (where momentum
factors into the tween).
For example, let's say a user clicks and drags a ball and and then when released, the ball
should continue flying at the same velocity as it was just moving (so that it appears seamless),
and then glide to a rest. You can't do a normal tween because you don't know exactly where it should
land or how long the tween should last (faster initial velocity would usually mean a longer duration).
You'd like it to decelerate based on whatever ease you define in your tween (always use
some sort of easeOut, like Power1.easeOut, Strong.easeOut
, etc.).
Maybe you want the final resting value to always land within a particular range so that the ball doesn't fly off the edge of the screen. But you don't want it to suddenly jerk to a stop when it hits the edge of the screen either; instead, you want it to ease gently into place even if that means going past the landing spot briefly and easing back (if the initial velocity is fast enough to require that). The whole point is to make it look smooth.
No problem.
In its simplest form, you can pass just the initial velocity for each property like this:
TweenLite.to(mc, 2, {throwProps:{x:500, y:-300}});
In the above example, mc.x
will animate at 500 pixels per second initially and
mc.y
will animate at -300 pixels per second. Both will decelerate smoothly
until they come to rest 2 seconds later (because the tween's duration is 2 seconds).
To use the Strong.easeOut
easing equation and impose maximum and minimum boundaries on
the end values, use the object syntax with the max
and min
special
properties like this:
TweenLite.to(mc, 2, {throwProps:{x:{velocity:500, max:1024, min:0}, y:{velocity:-300, max:720, min:0}}, ease:Strong.easeOut});
Notice the nesting of the objects ({}). The max
and min
values refer
to the range for the final resting position (coordinates in this case), not the velocity.
So mc.x
would always land between 0 and 1024 in this case, and mc.y
would always land between 0 and 720. If you want the target object to land on a specific value
rather than within a range, simply set max
and min
to identical values
or just use the "end"
property.
Also notice that you must define a velocity
value for each property
(unless you're using
track()
- see below for details).
Valid properties for object syntax
"auto"
- the initial velocity, measured in units per second (or per
frame for frames-based tweens). You may omit velocity or just use "auto" for
properties that are being tracked automatically using the
track()
method.x
to land at a value below 0, your throwProps may look like {x:{velocity:-500, min:0}}
x
to exceed 1024, your throwProps may look like {x:{velocity:500, max:1024}}
end
is defined as a Number, the
target will land EXACTLY there (just as if you set both the max
and min
to identical values).
If end
is defined as a numeric Array, those values will be treated like "notches" or
"snap-to" values so that the closest one to the natural landing spot will be selected. For example,
if [0,100,200]
is used, and the value would have naturally landed at 141, it will use the
closest number (100 in this case) and land there instead. If end
is defined as a
Function, that function will be called and passed the natural landing value
as the only parameter, and your function can run whatever logic you want, and then return the
number at which it should land. This can be useful if, for example, you have a rotational tween
and you want it to snap to 10-degree increments no matter how big or small, you could use
a function that just rounds the natural value to the closest 10-degree increment.
So any of these are valid: end:100
or end:[0,100,200,300]
or end:function(n:Number):Number { return Math.round(n / 10) * 10; }
ThrowPropsPlugin isn't just for tweening x and y coordinates. It works with any numeric property,
so you could use it for spinning the rotation
of an object as well. Or the
scaleX
/scaleY
properties. Maybe the user drags to spin a wheel and
lets go and you want it to continue increasing the rotation
at that velocity,
decelerating smoothly until it stops. It even works with method-based getters/setters.
Automatically determine duration
One of the trickiest parts of creating a throwProps
tween that looks fluid and natural
(particularly if you're applying maximum and/or minimum values) is determining its duration.
Typically it's best to have a relatively consistent level of resistance so that if the
initial velocity is very fast, it takes longer for the object to come to rest compared to
when the initial velocity is slower. You also may want to impose some restrictions on how long
a tween can last (if the user drags incredibly fast, you might not want the tween to last 200
seconds). The duration will also affect how far past a max/min boundary the property may
go, so you might want to only allow a certain amount of overshoot tolerance. That's why ThrowPropsPlugin
has a few static helper methods that make managing all these variables much easier. The one you'll
probably use most often is the
to()
method which is very similar
to TweenLite.to()
except that it doesn't have a duration
parameter and
it adds several other optional parameters. Read the docs below for details.
ThrowPropsPlugin.to(mc, {throwProps:{x:"auto", y:{velocity:"auto", max:1000, min:0}}, ease:Strong.easeOut});
Feel free to experiment with using different easing equations to control how the values ease into
place at the end. You don't need to put the "ease" special property inside the
throwProps
object. Just keep it in the same place it has always been, like:
TweenLite.to(mc, 1, {throwProps:{x:500, y:-300}, ease:Strong.easeOut});
Automatically track velocity
Another tricky aspect of smoothly transitioning from a particular velocity is tracking
the property's velocity in the first place! So we've made that easier too - you can use the
ThrowPropsPlugin.track()
method to have the
velocity (rate of change) of certain properties tracked and then throwProps
tweens
will automatically grab the appropriate tracked value internally, allowing you to omit the
velocity
values in your tweens altogether. See the
track()
method's description for details. And make sure you start tracking velocity at least a half-second
before you need to tween because it takes a small amount of time to guage how fast something is going.
A unique convenience of ThrowPropsPlugin compared to most other solutions out there that use
frame-based loops is that everything is reverseable and you can jump to any spot
in the tween immediately. So if you create several throwProps
tweens, for example, and
dump them into a TimelineLite, you could simply call reverse()
on the timeline
to watch the objects retrace their steps right back to the beginning!
The following example creates a Sprite (mc
), populates it with a long TextField
and makes it vertically draggable. Then it tracks its velocity and allows it to be thrown
within the bounds defined by the bounds
rectangle, smoothly easing into place
regardless of where and how fast it is thrown:
import com.greensock.*; import flash.events.MouseEvent; import com.greensock.plugins.*; import com.greensock.easing.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); var bounds:Rectangle = new Rectangle(30, 30, 250, 230); var mc:Sprite = new Sprite(); addChild(mc); setupTextField(mc, bounds, 20); //track the "y" property's velocity automatically: ThrowPropsPlugin.track(mc, "y"); mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); mc.startDrag(false, new Rectangle(bounds.x, -99999, 0, 99999999)); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseUpHandler(event:MouseEvent):void { mc.stopDrag(); mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); var yOverlap:Number = Math.max(0, mc.height - bounds.height); ThrowPropsPlugin.to(mc, {ease:Strong.easeOut, throwProps:{y:{max:bounds.top, min:bounds.top - yOverlap, resistance:200}}}, 10, 0.25, 1); } function setupTextField(container:Sprite, bounds:Rectangle, padding:Number=20):void { var tf:TextField = new TextField(); tf.width = bounds.width - padding; tf.x = tf.y = padding / 2; tf.defaultTextFormat = new TextFormat("_sans", 12); tf.text = "Click and drag this content and then let go as you're dragging to throw it. Notice how it smoothly glides into place, respecting the initial velocity and the maximum/minimum coordinates.\n\nThrowPropsPlugin allows you to simply define an initial velocity for a property (or multiple properties) as well as optional maximum and/or minimum end values and then it will calculate the appropriate landing position and plot a smooth course based on the easing equation you define (Quad.easeOut by default, as set in TweenLite). This is perfect for flick-scrolling or animating things as though they are being thrown.\n\nFor example, let's say a user clicks and drags a ball and you track its velocity using an ENTER_FRAME handler and then when the user releases the mouse button, you'd determine the velocity but you can't do a normal tween because you don't know exactly where it should land or how long the tween should last (faster initial velocity would mean a longer duration). You need the tween to pick up exactly where the user left off so that it appears to smoothly continue moving at the same velocity they were dragging and then decelerate based on whatever ease you define in your tween.\n\nAs demonstrated here, maybe the final resting value needs to lie within a particular range so that the content doesn't land outside a particular area. But you don't want it to suddenly jerk to a stop when it hits the edge; instead, you want it to ease gently into place even if that means going past the landing spot briefly and curving back (if the initial velocity is fast enough to require that). The whole point is to make it look smooth."; tf.multiline = tf.wordWrap = true; tf.selectable = false; tf.autoSize = TextFieldAutoSize.LEFT; container.addChild(tf); container.graphics.beginFill(0xFFFFFF, 1); container.graphics.drawRect(0, 0, tf.width + padding, tf.textHeight + padding); container.graphics.endFill(); container.x = bounds.x; container.y = bounds.y; var crop:Shape = new Shape(); crop.graphics.beginFill(0xFF0000, 1); crop.graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height); crop.graphics.endFill(); container.parent.addChild(crop); container.mask = crop; }
ThrowPropsPlugin is a Club GreenSock membership benefit. You must have a valid membership to use this class without violating the terms of use. Visit http://www.greensock.com/club/ to sign up or get more details.
Copyright 2008-2013, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for Club GreenSock members, the software agreement that was issued with the membership.
Property | Defined By | ||
---|---|---|---|
defaultResistance : Number = 100 [static]
The default resistance that is used to calculate how long it will take
for the tweening property (or properties) to come to rest by the static ThrowPropsPlugin.to()
and ThrowPropsPlugin.calculateTweenDuration() methods. | ThrowPropsPlugin |
Method | Defined By | ||
---|---|---|---|
activate(plugins:Array):Boolean [static]
Activates one or more plugins so that TweenLite and TweenMax recognize the associated special properties. | TweenPlugin | ||
calculateChange(velocity:Number, ease:*, duration:Number, checkpoint:Number = 0.05):Number [static]
Determines the amount of change given a particular velocity, an easing equation,
and the duration that the tween will last. | ThrowPropsPlugin | ||
calculateDuration(start:Number, end:Number, velocity:Number, ease:*, checkpoint:Number = 0.05):Number [static]
Calculates the duration (in seconds) that it would take to move from a particular start value
to an end value at the given initial velocity, decelerating according to a certain easing
equation (like Strong.easeOut). | ThrowPropsPlugin | ||
calculateTweenDuration(target:Object, vars:Object, maxDuration:Number = 10, minDuration:Number = 0.2, overshootTolerance:Number = 1):Number [static]
Analyzes various throwProps variables (like initial velocities, max/min values,
and resistance) and determines the appropriate duration. | ThrowPropsPlugin | ||
getVelocity(target:Object, prop:String):Number [static]
Returns the current velocity of the given property and target object (only works
if you started tracking the property using the ThrowPropsPlugin.track()
or VelocityTracker.track() method). | ThrowPropsPlugin | ||
isTracking(target:Object, prop:String = null):Boolean [static]
Allows you to discern whether the velocity of a particular target or one of its properties is being tracked
(typically initiated using the track() method). | ThrowPropsPlugin | ||
to(target:Object, vars:Object, maxDuration:Number = 100, minDuration:Number = 0.25, overshootTolerance:Number = 1):TweenLite [static]
Automatically analyzes various throwProps variables (like velocity, max, min,
and resistance) and creates a TweenLite instance with the appropriate duration. | ThrowPropsPlugin | ||
track(target:Object, props:String, types:String):VelocityTracker [static]
Allows you to have the velocity of particular properties automatically tracked for you
so that ThrowPropsPlugin tweens can access that data internally instead of manually calculating it
and feeding it into each tween. | ThrowPropsPlugin | ||
untrack(target:Object, props:String = null):void [static]
Stops tracking the velocity of certain properties (or all properties of an object), like ones initiated with
the track() method. | ThrowPropsPlugin |
defaultResistance | property |
public static var defaultResistance:Number = 100
The default resistance
that is used to calculate how long it will take
for the tweening property (or properties) to come to rest by the static ThrowPropsPlugin.to()
and ThrowPropsPlugin.calculateTweenDuration()
methods. Keep in mind that you can define
a resistance
value either for each individual property in the throwProps
tween
like this:
ThrowPropsPlugin.to(mc, {throwProps:{x:{velocity:500, resistance:150}, y:{velocity:-300, resistance:50}}});
OR you can define a single resistance
value that will be used for all of the
properties in that particular throwProps
tween like this:
ThrowPropsPlugin.to(mc, {throwProps:{x:500, y:-300, resistance:150}}); //-OR- ThrowPropsPlugin.to(mc, {throwProps:{x:{velocity:500, max:800, min:0}, y:{velocity:-300, max:800, min:100}, resistance:150}});
calculateChange | () | method |
public static function calculateChange(velocity:Number, ease:*, duration:Number, checkpoint:Number = 0.05):Number
Determines the amount of change given a particular velocity, an easing equation,
and the duration that the tween will last. This is useful for plotting the resting position
of an object that starts out at a certain velocity and decelerates based on an ease (like
Strong.easeOut
).
Parameters
velocity:Number — The initial velocity
| |
ease:* — The easing equation (like Strong.easeOut or Power2.easeOut ).
| |
duration:Number — The duration (in seconds) of the tween
| |
checkpoint:Number (default = 0.05 ) — A value between 0 and 1 (typically 0.05) that is used to measure an easing equation's initial strength. The goal is for the value to have moved at the initial velocity through that point in the ease. So 0.05 represents 5%. If the initial velocity is 500, for example, and the ease is Strong.easeOut and checkpoint is 0.05, it will measure 5% into that ease and plot the position that would represent where the value would be if it was moving 500 units per second for the first 5% of the tween. If you notice that your tween appears to start off too fast or too slow, try adjusting the checkpoint higher or lower slightly. Typically 0.05 works great.
|
Number — The amount of change (can be positive or negative based on the velocity)
|
calculateDuration | () | method |
public static function calculateDuration(start:Number, end:Number, velocity:Number, ease:*, checkpoint:Number = 0.05):Number
Calculates the duration (in seconds) that it would take to move from a particular start value
to an end value at the given initial velocity, decelerating according to a certain easing
equation (like Strong.easeOut
).
Parameters
start:Number — Starting value
| |
end:Number — Ending value
| |
velocity:Number — the initial velocity at which the starting value is changing
| |
ease:* — The easing equation used for deceleration (like Strong.easeOut or Power2.easeOut ).
| |
checkpoint:Number (default = 0.05 ) — A value between 0 and 1 (typically 0.05) that is used to measure an easing equation's initial strength. The goal is for the value to have moved at the initial velocity through that point in the ease. So 0.05 represents 5%. If the initial velocity is 500, for example, and the ease is Strong.easeOut and checkpoint is 0.05, it will measure 5% into that ease and plot the position that would represent where the value would be if it was moving 500 units per second for the first 5% of the tween. If you notice that your tween appears to start off too fast or too slow, try adjusting the checkpoint higher or lower slightly. Typically 0.05 works great.
|
Number — The duration (in seconds) that it would take to move from the start value to the end value at the initial velocity provided, decelerating according to the ease.
|
calculateTweenDuration | () | method |
public static function calculateTweenDuration(target:Object, vars:Object, maxDuration:Number = 10, minDuration:Number = 0.2, overshootTolerance:Number = 1):Number
Analyzes various throwProps variables (like initial velocities, max/min values,
and resistance) and determines the appropriate duration. Typically it is best to
use the ThrowPropsPlugin.to()
method for this, but calculateTweenDuration()
could be convenient if you want to create a TweenMax instance instead of a TweenLite instance
(which is what throwPropsPlugin.to()
returns).
Parameters
target:Object — Target object whose properties the tween affects. This can be ANY object, not just a DisplayObject.
| |
vars:Object — An object containing the end values of the properties you're tweening, and it must also contain a throwProps object. For example, to create a tween that tweens mc.x at an initial velocity of 500 and mc.y at an initial velocity of -300 and applies a resistance of 80 and uses the Strong.easeOut easing equation and calls the method tweenCompleteHandler when it is done, the vars object would look like: {throwProps:{x:500, y:-300, resistance:80}, ease:Strong.easeOut, onComplete:tweenCompleteHandler} .
| |
maxDuration:Number (default = 10 ) — Maximum duration (in seconds)
| |
minDuration:Number (default = 0.2 ) — Minimum duration (in seconds)
| |
overshootTolerance:Number (default = 1 ) — sets a maximum number of seconds that can be added to the tween's duration (if necessary) to
accommodate temporarily overshooting the end value before smoothly returning to it at the end of the tween.
This can happen in situations where the initial velocity would normally cause it to exceed the max
or min values. An example of this would be in the iOS (iPhone or iPad) when you flick-scroll
so quickly that the content would shoot past the end of the scroll area. Instead of jerking to a sudden stop
when it reaches the edge, the content briefly glides past the max/min position and gently eases back into place.
The larger the overshootTolerance the more leeway the tween has to temporarily shoot past the
max/min if necessary.
|
Number — The duration (in seconds) that the tween should use.
|
getVelocity | () | method |
public static function getVelocity(target:Object, prop:String):Number
Returns the current velocity of the given property and target object (only works
if you started tracking the property using the ThrowPropsPlugin.track()
or VelocityTracker.track()
method).
Parameters
target:Object — The object whose property is being tracked.
| |
prop:String — The property name, like "x" .
|
Number — The current velocity
|
See also
isTracking | () | method |
public static function isTracking(target:Object, prop:String = null):Boolean
Allows you to discern whether the velocity of a particular target or one of its properties is being tracked
(typically initiated using the track()
method).
Parameters
target:Object — The target object
| |
prop:String (default = null ) — the name of the property to check, like "x" or "y" .
|
Boolean — true if the target/property is being tracked, false if not.
|
See also
to | () | method |
public static function to(target:Object, vars:Object, maxDuration:Number = 100, minDuration:Number = 0.25, overshootTolerance:Number = 1):TweenLite
Automatically analyzes various throwProps variables (like velocity
, max
, min
,
and resistance
) and creates a TweenLite instance with the appropriate duration. You can use
ThrowPropsPlugin.to()
instead of TweenLite.to()
to create
a tween - they're identical except that ThrowPropsPlugin.to()
doesn't have a
duration
parameter (it figures it out for you) and it adds a few extra parameters
to the end that can optionally be used to affect the duration.
Another key difference is that ThrowPropsPlugin.to()
will recognize the
resistance
special property which basically controls how quickly each
property's velocity decelerates (and consequently influences the duration of the tween).
For example, if the initial velocity
is 500 and the resistance
is 300, it will decelerate much faster than if the resistance was 20. You can define
a resistance
value either for each individual property in the throwProps
tween like this:
ThrowPropsPlugin.to(mc, {throwProps:{x:{velocity:500, resistance:150}, y:{velocity:-300, resistance:50}}});
OR you can define a single resistance
value that will be used for all of the
properties in that particular throwProps
tween like this:
ThrowPropsPlugin.to(mc, {throwProps:{x:500, y:-300, resistance:150}}); //-OR- ThrowPropsPlugin.to(mc, {throwProps:{x:{velocity:500, max:800, min:0}, y:{velocity:-300, max:700, min:100}, resistance:150}});
resistance
should always be a positive value, although velocity
can be negative.
resistance
always works against velocity
. If no resistance
value is
found, the ThrowPropsPlugin.defaultResistance
value will be used. The resistance
values merely affect the duration of the tween and can be overriden by the maxDuration
and
minDuration
parameters. Think of the resistance
as more of a suggestion that
ThrowPropsPlugin uses in its calculations rather than an absolute set-in-stone value. When there are multiple
properties in one throwProps tween (like x
and y
) and the calculated duration
for each one is different, the longer duration is always preferred in order to make things animate more
smoothly.
You also may want to impose some restrictions on the tween's duration (if the user drags incredibly
fast, for example, you might not want the tween to last 200 seconds). Use maxDuration
and
minDuration
parameters for that. You can use the overshootTolerance
parameter to set a maximum number of seconds that can be added to the tween's duration (if necessary) to
accommodate temporarily overshooting the end value before smoothly returning to it at the end of the tween.
This can happen in situations where the initial velocity would normally cause it to exceed the max
or min
values. An example of this would be in the iOS (iPhone or iPad) when you flick-scroll
so quickly that the content would shoot past the end of the scroll area. Instead of jerking to a sudden stop
when it reaches the edge, the content briefly glides past the max/min position and gently eases back into place.
The larger the overshootTolerance
the more leeway the tween has to temporarily shoot past the
max/min if necessary.
If you'd like to have ThrowPropsPlugin automatically track the velocity of certain properties for you
and auto-populate them internally so that you don't have to pass velocity
values in,
use the track()
method.
Valid properties for object syntax
"auto"
- the initial velocity, measured in units per second (or per
frame for frames-based tweens). You may omit velocity or just use "auto" for
properties that are being tracked automatically using the track()
method.x
to land at a value below 0, your throwProps may look like {x:{velocity:-500, min:0}}
x
to exceed 1024, your throwProps may look like {x:{velocity:500, max:1024}}
end
is defined as a Number, the
target will land EXACTLY there (just as if you set both the max
and min
to identical values).
If end
is defined as a numeric Array, those values will be treated like "notches" or
"snap-to" values so that the closest one to the natural landing spot will be selected. For example,
if [0,100,200]
is used, and the value would have naturally landed at 141, it will use the
closest number (100 in this case) and land there instead. If end
is defined as a
Function, that function will be called and passed the natural landing value
as the only parameter, and your function can run whatever logic you want, and then return the
number at which it should land. This can be useful if, for example, you have a rotational tween
and you want it to snap to 10-degree increments no matter how big or small, you could use
a function that just rounds the natural value to the closest 10-degree increment.
So any of these are valid: end:100
or end:[0,100,200,300]
or end:function(n:Number):Number { return Math.round(n / 10) * 10; }
resistance
value is found, the ThrowPropsPlugin.defaultResistance
value will be used. The resistance
values merely affect the duration of the tween
and can be overriden by the maxDuration
and minDuration
parameters.Parameters
target:Object — Target object whose properties the tween affects. This can be ANY object, not just a DisplayObject.
| |
vars:Object — An object containing the end values of the properties you're tweening, and it must also contain a throwProps object. For example, to create a tween that tweens mc.x at an initial velocity of 500 and mc.y at an initial velocity of -300 and applies a resistance of 80 and uses the Strong.easeOut easing equation and calls the method tweenCompleteHandler when it is done, the vars object would look like: {throwProps:{x:500, y:-300, resistance:80}, ease:Strong.easeOut, onComplete:tweenCompleteHandler} .
| |
maxDuration:Number (default = 100 ) — Maximum duration of the tween
| |
minDuration:Number (default = 0.25 ) — Minimum duration of the tween
| |
overshootTolerance:Number (default = 1 ) — sets a maximum number of seconds that can be added to the tween's duration (if necessary) to
accommodate temporarily overshooting the end value before smoothly returning to it at the end of the tween.
This can happen in situations where the initial velocity would normally cause it to exceed the max
or min values. An example of this would be in the iOS (iPhone or iPad) when you flick-scroll
so quickly that the content would shoot past the end of the scroll area. Instead of jerking to a sudden stop
when it reaches the edge, the content briefly glides past the max/min position and gently eases back into place.
The larger the overshootTolerance the more leeway the tween has to temporarily shoot past the
max/min if necessary.
|
TweenLite — TweenLite instance
|
See also
track | () | method |
public static function track(target:Object, props:String, types:String):VelocityTracker
Allows you to have the velocity of particular properties automatically tracked for you
so that ThrowPropsPlugin tweens can access that data internally instead of manually calculating it
and feeding it into each tween. For example, let's say there's an object that the
user interacts with by dragging it or maybe it is being tweened and then at some point you want
to create a throwProps
tween that smoothly continues that motion and glides to
a rest. Normally, you'd need to write your own tracking code that records that object's x
and y
properties and the time stamps so that when it comes time to feed the
velocity
into the throwProps
tween, you'd have the necessary data to
calculate it. But let's face it: that can be cumbersome to do manually, and that's precisely why
the track()
method exists.
Just feed in the target
and a comma-delimited list of its properties that you want
tracked like this:
ThrowPropsPlugin.track(obj, "x,y");
Then every time the core tweening engine updates (at whatever frame rate you're running),
the x
and y
values (or whichever properties you define) will be recorded
along with time stamps (it keeps a maximum of 2 of these values and continually writes over the previous
ones, so don't worry about memory buildup). This even works with function-based properties like
getters and setters.
Then, after at least 100ms and 2 "ticks" of the core engine have elapsed (so that some data has been recorded),
you can create throwProps
tweens for those properties and omit the "velocity"
values and it will automatically populate them for you internally. For example:
//first, start tracking "x" and "y": ThrowPropsPlugin.track(obj, "x,y"); //then, after at least 100ms, let's smoothly tween to EXACTLY x:200, y:300 TweenLite.to(obj, 2, {throwProps:{x:{end:200}, y:{end:300}}, ease:Strong.easeOut}); //and if you want things to use the defaults and have obj.x and obj.y glide to a stop based on the velocity rather than setting any destination values, just use "auto": TweenLite.to(obj, 2, {throwProps:{x:"auto", y:"auto"}, ease:Strong.easeOut});
Notice that "auto"
is a valid option when you're tracking the properties too, but
only for tracked properties.
What kinds of properties can be tracked?
Pretty much any numeric property of any object can be tracked, including function-based ones.
For example, obj.x
or obj.rotation
or even obj.myCustomProp()
.
In fact, for getters and setters that start with the
word "get" or "set" (like getCustomProp()
and setCustomProp()
), it will
automatically find the matching counterpart method and use the getter appropriately, so you can track
the getter or setter and it'll work. You cannot, however, track custom plugin-related
values like "directionalRotation" or "autoAlpha" or "physics2D" because those aren't real properties
of the object. You should instead track the real properties that those plugins affect, like "rotation" or
"alpha" or "x" or "y".
IMPORTANT: you should untrack()
properties when you no longer
need them tracked in order to maximize performance and ensure things are released for garbage collection.
To untrack, simply use the untrack()
method:
//stop tracking all properties of obj: ThrowPropsPlugin.untrack(obj); //stop tracking only the "x" property: ThrowPropsPlugin.untrack(obj, "x"); //stop tracking "x" and "y": ThrowPropsPlugin.untrack(obj, "x,y");
Parameters
target:Object — the target object whose properties will be tracked
| |
props:String — a comma-delimited list of property names, like "y" or "x,y"
| |
types:String — a comma-delimited list of property types (only helpful if they are rotation-based), "rad" for radian-based rotation or "deg" for degree-based rotation - this is only useful you'd like to have VelocityTracker compensate for artificial jumps in rotational values when the rotational midline is crossed, like when rotation goes from 179 to -178 degrees it would interpret that as a change of 3 instead of 357 degrees. Leave this blank unless you want the rotational compensation. You can use "num" to indicate normal numeric behavior (or leave it blank).
|
VelocityTracker — a VelocityTracker object that's responsible for doing the tracking. You can use this if you want - the most useful method is its getVelocity() method that you feed the property name to like myTracker.getVelocity("y") to get the target's y velocity anytime. Normally, however, you don't need to keep track of this VelocityTracker object at all because the work is done internally and ThrowPropsPlugin knows how to find it.
|
See also
untrack | () | method |
public static function untrack(target:Object, props:String = null):void
Stops tracking the velocity of certain properties (or all properties of an object), like ones initiated with
the track()
method.
//starts tracking "x" and "y": ThrowPropsPlugin.track(obj, "x,y"); //stops tracking only the "x" property: ThrowPropsPlugin.untrack(obj, "x"); //stops tracking "x" and "y": ThrowPropsPlugin.untrack(obj, "x,y"); //stops tracking all properties of obj: ThrowPropsPlugin.untrack(obj);
Parameters
target:Object — the target object whose properties should stop being tracked
| |
props:String (default = null ) — a comma-delimited list of properties to stop tracking. If null , ALL properties of the target will stop being tracked.
|
See also