spark.effects.easing

# Sine - AS3 Flex

Package | spark.effects.easing
Class | public class Sine
Inheritance | Sine EaseInOutBase Object

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

The Sine class defines easing functionality using a Sine function. Easing consists of two phases: the acceleration, or ease in phase, followed by the deceleration, or ease out phase. Use the `easeInFraction` property to specify the percentage of an animation accelerating.

MXML Syntax Show MXML Syntax
Hide MXML Syntax

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

      <s:Sine
        id="ID"
       />

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 percentage of an animation that should be spent accelerating. | EaseInOutBase

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined By
--- | --- | ---
|  | Sine(easeInFraction:Number = 0.5) Constructor. | Sine
|  | 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. | EaseInOutBase
|  | 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

Protected Methods
Hide Inherited Protected Methods
Show Inherited Protected Methods

| Method | Defined By
--- | --- | ---
|  | easeIn(fraction:Number):Number Returns a value that represents the eased fraction during the ease in phase of the animation. | EaseInOutBase
|  | easeOut(fraction:Number):Number Returns a value that represents the eased fraction during the ease out phase of the animation. | EaseInOutBase

Constructor Detail

### Sine

()
Constructor

`public function Sine(easeInFraction:Number = 0.5)`

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

Constructor.

Parameters

| `easeInFraction:Number` (default = `0.5`)`` — Sets the value of the `easeInFraction` property. The default value is `EasingFraction.IN_OUT`, which eases in for the first half of the time and eases out for the remainder.

Examples How to use this example
SinePowerEffectExample.mxml
Copy

    <?xml version="1.0"?>
    <!-- Simple example to demonstrate the s:Sine and s:Power 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:Sine id="sineEasing"
                easeInFraction="0.3"/>
            <s:Power id="powerEasing"
                exponent="4"/>
            <s:Move id="moveRight"
                target="{myImage}"
                xBy="500"
                duration="2000"
                easer="{powerEasing}"/>
            <s:Move id="moveLeft"
                target="{myImage}"
                xBy="-500"
                duration="2000"
                easer="{sineEasing}"/>
        </fx:Declarations>

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