ActionScript® 3.0 Reference for the Adobe® Flash® Platform
Home  |  Show Packages and Classes List |  Packages  |  Classes  |  What's New  |  Index  |  Appendixes
spark.effects.easing 

Linear  - AS3 Flex

Packagespark.effects.easing
Classpublic class Linear
InheritanceLinear Inheritance Object
Implements IEaser

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The Linear class defines an easing with three phases: acceleration, uniform motion, and deceleration. As the animation starts it accelerates through the period specified by the easeInFraction property, it then uses uniform (linear) motion through the next phase, and finally decelerates until the end during the period specified by the easeOutFraction property.

The easing values for the three phases are calculated such that the behavior of constant acceleration, linear motion, and constant deceleration all occur within the specified duration of the animation.

Strict linear motion can be achieved by setting easeInFraction and easeOutFraction to 0.0. Note that if acceleration or deceleration are not 0.0, then the motion during the middle phase is not at the same speed as that of pure linear motion. The middle phase consists of uniform motion, but the speed of that motion is determined by the size of that phase relative to the overall animation.

MXML SyntaxexpandedHide MXML Syntax

The <s:Linear> tag inherits all of the tag attributes of its of its superclass, and adds the following tag attributes:

  <s:Linear
    id="ID"
    easeInFraction="0" 
    easeOutFraction="0"
   />
  

View the examples

More examples



Public Properties
 PropertyDefined By
 Inheritedconstructor : Object
A reference to the class object or constructor function for a given object instance.
Object
  easeInFraction : Number
The fraction an animation spent accelerating, between 0.0 and 1.0.
Linear
  easeOutFraction : Number
The percentage an animation will spend decelerating, between 0.0 and 1.0.
Linear
Public Methods
 MethodDefined By
  
Linear(easeInFraction:Number = 0, easeOutFraction:Number = 0)
Constructor.
Linear
  
ease(fraction:Number):Number
Calculates the eased fraction value based on the easeInFraction and easeOutFraction properties.
Linear
 Inherited
Indicates whether an object has a specified property defined.
Object
 Inherited
Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.
Object
 Inherited
Indicates whether the specified property exists and is enumerable.
Object
 Inherited
Sets the availability of a dynamic property for loop operations.
Object
 Inherited
Returns the string representation of this object, formatted according to locale-specific conventions.
Object
 Inherited
Returns the string representation of the specified object.
Object
 Inherited
Returns the primitive value of the specified object.
Object
Property Detail

easeInFraction

property
easeInFraction:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The fraction an animation spent accelerating, between 0.0 and 1.0. The values of the easeOutFraction property and easeInFraction property must satisfy the equation easeOutFraction + easeInFraction <= 1 where any remaining time is spent in the linear motion phase.

The default value is 0.



Implementation
    public function get easeInFraction():Number
    public function set easeInFraction(value:Number):void

easeOutFraction

property 
easeOutFraction:Number

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

The percentage an animation will spend decelerating, between 0.0 and 1.0. The values of the easeOutFraction property and easeInFraction property must satisfy the equation easeOutFraction + easeInFraction <= 1 where any remaining time is spent in the linear motion phase.

The default value is 0.



Implementation
    public function get easeOutFraction():Number
    public function set easeOutFraction(value:Number):void
Constructor Detail

Linear

()Constructor
public function Linear(easeInFraction:Number = 0, easeOutFraction:Number = 0)

Language Version: ActionScript 3.0
Product Version: Flex 4
Runtime Versions: Flash Player 10, AIR 1.5

Constructor.

Parameters
easeInFraction:Number (default = 0) — The fraction of the overall duration in the acceleration phase, between 0.0 and 1.0.
 
easeOutFraction:Number (default = 0) — The fraction of the overall duration in the deceleration phase, between 0.0 and 1.0.
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

Calculates the eased fraction value based on the easeInFraction and easeOutFraction properties. If fraction is less than easeInFraction, it calculates a value based on accelerating up to the linear motion phase. If fraction is greater than easeInFraction and less than (1-easeOutFraction), it calculates a value based on the linear motion phase between the easing in and easing out phases. Otherwise, it calculates a value based on constant deceleration between the linear motion phase and 0.0.

Parameters

fraction:Number — The elapsed fraction of the animation, between 0.0 and 1.0..

Returns
Number — The eased fraction of the animation.
LinearEffectExample.mxml
<?xml version="1.0"?>
<!-- Simple example to demonstrate the s:Linear class. -->
<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:Linear id="linearEasing"
            easeInFraction="0.3"/>
        <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="{linearEasing}"/>
    </fx:Declarations>

    <s:Panel id="examplePanel"
        title="Linear 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>