spark.effects.easing

# Elastic - AS3 Flex

Package | spark.effects.easing
Class | public class Elastic
Inheritance | Elastic Object
Implements | IEaser

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

The Elastic class implements easing functionality where the target object movement is defined by an exponentially decaying sine wave. The effect target decelerates toward the end value, and continues past the end value. It then oscillates around the end value in smaller and smaller increments, before reaching the end value.

View the examples

More examples

Using Spark easing classes

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined By
--- | --- | ---
|  | constructor : Object A reference to the class object or constructor function for a given object instance. | Object

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined By
--- | --- | ---
|  | Elastic() Constructor. | Elastic
|  | ease(fraction:Number):Number Takes the fraction representing the elapsed duration of an animation (a value between 0.0 to 1.0) and returns a new elapsed value. | Elastic
|  | hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined. | Object
|  | isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter. | Object
|  | propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable. | Object
|  | setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations. | Object
|  | toLocaleString():String Returns the string representation of this object, formatted according to locale-specific conventions. | Object
|  | toString():String Returns the string representation of the specified object. | Object
|  | valueOf():Object Returns the primitive value of the specified object. | Object

Constructor Detail

### Elastic

()
Constructor

`public function Elastic()`

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

Constructor.

Method Detail

### ease

()
method

`public function ease(fraction:Number):Number`

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

Takes the fraction representing the elapsed duration of an animation (a value between 0.0 to 1.0) and returns a new elapsed value. This value is used to calculate animated property values. By changing the value of the elapsed fraction, you effectively change the animation of the property.

Parameters

| `fraction:Number` — The elapsed fraction of an animation, from 0.0 to 1.0.

Returns

| `Number` — The eased value for the elapsed time. Typically, this value should be constrained to lie between 0.0 and 1.0, although it is possible to return values outside of this range. Note that the results of returning such values are undefined, and depend on what kind of effects are using this eased value. For example, an object moving in a linear fashion can have positions calculated outside of its start and end point without a problem, but other value types (such as color) may not result in desired effects if they use time values that cause them to surpass their endpoint values.

Examples How to use this example
BounceElasticEffectExample.mxml
Copy

    <?xml version="1.0"?>
    <!-- Simple example to demonstrate the s:Bounce and s:Elastic classes. -->
    <s:Application
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">

        <fx:Declarations>
            <s:Bounce id="bounceEasing"/>
            <s:Elastic id="elasticEasing"/>
            <s:Move id="moveRight"
                target="{myImage}"
                xBy="500"
                duration="2000"
                easer="{elasticEasing}"/>
            <s:Move id="moveLeft"
                target="{myImage}"
                xBy="-500"
                duration="2000"
                easer="{bounceEasing}"/>
        </fx:Declarations>

        <s:Panel id="examplePanel"
            title="Bounce and Elastic Effect Example"
            width="75%" height="75%">

            <!-- Directions -->
            <s:VGroup id="detailsBox" width="50%" top="5" left="5">
                <s:Label width="99%" color="blue"
                    text="Click the buttons to watch the effect."/>
            </s:VGroup>

            <mx:Image id="myImage" top="20"
                source="@Embed(source='assets/logo.jpg')"/>

            <s:Button label="Move Right"
                 bottom="10" left="5"
                click="moveRight.end();moveRight.play();"/>

            <s:Button label="Move Left"
                bottom="10" left="100"
                click="moveLeft.end();moveLeft.play();"/>
        </s:Panel>
    </s:Application>

© 2015 Adobe Systems Incorporated. All rights reserved.
Mon Apr 10 2017, 12:28 PM -07:00