Keyframe

패키지	spark.effects.animation
클래스	public class Keyframe
상속	Keyframe Object

언어 버전:

ActionScript 3.0

제품 버전:

Flex 4

런타임 버전:

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 구문

MXML 구문 숨기기

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"
  />

예제 보기

기타 예제

Applying an effect using keyframes and motion paths

관련 API 요소

MotionPath

공용 속성

상속되는 공용 속성 숨기기

상속되는 공용 속성 표시

	속성		정의 주체
		constructor : Object 지정된 객체 인스턴스의 클래스 객체 또는 생성자 함수에 대한 참조입니다.	Object
		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

공용 메서드

상속되는 공용 메서드 숨기기

상속되는 공용 메서드 표시

	메서드		정의 주체
		Keyframe(time:Number = NaN, value:Object = null, valueBy:Object = null) Constructor.	Keyframe
		clone():Keyframe Returns a copy of this Keyframe object.	Keyframe
		hasOwnProperty(name:String):Boolean 지정된 속성이 객체에 정의되어 있는지 여부를 나타냅니다.	Object
		isPrototypeOf(theClass:Object):Boolean Object 클래스의 인스턴스가 매개 변수로 지정된 객체의 프로토타입 체인에 있는지 여부를 나타냅니다.	Object
		propertyIsEnumerable(name:String):Boolean 지정된 속성이 존재하고 열거 가능한지 여부를 나타냅니다.	Object
		setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void 루프 작업에서 동적 속성을 사용할 수 있는지 여부를 설정합니다.	Object
		toLocaleString():String 로캘별 규칙에 따라 서식이 지정된 이 객체의 문자열 표현을 반환합니다.	Object
		toString():String 지정된 객체의 문자열 표현을 반환합니다.	Object
		valueOf():Object 지정된 객체의 프리미티브 값을 반환합니다.	Object

속성 세부 정보

easer

속성

public var easer:IEaser

언어 버전:

ActionScript 3.0

제품 버전:

Flex 4

런타임 버전:

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.

기본값: Linear.

time

속성

public var time:Number

언어 버전:

ActionScript 3.0

제품 버전:

Flex 4

런타임 버전:

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

속성

public var value:Object

언어 버전:

ActionScript 3.0

제품 버전:

Flex 4

런타임 버전:

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

속성

public var valueBy:Object

언어 버전:

ActionScript 3.0

제품 버전:

Flex 4

런타임 버전:

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.

생성자 세부 정보

()

생성자

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

언어 버전:

ActionScript 3.0

제품 버전:

Flex 4

런타임 버전:

Flash Player 10, AIR 1.5

Constructor.

매개 변수

	`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.

메서드 세부 정보

clone

()

메서드

public function clone():Keyframe

언어 버전:

ActionScript 3.0

제품 버전:

Flex 4

런타임 버전:

Flash Player 10, AIR 1.5

Returns a copy of this Keyframe object.

반환값

Keyframe — A copy of this Keyframe object.

예제 예제 사용 방법

KeyFrameEffectExample.mxml

<?xml version="1.0"?>
<!-- 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>

법적 고지 사항 | 온라인 개인 정보 보호 정책

Keyframe - AS3 Flex

클래스 x

easer

time

value

valueBy

Keyframe

clone