Apache Flex 4.16.0 API Reference | All Packages | All Classes | Index | Frames No Frames |
Bounce

Package | spark.effects.easing
Class | public class Bounce
Inheritance | Bounce Object
Implements | IEaser

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The Bounce class implements easing functionality simulating gravity pulling on and bouncing the target object. The movement of the effect target accelerates toward the end value, and then bounces against the end value several times.

View the examples

Public Methods

| Method | Defined By
--- | --- | ---
|  | Bounce() Constructor. | Bounce
|  | 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. | Bounce

Constructor Detail

Bounce | () | Constructor

`public function Bounce()`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Constructor.

Method Detail

ease | () | method

`public function ease(fraction:Number):Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Takes the fraction representing the elapsed duration of an animation (a value between 0.0 to 1.0) and returns a new elapsed value. This value is used to calculate animated property values. By changing the value of the elapsed fraction, you effectively change the animation of the property.

Parameters

| `fraction:Number` — The elapsed fraction of an animation, from 0.0 to 1.0.

Returns

| `Number` — The eased value for the elapsed time. Typically, this value should be constrained to lie between 0.0 and 1.0, although it is possible to return values outside of this range. Note that the results of returning such values are undefined, and depend on what kind of effects are using this eased value. For example, an object moving in a linear fashion can have positions calculated outside of its start and end point without a problem, but other value types (such as color) may not result in desired effects if they use time values that cause them to surpass their endpoint values.

Examples
BounceElasticEffectExample.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:Bounce and s:Elastic 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:Bounce id="bounceEasing"/>
            <s:Elastic id="elasticEasing"/>
            <s:Move id="moveRight"
                target="{myImage}"
                xBy="500"
                duration="2000"
                easer="{elasticEasing}"/>
            <s:Move id="moveLeft"
                target="{myImage}"
                xBy="-500"
                duration="2000"
                easer="{bounceEasing}"/>
        </fx:Declarations>

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

Sun Mar 5 2017, 03:42 PM +11:00