Google Git
Sign in
apache / flex-site / HEAD / . / content / asdoc / spark / effects / animation / Keyframe.html
blob: f3afbf88cd4c070e36e3510dc07ce9d4879e22b0 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- saved from url=(0014)about:internet --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../../../style.css" type="text/css" media="screen"><link rel="stylesheet" href="../../../print.css" type="text/css" media="print"><link rel="stylesheet" href="../../../override.css" type="text/css"><meta name="keywords" content="Keyframe,spark.effects.animation.Keyframe,LOOP,REVERSE,animationTarget,currentValue,cycleFraction,cycleTime,duration,easer,easer,interpolator,interpolator,isPlaying,keyframes,motionPaths,playReversed,playheadTime,property,repeatBehavior,repeatCount,repeatDelay,startDelay,time,value,valueBy,valueBy,valueFrom,valueTo,animationEnd,animationRepeat,animationStart,animationStop,animationUpdate,clone,clone,end,getValue,pause,play,resume,stop"><title>spark.effects.animation.Keyframe</title><script src="../../../AC_OETags.js" type="text/javascript"></script></head><body><script language="javascript" type="text/javascript" src="../../../asdoc.js"></script><script language="javascript" type="text/javascript" src="../../../help.js"></script><script language="javascript" type="text/javascript" src="../../../cookies.js"></script><script language="javascript" type="text/javascript"><!--
asdocTitle = 'Keyframe - ApacheFlex API Reference';
var baseRef = '../../../';
window.onload = configPage;
--></script>
<script type="text/javascript">
scrollToNameAnchor();
</script><table class="titleTable" cellpadding="0" cellspacing="0" id="titleTable" style="display:none"><tr><td class="titleTableTitle" align="left">Apache Flex 4.16.1 API Reference </td><td class="titleTableTopNav" align="right"><a href="../../../package-summary.html" onclick="loadClassListFrame('../../../all-classes.html')">All Packages</a>&nbsp;|&nbsp;<a href="../../../class-summary.html" onclick="loadClassListFrame('../../../all-classes.html')">All Classes</a>&nbsp;|&nbsp;<a href="../../../all-index-A.html" onclick="loadClassListFrame('../../../index-list.html')">Index</a>&nbsp;|&nbsp;<a id="framesLink1" href="../../../index.html?spark/effects/animation/Keyframe.html&amp;spark/effects/animation/class-list.html">Frames</a><a id="noFramesLink1" style="display:none" href="" onclick="parent.location=document.location"> No Frames </a></td><td class="titleTableLogo" align="right" rowspan="3"><img src="../../../images/logo.jpg" class="logoImage" alt="AdobeLogo" title="AdobeLogo"></td></tr><tr class="titleTableRow2"><td class="titleTableSubTitle" id="subTitle" align="left">Keyframe</td><td class="titleTableSubNav" id="subNav" align="right"><a href="#propertySummary">Properties</a>&nbsp;| <a href="#methodSummary">Methods</a>&nbsp;| <a href="#includeExamplesSummary">Examples</a></td></tr><tr class="titleTableRow3"><td colspan="3">&nbsp;</td></tr></table><script language="javascript" type="text/javascript" xml:space="preserve">
<!--
if (!isEclipse() || window.name != ECLIPSE_FRAME_NAME) {titleBar_setSubTitle("Keyframe"); titleBar_setSubNav(false,true,false,false,false,false,false,false,true,true,false ,false,false,false,false,false);}
-->
</script><div xmlns:fn="http://www.w3.org/2005/xpath-functions" class="MainContent"><table class="classHeaderTable" cellpadding="0" cellspacing="0"><tr><td class="classHeaderTableLabel">Package</td><td><a href="package-detail.html" onclick="javascript:loadClassListFrame('class-list.html')">spark.effects.animation</a></td></tr><tr><td class="classHeaderTableLabel">Class</td><td class="classSignature">public class Keyframe</td></tr><tr><td class="classHeaderTableLabel">Inheritance</td><td class="inheritanceList">Keyframe <img src="../../../images/inherit-arrow.gif" title="Inheritance" alt="Inheritance" class="inheritArrow"> Object</td></tr></table><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version :&nbsp;</b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version :&nbsp;</b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions :&nbsp;</b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p></p><p></p>
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.
<p>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. </p>
<p>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.</p>
<p></p><a name="mxmlSyntaxSummary"></a><span class="classHeaderTableLabel">MXML Syntax</span><span id="showMxmlLink" style="display:none"><a href="#mxmlSyntaxSummary" onclick="toggleMXMLOnly();"><img src="../../../images/collapsed.gif" title="collapsed" alt="collapsed" class="collapsedImage">Show MXML Syntax</a><br/></span><span id="hideMxmlLink"><a href="#mxmlSyntaxSummary" onclick="toggleMXMLOnly();"><img src="../../../images/expanded.gif" title="expanded" alt="expanded" class="expandedImage">Hide MXML Syntax</a></span><div id="mxmlSyntax" class="mxmlSyntax"> <p>The <code>&lt;s:Keyframe&gt;</code> tag
inherits the tag attributes of its superclass,
and adds the following tag attributes:</p>
<pre>
&lt;s:Keyframe
id="ID"
easier="Linear"
time="val"
value="val"
valueBy="val"
/&gt;
</pre>
</div><script language="javascript" type="text/javascript"><!--
setMXMLOnly();
--></script><p><a href="#includeExamplesSummary">View the examples</a></p><p><span class="classHeaderTableLabel">See also</span></p><div class="seeAlso"><a href="MotionPath.html" target="">MotionPath</a></div><br/><hr></div><a name="propertySummary"></a><div class="summarySection"><div class="summaryTableTitle">Public Properties</div><table cellspacing="0" cellpadding="3" class="summaryTable " id="summaryTableProperty"><tr><th>&nbsp;</th><th colspan="2">Property</th><th class="summaryTableOwnerCol">Defined By</th></tr><tr class=""><td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a href="#easer" class="signatureLink">easer</a> : <a href="../../../spark/effects/easing/IEaser.html">IEaser</a><div class="summaryTableDescription">
The easing behavior applied to the motion between the previous
Keyframe object in motion path and this Keyframe object.</div></td><td class="summaryTableOwnerCol">Keyframe</td></tr><tr class=""><td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a href="#time" class="signatureLink">time</a> : Number<div class="summaryTableDescription">
The time, in milliseconds, at which the effect target
for this keyframe should have the value
specified by the value property.</div></td><td class="summaryTableOwnerCol">Keyframe</td></tr><tr class=""><td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a href="#value" class="signatureLink">value</a> : Object<div class="summaryTableDescription">
The value that the property of the effect target should have
at the time specified by the time property.</div></td><td class="summaryTableOwnerCol">Keyframe</td></tr><tr class=""><td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a href="#valueBy" class="signatureLink">valueBy</a> : Object<div class="summaryTableDescription">
Optional parameter which, if specified, is used to
calculate value in this keyframe or
the previous one.</div></td><td class="summaryTableOwnerCol">Keyframe</td></tr></table></div><a name="methodSummary"></a><div class="summarySection"><div class="summaryTableTitle">Public Methods </div><table cellspacing="0" cellpadding="3" class="summaryTable " id="summaryTableMethod"><tr><th>&nbsp;</th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined By</th></tr><tr class=""><td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#Keyframe()" class="signatureLink">Keyframe</a>(time:Number, value:Object = null, valueBy:Object = null)</div><div class="summaryTableDescription">
Constructor.</div></td><td class="summaryTableOwnerCol">Keyframe</td></tr><tr class=""><td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#clone()" class="signatureLink">clone</a>():<a href="../../../spark/effects/animation/Keyframe.html">Keyframe</a></div><div class="summaryTableDescription">
Returns a copy of this Keyframe object.</div></td><td class="summaryTableOwnerCol">Keyframe</td></tr></table></div><script language="javascript" type="text/javascript"><!--
showHideInherited();
--></script><div class="MainContent"><div class="detailSectionHeader">Property Detail</div><a name="propertyDetail"></a><a name="easer"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">easer</td><td class="detailHeaderType">property</td></tr></table><div class="detailBody"><code>public var easer:<a href="../../../spark/effects/easing/IEaser.html">IEaser</a></code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version :&nbsp;</b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version :&nbsp;</b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions :&nbsp;</b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p>
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.
<p>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 <code>easer</code> on each Keyframe as appropriate.</p>
<p>Because this property acts on the interval between the previous
Keyframe object in a sequence and this Keyframe object, the <code>easer</code>
property is ignored on the first Keyframe object in a sequence.</p>
</p><p> The default value is <code>Linear</code>.</p></div><a name="propertyDetail"></a><a name="time"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">time</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td></tr></table><div class="detailBody"><code>public var time:Number</code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version :&nbsp;</b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version :&nbsp;</b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions :&nbsp;</b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p>
The time, in milliseconds, at which the effect target
for this keyframe should have the value
specified by the <code>value</code> property. This time
is relative to the starting time of the effect defined
with this keyframe.
</p></div><a name="propertyDetail"></a><a name="value"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">value</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td></tr></table><div class="detailBody"><code>public var value:Object</code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version :&nbsp;</b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version :&nbsp;</b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions :&nbsp;</b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p>
The value that the property of the effect target should have
at the time specified by the <code>time</code> property.
</p></div><a name="propertyDetail"></a><a name="valueBy"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">valueBy</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td></tr></table><div class="detailBody"><code>public var valueBy:Object</code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version :&nbsp;</b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version :&nbsp;</b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions :&nbsp;</b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p>
Optional parameter which, if specified, is used to
calculate <code>value</code> in this keyframe or
the previous one. If <code>value</code> is not set in
the previous keyframe, but this keyframe defines both
<code>value</code> and <code>valueBy</code>, then <code>value</code>
in the previous keyframe is calculated as <code>value</code>
in this keyframe minus <code>valueBy</code> in this keyframe.
<p>Similarly, if <code>value</code> in this keyframe is not
defined, but <code>valueBy</code> in this keyframe and
<code>value</code> in the previous keyframe are both set,
then <code>value</code> in this keyframe is calculated as
<code>value</code> in the previous keyframe plus
<code>valueBy</code> in this keyframe.</p>
<p><code>valueBy</code> 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.</p>
</p></div><a name="constructorDetail"></a><div class="detailSectionHeader">Constructor Detail</div><a name="Keyframe()"></a><a name="Keyframe(Number,Object,Object)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">Keyframe</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">Constructor</td></tr></table><div class="detailBody"><code>public function Keyframe(time:Number, value:Object = null, valueBy:Object = null)</code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version :&nbsp;</b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version :&nbsp;</b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions :&nbsp;</b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p>
Constructor.
</p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">time</span>:Number</code> (default = <code>NaN</code>)<code></code> &mdash; The time, in milliseconds, at which the effect target
of this keyframe should have the value
specified by the <code>value</code> parameter.
</td></tr><tr><td class="paramSpacer">&nbsp;</td></tr><tr><td width="20px"></td><td><code><span class="label">value</span>:Object</code> (default = <code>null</code>)<code></code> &mdash; The value that the effect target should have
at the given <code>time</code>.
</td></tr><tr><td class="paramSpacer">&nbsp;</td></tr><tr><td width="20px"></td><td><code><span class="label">valueBy</span>:Object</code> (default = <code>null</code>)<code></code> &mdash; Optional parameter which, if provided,
causes <code>value</code> to be calculated dynamically by
adding <code>valueBy</code> to the <code>value</code> 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.
</td></tr></table></div><a name="methodDetail"></a><div class="detailSectionHeader">Method Detail</div><a name="clone()"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">clone</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td></tr></table><div class="detailBody"><code> public function clone():<a href="../../../spark/effects/animation/Keyframe.html">Keyframe</a></code><p></p><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Language Version :&nbsp;</b></td><td>ActionScript 3.0</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Product Version :&nbsp;</b></td><td>Flex 4</td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td style="white-space:nowrap" valign="top"><b> Runtime Versions :&nbsp;</b></td><td>Flash Player 10, AIR 1.5</td></tr></table><p></p><p></p><p>
Returns a copy of this Keyframe object.
</p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code><a href="../../../spark/effects/animation/Keyframe.html">Keyframe</a></code> &mdash; A copy of this Keyframe object.
</td></tr></table></div><a name="includeExamplesSummary"></a><div class="detailSectionHeader">Examples</div><div class="exampleHeader">KeyFrameEffectExample.mxml</div><div class="detailBody"><div class="listing"><pre>&lt;?xml version="1.0"?&gt;
&lt;!--
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.
--&gt;
&lt;!-- Simple example to demonstrate the s:Keyframe and s:MotionPath classes. --&gt;
&lt;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"&gt;
&lt;fx:Declarations&gt;
&lt;fx:Vector id="kf" type="spark.effects.animation.MotionPath"&gt;
&lt;s:MotionPath property="scaleX"&gt;
&lt;s:Keyframe time="250" value="0.5"/&gt;
&lt;s:Keyframe time="500" value="1.0"/&gt;
&lt;s:Keyframe time="750" value="0.5"/&gt;
&lt;s:Keyframe time="1000" value="1.0"/&gt;
&lt;s:Keyframe time="1250" value="0.5"/&gt;
&lt;s:Keyframe time="1500" value="1.0"/&gt;
&lt;/s:MotionPath&gt;
&lt;s:MotionPath property="scaleY"&gt;
&lt;s:Keyframe time="250" value="0.5"/&gt;
&lt;s:Keyframe time="500" value="1.0"/&gt;
&lt;s:Keyframe time="750" value="0.5"/&gt;
&lt;s:Keyframe time="1000" value="1.0"/&gt;
&lt;s:Keyframe time="1250" value="0.5"/&gt;
&lt;s:Keyframe time="1500" value="1.0"/&gt;
&lt;/s:MotionPath&gt;
&lt;/fx:Vector&gt;
&lt;s:Animate id="shrinkEffect"
motionPaths="{kf}"
target="{myImage}"/&gt;
&lt;/fx:Declarations&gt;
&lt;s:Panel id="examplePanel"
title="Keyframe and MotionPath Effect Example"
width="75%" height="75%"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout paddingTop="10" paddingLeft="10"/&gt;
&lt;/s:layout&gt;
&lt;!-- Directions --&gt;
&lt;s:VGroup id="detailsBox" width="50%" left="0"&gt;
&lt;s:Label width="99%" color="blue"
text="Click the Adobe logo to watch the effect."/&gt;
&lt;/s:VGroup&gt;
&lt;mx:Image id="myImage"
source="@Embed(source='assets/logo.jpg')"
click="shrinkEffect.end();shrinkEffect.play();"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;
</pre></div><script language="javascript" type="text/javascript"><!-- AC_FL_RunContent( "src", "examples/KeyFrameEffectExample", "width", "100%",
"height","400px", "salign", "TL", "id", "example1", "quality", "high", "bgcolor", "", "name",
"example1", "flashvars","", "allowScriptAccess","sameDomain", "type",
"application/x-shockwave-flash","pluginspage", "http://www.macromedia.com/go/getflashplayer" ); --></script></div><br/><br/><hr><br/><p></p><center class="copyright"><footer>The Apache Software Foundation</footer><br/>Wed Nov 15 2017, 09:50 AM +01:00 </center></div></body></html><!--The Apache Software Foundation<br/>Wed Nov 15 2017, 09:50 AM +01:00 -->