spark.effects.easing

# Linear - AS3 Flex

Package | spark.effects.easing
Class | public class Linear
Inheritance | Linear 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 Syntax Show MXML Syntax
Hide 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

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
|  | 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
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined 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
|  | 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

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.

Examples How to use this example
LinearEffectExample.mxml
Copy

    <?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>

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