Apache Flex 4.16.1 API Reference | All Packages | All Classes | Index | Frames No Frames |
Keyframe

Package | spark.effects.animation
Class | public class Keyframe
Inheritance | Keyframe Object

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The Keyframe class defines the value of a property at a specific time during an effect. For example, you can create three keyframes that define the value of a property at the beginning of the effect, at the midpoint of the effect, and at the end of the effect. The effect animates the property change on the target from keyframe to keyframe over the effect duration.

The collection of keyframes for an effect is called the effect's motion path. A motion path can define any number of keyframes. The effect then calculates the value of the property by interpolating between the values specified by two key frames.

Use the MotionPath class to hold the collection of Keyframe objects that represent the motion path of the effect. The MotionPath class specifies the name of the property on the target, and the collection of Keyframes objects specify the values of the property at different times during the effect.

MXML Syntax Show MXML Syntax
Hide MXML Syntax

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

      <s:Keyframe
        id="ID"
        easier="Linear"
        time="val"
        value="val"
        valueBy="val"
      />

View the examples

See also

MotionPath

Public Properties

| Property | Defined By
--- | --- | ---
|  | easer : IEaser The easing behavior applied to the motion between the previous Keyframe object in motion path and this Keyframe object. | Keyframe
|  | time : Number The time, in milliseconds, at which the effect target for this keyframe should have the value specified by the value property. | Keyframe
|  | value : Object The value that the property of the effect target should have at the time specified by the time property. | Keyframe
|  | valueBy : Object Optional parameter which, if specified, is used to calculate value in this keyframe or the previous one. | Keyframe

Public Methods

| Method | Defined By
--- | --- | ---
|  | Keyframe(time:Number, value:Object = null, valueBy:Object = null) Constructor. | Keyframe
|  | clone():Keyframe Returns a copy of this Keyframe object. | Keyframe

Property Detail

easer | property

`public var easer:IEaser`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The easing behavior applied to the motion between the previous Keyframe object in motion path and this Keyframe object. By default, the easing is linear, or no easing at all.

Note that the parent effect might have easing applied already over the entire animation. Therefore, if easing per keyframe interval is desired instead, it is necessary to set the overall effect easer to linear easing (spark.effects.easing.Linear) and then set the `easer` on each Keyframe as appropriate.

Because this property acts on the interval between the previous Keyframe object in a sequence and this Keyframe object, the `easer` property is ignored on the first Keyframe object in a sequence.

The default value is `Linear`.

time | property |

`public var time:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The time, in milliseconds, at which the effect target for this keyframe should have the value specified by the `value` property. This time is relative to the starting time of the effect defined with this keyframe.

value | property |

`public var value:Object`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The value that the property of the effect target should have at the time specified by the `time` property.

valueBy | property |

`public var valueBy:Object`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Optional parameter which, if specified, is used to calculate `value` in this keyframe or the previous one. If `value` is not set in the previous keyframe, but this keyframe defines both `value` and `valueBy`, then `value` in the previous keyframe is calculated as `value` in this keyframe minus `valueBy` in this keyframe.

Similarly, if `value` in this keyframe is not defined, but `valueBy` in this keyframe and `value` in the previous keyframe are both set, then `value` in this keyframe is calculated as `value` in the previous keyframe plus `valueBy` in this keyframe.

`valueBy` is ignored for the first keyframe in a sequence, since it applies only to the interval preceding a keyframe, and there is no preceding interval for the first keyframe.

Constructor Detail

Keyframe | () | Constructor

`public function Keyframe(time:Number, value:Object = null, valueBy:Object = null)`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Constructor.

Parameters

| `time:Number` (default = `NaN`)`` — The time, in milliseconds, at which the effect target of this keyframe should have the value specified by the `value` parameter.
| `value:Object` (default = `null`)`` — The value that the effect target should have at the given `time`.
| `valueBy:Object` (default = `null`)`` — Optional parameter which, if provided, causes `value` to be calculated dynamically by adding `valueBy` to the `value` of the previous keyframe in the set of keyframes in a MotionPath object. This value is ignored if this is the first Keyframe in a sequence.

Method Detail

clone | () | method

`public function clone():Keyframe`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Returns a copy of this Keyframe object.

Returns

| `Keyframe` — A copy of this Keyframe object.

Examples
KeyFrameEffectExample.mxml

    <?xml version="1.0"?>
    <!--

      Licensed to the Apache Software Foundation (ASF) under one or more
      contributor license agreements.  See the NOTICE file distributed with
      this work for additional information regarding copyright ownership.
      The ASF licenses this file to You under the Apache License, Version 2.0
      (the "License"); you may not use this file except in compliance with
      the License.  You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.

    -->
    <!-- Simple example to demonstrate the s:Keyframe and s:MotionPath 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>
            <fx:Vector id="kf" type="spark.effects.animation.MotionPath">
                <s:MotionPath property="scaleX">
                    <s:Keyframe time="250" value="0.5"/>
                    <s:Keyframe time="500" value="1.0"/>
                    <s:Keyframe time="750" value="0.5"/>
                    <s:Keyframe time="1000" value="1.0"/>
                    <s:Keyframe time="1250" value="0.5"/>
                    <s:Keyframe time="1500" value="1.0"/>
                </s:MotionPath>
                <s:MotionPath property="scaleY">
                    <s:Keyframe time="250" value="0.5"/>
                    <s:Keyframe time="500" value="1.0"/>
                    <s:Keyframe time="750" value="0.5"/>
                    <s:Keyframe time="1000" value="1.0"/>
                    <s:Keyframe time="1250" value="0.5"/>
                    <s:Keyframe time="1500" value="1.0"/>
                </s:MotionPath>
            </fx:Vector>

            <s:Animate id="shrinkEffect"
                motionPaths="{kf}"
                target="{myImage}"/>
        </fx:Declarations>

        <s:Panel id="examplePanel"
            title="Keyframe and MotionPath Effect Example"
            width="75%" height="75%">
            <s:layout>
                <s:VerticalLayout paddingTop="10" paddingLeft="10"/>
            </s:layout>

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

            <mx:Image id="myImage"
                source="@Embed(source='assets/logo.jpg')"
                click="shrinkEffect.end();shrinkEffect.play();"/>
        </s:Panel>
    </s:Application>

Wed Nov 15 2017, 09:50 AM +01:00