add basic Move and Fade effects and an example
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/9212e774 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/9212e774 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/9212e774 Branch: refs/heads/develop Commit: 9212e77438a36e15265c99298f8f27723b42cfca Parents: c244e29 Author: Alex Harui <aha...@apache.org> Authored: Sat May 24 08:42:03 2014 -0700 Committer: Alex Harui <aha...@apache.org> Committed: Sat May 24 08:42:03 2014 -0700 ---------------------------------------------------------------------- examples/EffectsExample/build.xml | 51 ++ examples/EffectsExample/src/EffectExample.mxml | 33 + examples/EffectsExample/src/MyInitialView.mxml | 89 +++ examples/EffectsExample/src/jproctor.jpg | Bin 0 -> 21684 bytes examples/EffectsExample/src/twong.jpg | Bin 0 -> 19395 bytes examples/build_example.xml | 1 + .../as/projects/FlexJSJX/src/FlexJSJXClasses.as | 3 + .../src/org/apache/flex/effects/Fade.as | 159 +++++ .../src/org/apache/flex/effects/Move.as | 188 ++++++ .../src/org/apache/flex/effects/Tween.as | 676 +++++++++++++++++++ frameworks/as/projects/FlexJSUI/defaults.css | 2 + .../as/projects/FlexJSUI/src/FlexJSUIClasses.as | 2 + .../src/org/apache/flex/core/IEffectTimer.as | 68 ++ .../src/org/apache/flex/utils/EffectTimer.as | 95 +++ .../src/org/apache/flex/core/IEffectTimer.js | 45 ++ .../src/org/apache/flex/utils/EffectTimer.js | 92 +++ 16 files changed, 1504 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/examples/EffectsExample/build.xml ---------------------------------------------------------------------- diff --git a/examples/EffectsExample/build.xml b/examples/EffectsExample/build.xml new file mode 100644 index 0000000..5083772 --- /dev/null +++ b/examples/EffectsExample/build.xml @@ -0,0 +1,51 @@ +<?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. + +--> + + +<project name="effectexample" default="main" basedir="."> + <property name="FLEXJS_HOME" location="../.."/> + <property name="example" value="EffectExample" /> + + <property file="${FLEXJS_HOME}/env.properties"/> + <property environment="env"/> + <property file="${FLEXJS_HOME}/build.properties"/> + <property name="FLEX_HOME" value="${FLEXJS_HOME}"/> + <property name="FALCON_HOME" value="${env.FALCON_HOME}"/> + <property name="FALCONJX_HOME" value="${env.FALCONJX_HOME}"/> + <property name="GOOG_HOME" value="${env.GOOG_HOME}"/> + + <include file="${basedir}/../build_example.xml" /> + + <target name="main" depends="clean,build_example.compile,build_example.compilejs" description="Clean build of ${example}"> + </target> + <!-- Uncomment to reproduce cross-compilation error in compilejs step + <target name="main" depends="clean,build_example.compile,build_example.compilejs" description="Clean build of ${example}"> + </target> + --> + + <target name="clean"> + <delete dir="${basedir}/bin" failonerror="false" /> + <delete dir="${basedir}/bin-debug" failonerror="false" /> + <delete dir="${basedir}/bin-release" failonerror="false" /> + </target> + + + +</project> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/examples/EffectsExample/src/EffectExample.mxml ---------------------------------------------------------------------- diff --git a/examples/EffectsExample/src/EffectExample.mxml b/examples/EffectsExample/src/EffectExample.mxml new file mode 100644 index 0000000..c77e690 --- /dev/null +++ b/examples/EffectsExample/src/EffectExample.mxml @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="utf-8"?> +<!--- +// +// 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. +// +//////////////////////////////////////////////////////////////////////////////// +--> +<basic:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:local="*" + xmlns:models="models.*" + xmlns:basic="library://ns.apache.org/flexjs/basic" + > + + <basic:valuesImpl> + <basic:SimpleCSSValuesImpl /> + </basic:valuesImpl> + <basic:initialView> + <local:MyInitialView /> + </basic:initialView> +</basic:Application> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/examples/EffectsExample/src/MyInitialView.mxml ---------------------------------------------------------------------- diff --git a/examples/EffectsExample/src/MyInitialView.mxml b/examples/EffectsExample/src/MyInitialView.mxml new file mode 100644 index 0000000..1a9572f --- /dev/null +++ b/examples/EffectsExample/src/MyInitialView.mxml @@ -0,0 +1,89 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + +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. + +--> +<basic:ViewBase xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:basic="library://ns.apache.org/flexjs/basic" + xmlns:local="*" + xmlns:models="models.*" + xmlns:acc="org.apache.flex.html.accessories.*"> + + <fx:Style> + .title { + font-size: 14pt; + font-weight: bold; + } + + </fx:Style> + + <fx:Script> + <![CDATA[ + import org.apache.flex.effects.Fade; + import org.apache.flex.effects.Move; + + private function swapit():void + { + var move1:Move = new Move(image1); + var move2:Move = new Move(image2); + move1.xTo = image1.x == 100 ? 400 : 100; + move2.xTo = image2.x == 100 ? 400 : 100; + move1.play(); + move2.play(); + } + + private function fadeout():void + { + var fade:Fade = new Fade(image1); + fade.alphaFrom = 1; + fade.alphaTo = 0; + fade.play(); + } + + private function fadein():void + { + var fade:Fade = new Fade(image1); + fade.alphaFrom = 0; + fade.alphaTo = 1; + fade.play(); + } + ]]> + </fx:Script> + + <basic:Container width="600" height="700" x="50" y="50"> + <basic:beads> + <basic:NonVirtualVerticalLayout /> + </basic:beads> + + <basic:Container width="600" height="40"> + <basic:beads> + <basic:NonVirtualHorizontalLayout /> + </basic:beads> + <basic:TextButton text="swap" click="swapit()" /> + <basic:TextButton text="fade out" click="fadeout()" /> + <basic:TextButton text="fade in" click="fadein()" /> + </basic:Container> + + <basic:Container width="500"> + <basic:Image id="image1" source="twong.jpg" x="100" y="20" /> + <basic:Label id="caption1" text="Dick" x="100" y="200" /> + <basic:Image id="image2" source="jproctor.jpg" x="400" y="20" /> + <basic:Label id="caption2" text="Jane" x="400" y="200" /> + </basic:Container> + </basic:Container> + +</basic:ViewBase> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/examples/EffectsExample/src/jproctor.jpg ---------------------------------------------------------------------- diff --git a/examples/EffectsExample/src/jproctor.jpg b/examples/EffectsExample/src/jproctor.jpg new file mode 100644 index 0000000..1111787 Binary files /dev/null and b/examples/EffectsExample/src/jproctor.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/examples/EffectsExample/src/twong.jpg ---------------------------------------------------------------------- diff --git a/examples/EffectsExample/src/twong.jpg b/examples/EffectsExample/src/twong.jpg new file mode 100644 index 0000000..1124b71 Binary files /dev/null and b/examples/EffectsExample/src/twong.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/examples/build_example.xml ---------------------------------------------------------------------- diff --git a/examples/build_example.xml b/examples/build_example.xml index caa6739..aeb05b8 100644 --- a/examples/build_example.xml +++ b/examples/build_example.xml @@ -70,6 +70,7 @@ <copy todir="${basedir}/bin-debug"> <fileset dir="${basedir}/src"> <include name="*.png" /> + <include name="*.jpg" /> </fileset> </copy> </target> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/frameworks/as/projects/FlexJSJX/src/FlexJSJXClasses.as ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSJX/src/FlexJSJXClasses.as b/frameworks/as/projects/FlexJSJX/src/FlexJSJXClasses.as index 8c274e0..6ba0087 100644 --- a/frameworks/as/projects/FlexJSJX/src/FlexJSJXClasses.as +++ b/frameworks/as/projects/FlexJSJX/src/FlexJSJXClasses.as @@ -33,6 +33,9 @@ internal class FlexJSJXClasses import org.apache.flex.charts.beads.layouts.BarChartLayout; BarChartLayout; import org.apache.flex.charts.supportClasses.BarChartSeries; BarChartSeries; import org.apache.flex.charts.supportClasses.BoxItemRenderer; BoxItemRenderer; + import org.apache.flex.effects.Tween; Tween; + import org.apache.flex.effects.Move; Move; + import org.apache.flex.effects.Fade; Fade; import org.apache.flex.html.accessories.DateFormatMMDDYYYYBead; DateFormatMMDDYYYYBead; import org.apache.flex.html.beads.DataGridColumnView; DataGridColumnView; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Fade.as ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Fade.as b/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Fade.as new file mode 100644 index 0000000..ad3b821 --- /dev/null +++ b/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Fade.as @@ -0,0 +1,159 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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. +// +//////////////////////////////////////////////////////////////////////////////// + +package org.apache.flex.effects +{ + +import org.apache.flex.core.IDocument; +import org.apache.flex.core.IUIBase; + +/** + * The Fade effect animates a UI component's alpha or opacity. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ +public class Fade extends Tween implements IDocument +{ + + //-------------------------------------------------------------------------- + // + // Constructor + // + //-------------------------------------------------------------------------- + + /** + * Constructor. + * + * @param target Object ID or reference to an object that will + * have its x and/or y property animated. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function Fade(target:IUIBase = null) + { + super(); + + this.target = target; + startValue = 0; + endValue = 1; + + listener = this; + } + + //-------------------------------------------------------------------------- + // + // Variables + // + //-------------------------------------------------------------------------- + + /** + * @private + * The document. + */ + private var document:Object; + + /** + * @private + * The target. + */ + private var target:IUIBase; + + /** + * @private + * The change in alpha. + */ + private var d:Number; + + /** + * @private + * The starting value. + */ + private var start:Number; + + /** + * Starting alpha value. If NaN, the current alpha value is used + */ + public var alphaFrom:Number; + + /** + * Ending alpha value. If NaN, the current alpha value is not changed + */ + public var alphaTo:Number; + + + + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + + //-------------------------------------------------------------------------- + // + // Methods + // + //-------------------------------------------------------------------------- + + public function setDocument(document:Object, id:String = null):void + { + this.document = document; + } + + /** + * @private + */ + override public function play():void + { + if (target is String) + target = document[target]; + + if (isNaN(alphaFrom)) + start = target.alpha; + else + start = alphaFrom; + + if (isNaN(alphaTo)) + d = 0; + else + d = alphaTo - start; + + super.play(); + } + + public function onTweenUpdate(value:Number):void + { + if (d) + target.alpha = start + value * d; + } + + public function onTweenEnd(value:Number):void + { + if (d) + target.alpha = start + d; + } +} + +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Move.as ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Move.as b/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Move.as new file mode 100644 index 0000000..6bcc749 --- /dev/null +++ b/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Move.as @@ -0,0 +1,188 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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. +// +//////////////////////////////////////////////////////////////////////////////// + +package org.apache.flex.effects +{ + +import org.apache.flex.core.IDocument; +import org.apache.flex.core.IUIBase; + +/** + * The Move effect animates a UI component's x or y position. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ +public class Move extends Tween implements IDocument +{ + + //-------------------------------------------------------------------------- + // + // Constructor + // + //-------------------------------------------------------------------------- + + /** + * Constructor. + * + * @param target Object ID or reference to an object that will + * have its x and/or y property animated. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function Move(target:IUIBase = null) + { + super(); + + this.target = target; + startValue = 0; + endValue = 1; + + listener = this; + } + + //-------------------------------------------------------------------------- + // + // Variables + // + //-------------------------------------------------------------------------- + + /** + * @private + * The document. + */ + private var document:Object; + + /** + * @private + * The target. + */ + private var target:IUIBase; + + /** + * @private + * The change in x. + */ + private var dx:Number; + + /** + * @private + * The change in y. + */ + private var dy:Number; + + /** + * @private + * The starting x. + */ + private var xStart:Number; + + /** + * @private + * The staring y. + */ + private var yStart:Number; + + /** + * Starting x value. If NaN, the current x value is used + */ + public var xFrom:Number; + + /** + * Ending x value. If NaN, the current x value is not changed + */ + public var xTo:Number; + + /** + * Starting y value. If NaN, the current y value is used + */ + public var yFrom:Number; + + /** + * Ending y value. If NaN, the current y value is not changed + */ + public var yTo:Number; + + + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + + //-------------------------------------------------------------------------- + // + // Methods + // + //-------------------------------------------------------------------------- + + public function setDocument(document:Object, id:String = null):void + { + this.document = document; + } + + /** + * @private + */ + override public function play():void + { + if (target is String) + target = document[target]; + + if (isNaN(xFrom)) + xStart = target.x; + if (isNaN(xTo)) + dx = 0; + else + dx = xTo - xStart; + + if (isNaN(yFrom)) + yStart = target.y; + if (isNaN(yTo)) + dy = 0; + else + dy = yTo - yStart; + + super.play(); + } + + public function onTweenUpdate(value:Number):void + { + if (dx) + target.x = xStart + value * dx; + if (dy) + target.y = yStart + value * dy; + } + + public function onTweenEnd(value:Number):void + { + if (dx) + target.x = xStart + dx; + if (dy) + target.y = yStart + dy; + } +} + +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Tween.as ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Tween.as b/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Tween.as new file mode 100644 index 0000000..134792c --- /dev/null +++ b/frameworks/as/projects/FlexJSJX/src/org/apache/flex/effects/Tween.as @@ -0,0 +1,676 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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. +// +//////////////////////////////////////////////////////////////////////////////// + +package org.apache.flex.effects +{ + +import org.apache.flex.core.IEffectTimer; +import org.apache.flex.core.ValuesManager; +import org.apache.flex.events.ValueEvent; +import org.apache.flex.events.EventDispatcher; + +/** + * Tween is the underlying animation class for the effects in FlexJS. + * + * The Tween class defines a tween, a property animation performed + * on a target object over a period of time. + * That animation can be a change in position, such as performed by + * the Move effect; a change in size, as performed by the Resize or + * Zoom effects; a change in visibility, as performed by the Fade or + * Dissolve effects; or other types of animations. + * + * A Tween instance accepts the <code>startValue</code>, + * <code>endValue</code>, and <code>duration</code> properties, + * and an optional easing function to define the animation.</p> + * + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ +public class Tween extends EventDispatcher +{ + //-------------------------------------------------------------------------- + // + // Class constants + // + //-------------------------------------------------------------------------- + + /** + * The <code>Tween.TWEEN_END</code> constant defines the value of the + * event object's <code>type</code> property for a <code>tweenEnd</code> event. + * + * <p>The properties of the event object have the following values:</p> + * <table class="innertable"> + * <tr><th>Property</th><th>Value</th></tr> + * <tr><td><code>bubbles</code></td><td>false</td></tr> + * <tr><td><code>cancelable</code></td><td>false</td></tr> + * <tr><td><code>currentTarget</code></td><td>The Object that defines the + * event listener that handles the event. For example, if you use + * <code>myButton.addEventListener()</code> to register an event listener, + * myButton is the value of the <code>currentTarget</code>. </td></tr> + * <tr><td><code>target</code></td><td>The Object that dispatched the event; + * it is not always the Object listening for the event. + * Use the <code>currentTarget</code> property to always access the + * Object listening for the event.</td></tr> + * <tr><td><code>value</code></td><td>The value passed to the + * <code>onTweenEnd()</code> method.</td></tr> + * </table> + * + * @see mx.effects.Effect + * @see mx.effects.TweenEffect + * @see mx.events.EffectEvent + * @eventType tweenEnd + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public static const TWEEN_END:String = "tweenEnd"; + + /** + * The <code>Tween.TWEEN_START</code> constant defines the value of the + * event object's <code>type</code> property for a <code>tweenStart</code> event. + * + * <p>The properties of the event object have the following values:</p> + * <table class="innertable"> + * <tr><th>Property</th><th>Value</th></tr> + * <tr><td><code>bubbles</code></td><td>false</td></tr> + * <tr><td><code>cancelable</code></td><td>false</td></tr> + * <tr><td><code>currentTarget</code></td><td>The Object that defines the + * event listener that handles the event. For example, if you use + * <code>myButton.addEventListener()</code> to register an event listener, + * myButton is the value of the <code>currentTarget</code>. </td></tr> + * <tr><td><code>target</code></td><td>The Object that dispatched the event; + * it is not always the Object listening for the event. + * Use the <code>currentTarget</code> property to always access the + * Object listening for the event.</td></tr> + * <tr><td><code>value</code></td><td>The value passed to the + * <code>onTweenUpdate()</code> method.</td></tr> + * </table> + * + * @eventType tweenStart + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public static const TWEEN_START:String = "tweenStart"; + + /** + * The <code>Tween.TWEEN_UPDATE</code> constant defines the value of the + * event object's <code>type</code> property for a <code>tweenUpdate</code> event. + * + * <p>The properties of the event object have the following values:</p> + * <table class="innertable"> + * <tr><th>Property</th><th>Value</th></tr> + * <tr><td><code>bubbles</code></td><td>false</td></tr> + * <tr><td><code>cancelable</code></td><td>false</td></tr> + * <tr><td><code>currentTarget</code></td><td>The Object that defines the + * event listener that handles the event. For example, if you use + * <code>myButton.addEventListener()</code> to register an event listener, + * myButton is the value of the <code>currentTarget</code>. </td></tr> + * <tr><td><code>target</code></td><td>The Object that dispatched the event; + * it is not always the Object listening for the event. + * Use the <code>currentTarget</code> property to always access the + * Object listening for the event.</td></tr> + * <tr><td><code>value</code></td><td>The value passed to the + * <code>onTweenUpdate()</code> method.</td></tr> + * </table> + * + * @eventType tweenUpdate + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public static const TWEEN_UPDATE:String = "tweenUpdate"; + + + //-------------------------------------------------------------------------- + // + // Class variables + // + //-------------------------------------------------------------------------- + + /** + * The list of tweens that are currently playing. + */ + public static var activeTweens:Object = {}; + + private static var timer:IEffectTimer; + + private static var currentID:int = 1; + + //-------------------------------------------------------------------------- + // + // Class properties + // + //-------------------------------------------------------------------------- + + //---------------------------------- + // currentTime + //---------------------------------- + + /** + * Used by effects to get the current effect time tick. + */ + public static var currentTime:Number = NaN; + + //-------------------------------------------------------------------------- + // + // Class methods + // + //-------------------------------------------------------------------------- + + /** + * @private + */ + private static function addTween(tween:Tween):void + { + tween.id = currentID++; + + activeTweens[tween.id] = tween; + + if (!timer) + { + timer = ValuesManager.valuesImpl.newInstance(tween, "iEffectTimer") as IEffectTimer; + timer.addEventListener("update", updateHandler); + } + currentTime = timer.start(); + + tween.startTime = tween.previousUpdateTime = currentTime; + } + + + /** + * @private + */ + private static function removeTween(tween:Tween):void + { + delete activeTweens[tween.id]; + if (activeTweens.length == 0) + timer.stop(); + } + + /** + * @private + */ + private static function updateHandler(event:ValueEvent):void + { + var oldTime:Number = currentTime; + + // the IEFfectTimer can control the current time + // if it wants. This can be useful for automated + // testing. + currentTime = event.value as Number; + + for (var id:String in activeTweens) + { + var tween:Tween = Tween(activeTweens[id]); + tween.update(); + } + } + + //-------------------------------------------------------------------------- + // + // Constructor + // + //-------------------------------------------------------------------------- + + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function Tween() + { + } + + //-------------------------------------------------------------------------- + // + // Variables + // + //-------------------------------------------------------------------------- + + /** + * @private + */ + private var id:int = -1; + + /** + * @private + */ + private var _doSeek:Boolean = false; + + /** + * @private + */ + private var _isPlaying:Boolean = true; + + /** + * @private + */ + private var _doReverse:Boolean = false; + + /** + * @private + */ + private var startTime:Number; + + /** + * @private + */ + private var previousUpdateTime:Number; + + /** + * @private + */ + private var userEquation:Function; + + /** + * Final value of the animation. + */ + public var endValue:Number; + + /** + * Initial value of the animation. + */ + public var startValue:Number; + + /** + * @private + */ + private var started:Boolean = false; + + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + //---------------------------------- + // duration + //---------------------------------- + + /** + * Duration of the animation, in milliseconds. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public var duration:Number = 3000; + + //---------------------------------- + // listener + //---------------------------------- + + /** + * Object that is notified at each interval of the animation. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public var listener:Object; + + //---------------------------------- + // playheadTime + //---------------------------------- + + /** + * @private + * Storage for the playheadTime property. + */ + private var _playheadTime:Number = 0; + + /** + * @private + * The current millisecond position in the tween. + * This value is between 0 and duration. + * Use the seek() method to change the position of the tween. + */ + private function get playheadTime():Number + { + return _playheadTime; + } + + //---------------------------------- + // playReversed + //---------------------------------- + + /** + * @private + * Storage for the playReversed property. + */ + private var _invertValues:Boolean = false; + + /** + * @private + * Starts playing reversed from start of tween. + * Setting this property to <code>true</code> + * inverts the values returned by the tween. + * Using reverse inverts the values and only plays + * for as much time that has already elapsed. + */ + private function get playReversed():Boolean + { + return _invertValues; + } + + /** + * @private + */ + private function set playReversed(value:Boolean):void + { + _invertValues = value; + } + + //-------------------------------------------------------------------------- + // + // Methods + // + //-------------------------------------------------------------------------- + + + /** + * Sets the easing function for the animation. + * The easing function is used to interpolate between + * the <code>startValue</code> value and the <code>endValue</code>. + * A trivial easing function does linear interpolation, + * but more sophisticated easing functions create the illusion of + * acceleration and deceleration, which makes the animation seem + * more natural. + * + * <p>If no easing function is specified, an easing function based + * on the <code>Math.sin()</code> method is used.</p> + * + * <p>The easing function follows the function signature + * popularized by Robert Penner. + * The function accepts four arguments. + * The first argument is the "current time", + * where the animation start time is 0. + * The second argument is a the initial value + * at the beginning of the animation (a Number). + * The third argument is the ending value + * minus the initial value. + * The fourth argument is the duration of the animation. + * The return value is the interpolated value for the current time + * (usually a value between the initial value and the ending value).</p> + * + * <p>Flex includes a set of easing functions + * in the mx.effects.easing package.</p> + * + * @param easingFunction Function that implements the easing equation. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function set easingFunction(value:Function):void + { + userEquation = value; + } + + /** + * Interrupt the tween, jump immediately to the end of the tween, + * and invoke the <code>onTweenEnd()</code> callback function. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function endTween():void + { + var event:ValueEvent = new ValueEvent(Tween.TWEEN_END); + var value:Object = getCurrentValue(duration); + + event.value = value; + + dispatchEvent(event); + + listener.onTweenEnd(value); + + // If tween has been added, id >= 0 + // but if duration = 0, this might not be the case. + if (id >= 0) { + Tween.removeTween(this); + id = -1; + } + } + + /** + * @private + * Returns true if the tween has ended. + */ + protected function update():Boolean + { + var tweenEnded:Boolean = false; + + // If user specified a minimum frames per second, we can't guarantee + // that we'll be called often enough to satisfy that request. + // However, we can avoid skipping over part of the animation. + // If this callback arrives too late, adjust the animation startTime, + // so that the animation starts up 'maxDelay' milliseconds + // after its last update. + /* + if (intervalTime - previousUpdateTime > maxDelay) + { + startTime += intervalTime - previousUpdateTime - maxDelay; + } + */ + previousUpdateTime = currentTime; + + if (_isPlaying || _doSeek) + { + + var elapsedTime:Number = currentTime - startTime; + _playheadTime = elapsedTime; + + var currentValue:Object = + getCurrentValue(elapsedTime); + + if (elapsedTime >= duration && !_doSeek) + { + endTween(); + tweenEnded = true; + } + else + { + if (!started) + { + var startEvent:ValueEvent = new ValueEvent(Tween.TWEEN_START); + dispatchEvent(startEvent); + started = true; + } + + var event:ValueEvent = + new ValueEvent(Tween.TWEEN_UPDATE); + event.value = currentValue; + + dispatchEvent(event); + + listener.onTweenUpdate(currentValue); + } + + _doSeek = false; + } + return tweenEnded; + } + + /** + * @private + */ + protected function getCurrentValue(currentTime:Number):Object + { + if (duration == 0) + { + return endValue; + } + + if (_invertValues) + currentTime = duration - currentTime; + + return userEquation(currentTime, startValue, + endValue - startValue, + duration); + } + + /** + * @private + */ + private function defaultEasingFunction(t:Number, b:Number, + c:Number, d:Number):Number + { + return c / 2 * (Math.sin(Math.PI * (t / d - 0.5)) + 1) + b; + } + + /** + * Advances the tween effect to the specified position. + * + * @param playheadTime The position, in milliseconds, between 0 + * and the value of the <code>duration</code> property. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function seek(playheadTime:Number):void + { + // Set value between 0 and duration + //playheadTime = Math.min(Math.max(playheadTime, 0), duration); + + var clockTime:Number = currentTime; + + // Reset the previous update time + previousUpdateTime = clockTime; + + // Reset the start time + startTime = clockTime - playheadTime; + + _doSeek = true; + + update(); + } + + /** + * Plays the effect in reverse, + * starting from the current position of the effect. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function reverse():void + { + if (_isPlaying) + { + _doReverse = false; + seek(duration - _playheadTime); + _invertValues = !_invertValues; + } + else + { + _doReverse = !_doReverse; + } + } + + /** + * Pauses the effect until you call the <code>resume()</code> method. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function pause():void + { + _isPlaying = false; + } + + /** + * Stops the tween, ending it without dispatching an event or calling + * the Tween's endFunction or <code>onTweenEnd()</code>. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function play():void + { + if (userEquation == null) + userEquation = defaultEasingFunction; + Tween.addTween(this); + } + + /** + * Stops the tween, ending it without dispatching an event or calling + * the Tween's endFunction or <code>onTweenEnd()</code>. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function stop():void + { + if (id >= 0) { + Tween.removeTween(this); + id = -1; + } + } + + /** + * Resumes the effect after it has been paused + * by a call to the <code>pause()</code> method. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function resume():void + { + _isPlaying = true; + + startTime = currentTime - _playheadTime; + if (_doReverse) + { + reverse(); + _doReverse = false; + } + } +} + +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/frameworks/as/projects/FlexJSUI/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSUI/defaults.css b/frameworks/as/projects/FlexJSUI/defaults.css index d084258..64a8ade 100644 --- a/frameworks/as/projects/FlexJSUI/defaults.css +++ b/frameworks/as/projects/FlexJSUI/defaults.css @@ -125,6 +125,8 @@ StringItemRenderer global { IStatesImpl: ClassReference("org.apache.flex.core.SimpleStatesImpl"); + IEffectTimer: ClassReference("org.apache.flex.utils.EffectTimer"); + effectTimerInterval: 10; } @media -flex-flash http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/frameworks/as/projects/FlexJSUI/src/FlexJSUIClasses.as ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSUI/src/FlexJSUIClasses.as b/frameworks/as/projects/FlexJSUI/src/FlexJSUIClasses.as index bc5823b..ccb7d22 100644 --- a/frameworks/as/projects/FlexJSUI/src/FlexJSUIClasses.as +++ b/frameworks/as/projects/FlexJSUI/src/FlexJSUIClasses.as @@ -96,6 +96,8 @@ internal class FlexJSUIClasses import org.apache.flex.core.FilledRectangle; FilledRectangle; import org.apache.flex.events.CustomEvent; CustomEvent; import org.apache.flex.events.Event; Event; + import org.apache.flex.events.ValueEvent; ValueEvent; + import org.apache.flex.utils.EffectTimer; EffectTimer; import org.apache.flex.utils.Timer; Timer; import org.apache.flex.utils.UIUtils; UIUtils; import org.apache.flex.core.SimpleStatesImpl; SimpleStatesImpl; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/frameworks/as/projects/FlexJSUI/src/org/apache/flex/core/IEffectTimer.as ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/core/IEffectTimer.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/core/IEffectTimer.as new file mode 100644 index 0000000..7affda2 --- /dev/null +++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/core/IEffectTimer.as @@ -0,0 +1,68 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.core +{ + import org.apache.flex.events.IEventDispatcher; + + /** + * The IEffectTimer interface is the basic interface for the + * class that updates effects like tweens. Different + * IEffectTimer implementations are tuned for various + * runtime environments like mobile, Flash, desktop, + * or even automated testing where the currentTime is + * controlled so the animation updates its target at + * predictable positions on the screen. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public interface IEffectTimer extends IEventDispatcher + { + /** + * Start getting update events. + * + * @return The current time. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + function start():int; + + /** + * Stop getting update events. Current time + * should theoretically keep advancing, but events + * are not dispatched so most implementations + * stop the platform timer (which can save battery + * on mobile devices) because they know that + * when start() is called they have a way of + * getting the updated current time. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + function stop():void; + + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/frameworks/as/projects/FlexJSUI/src/org/apache/flex/utils/EffectTimer.as ---------------------------------------------------------------------- diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/utils/EffectTimer.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/utils/EffectTimer.as new file mode 100644 index 0000000..43794de --- /dev/null +++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/utils/EffectTimer.as @@ -0,0 +1,95 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.utils +{ +import flash.events.EventDispatcher; +import flash.events.TimerEvent; +import flash.utils.Timer; +import flash.utils.getTimer; + +import org.apache.flex.core.IEffectTimer; +import org.apache.flex.core.ValuesManager; +import org.apache.flex.events.ValueEvent; + +//-------------------------------------- +// Events +//-------------------------------------- + +/** + * Dispatched as requested via the delay and + * repeat count parameters in the constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ +[Event(name="update", type="org.apache.flex.events.ValueEvent")] + +/** + * The Timer class dispatches events based on a delay + * and repeat count. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ +public class EffectTimer extends EventDispatcher implements IEffectTimer +{ + /** + * Constructor. + * + * @param delay The number of milliseconds + * to wait before dispatching the event. + * @param repeatCount The number of times to dispatch + * the event. If 0, keep dispatching forever. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function EffectTimer() + { + var interval:int = ValuesManager.valuesImpl.getValue(this, "effectTimerInterval"); + timer = new flash.utils.Timer(interval); + timer.addEventListener("timer", timerHandler); + } + + private var timer:flash.utils.Timer; + + public function start():int + { + timer.start(); + return getTimer(); + } + + public function stop():void + { + timer.stop(); + } + + private function timerHandler(event:flash.events.TimerEvent):void + { + event.updateAfterEvent(); + dispatchEvent(new ValueEvent("update", false, false, getTimer())); + } +} +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/frameworks/js/FlexJS/src/org/apache/flex/core/IEffectTimer.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/IEffectTimer.js b/frameworks/js/FlexJS/src/org/apache/flex/core/IEffectTimer.js new file mode 100644 index 0000000..5880318 --- /dev/null +++ b/frameworks/js/FlexJS/src/org/apache/flex/core/IEffectTimer.js @@ -0,0 +1,45 @@ +/** + * Licensed 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. + */ + +/** + * org.apache.flex.core.IEffectTimer + * + * @fileoverview + * + * @suppress {checkTypes} + */ + +goog.provide('org.apache.flex.core.IEffectTimer'); + +goog.require('org.apache.flex.events.IEventDispatcher'); + + + +/** + * @interface + * @extends {org.apache.flex.events.IEventDispatcher} + */ +org.apache.flex.core.IEffectTimer = function() { +}; + + +/** + * Metadata + * + * @type {Object.<string, Array.<Object>>} + */ +org.apache.flex.core.IEffectTimer.prototype.FLEXJS_CLASS_INFO = { + names: [{ name: 'IEffectTimer', qName: 'org.apache.flex.core.IEffectTimer'}], + interfaces: [org.apache.flex.events.IEventDispatcher] +}; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/9212e774/frameworks/js/FlexJS/src/org/apache/flex/utils/EffectTimer.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/utils/EffectTimer.js b/frameworks/js/FlexJS/src/org/apache/flex/utils/EffectTimer.js new file mode 100644 index 0000000..b7408d3 --- /dev/null +++ b/frameworks/js/FlexJS/src/org/apache/flex/utils/EffectTimer.js @@ -0,0 +1,92 @@ +/** + * Licensed 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. + */ + +goog.provide('org.apache.flex.utils.EffectTimer'); + +goog.require('org.apache.flex.core.IEffectTimer'); +goog.require('org.apache.flex.core.ValuesManager'); +goog.require('org.apache.flex.events.EventDispatcher'); + + + +/** + * @constructor + * @extends {org.apache.flex.events.EventDispatcher} + */ +org.apache.flex.utils.EffectTimer = function() { + goog.base(this); + + /** + * @protected + * @type {number} + */ + this.timerInterval = -1; + + /** + * @protected + * @type {number} + */ + this._delay = org.apache.flex.core.ValuesManager.valuesImpl.getValue(this, + 'effectTimerInterval'); + +}; +goog.inherits(org.apache.flex.utils.EffectTimer, + org.apache.flex.events.EventDispatcher); + + +/** + * Metadata + * + * @type {Object.<string, Array.<Object>>} + */ +org.apache.flex.utils.EffectTimer.prototype.FLEXJS_CLASS_INFO = + { names: [{ name: 'EffectTimer', + qName: 'org.apache.flex.utils.EffectTimer'}], + interfaces: [org.apache.flex.core.IEffectTimer] }; + + +/** + * @expose + * Stops the timer. + */ +org.apache.flex.utils.EffectTimer.prototype.stop = function() { + clearInterval(this.timerInterval); + this.timerInterval = -1; +}; + + +/** + * @expose + * Starts the timer. + * @return {number} The start time + */ +org.apache.flex.utils.EffectTimer.prototype.start = function() { + this.timerInterval = + setInterval(goog.bind(this.timerHandler, this), this._delay); + var d = new Date(); + return d.getTime(); +}; + + +/** + * @protected + */ +org.apache.flex.utils.EffectTimer.prototype.timerHandler = + function() { + var d = new Date(); + this.dispatchEvent(new org.apache.flex.events.ValueEvent('update', d.getTime())); + +}; + +
