Animation Examples

From FHTML

Jump to: navigation, search
  • Here are some examples of special kinds of animation you can do with FluidHtml:

Contents

1 Gradients

  • Gradients provide subtle interactive feedback in a user interface. If you could have animated gradients before, wouldn't you have done so? It's easy in FluidHtml.

1.1 Example 1

<style type="xml/fhtmlassets" >
    <background
        name="gradient5" type="gradient" fillType="radial"
        colors="[0, #FFFFFF, 0, #FFFFFF]"
        alphas="[1, 1, 1, 1]" ratios="[.2, .3, .4, 1]"
        rotation="45" width="1" height="1" spreadMethod="reflect"
        focalPointRatio=".75"
    />
    <animation name="gradAnim" duration="4" easing="inOutExpo" loop="true" >
        <frame>
             <action property="background.rotation" end="360" />
             <action property="background.width" end=".75" />
             <action property="background.height" end=".75" />
             <action property="background.colors[2]" end="#FF0000" />
             <action property="background.colors[3]" end="#000000" />
        </frame>
        <frame>
             <action property="background.rotation" end="45" />
             <action property="background.width" end="1" />
             <action property="background.height" end="1" />
             <action property="background.colors[2]" end="#000000" />
        </frame>
        <frame>
             <action property="background.rotation" end="270" />
             <action property="background.width" end=".15" />
             <action property="background.height" end=".15" />
             <action property="background.colors[3]" end="#FFFFFF" />
        </frame>
        <frame>
             <action property="background.rotation" end="45" />
             <action property="background.width" end="1" />
             <action property="background.height" end="1" />
             <action property="background.colors[3]" end="#FF0000" />
        </frame>
 </animation>
</style>
View Example View Source

1.2 Example 2

  • This one produces an interesting grooved gradient.

<style type="text/css">
    #test {
        x:center;
        y:center;
        width:200;
        height:200;
        border:none;
        background:angle;
        border-radius:20px;
        box-shadow:8px 8px 8px #333333;
    }
</style>
<style type="xml/fhtmlassets" >
    <background type="gradient" name="angle" fillType="linear"
        colors="[#000000, #990000]" alphas="[1,1]" ratios="[0,1]"
        width="5" height="5" rotation="-45" spreadMethod="reflect"
        focalPointRatio="-1" percentageInput="false" />
    <animation name="gradAnim" duration="3" easing="inOutSine" >
        <frame>
             <action property="background.colors[0]" end="#FFFFFF" />
        </frame>
        <frame>
             <action property="background.colors[1]" end="#CCCCCC" />
        </frame>
        <frame>
             <action property="background.colors[0]" end="#000000" />
        </frame>
        <frame>
             <action property="background.colors[0]" end="#990000" />
        </frame>
 </animation>
View Example View Source

1.3 Example 3

  • Here we combine gradients and interactivity.

<style type="text/css">
    #test {
        x:center;
        y:center;
        width:200;
        height:200;
        border:none;
        background:simpleGradient;
        border-radius:20px;
        box-shadow:8px 8px 16px #333333;
        onmouseover:gotoAndStop('gradAnim', 0);
        onmouseout:gotoAndStop('gradAnim', 1);
        onmousedown:gotoAndStop('gradAnim', 2);
        onmouseup:gotoAndStop('gradAnim', 3);
    }
</style>
<style type="xml/fhtmlassets" >
    <background type="gradient" name="simpleGradient" fillType="linear"
        colors="[#000000, #666666, #999999]" alphas="[1,1,1]"
        ratios="[0, .66, 1]" width="1" height="1"
        rotation="90" spreadMethod="pad" focalPointRatio="0" />

    <animation name="gradAnim" >
        <frame>
             <action property="background.colors[1]" end="#CCCCCC" />
        </frame>
        <frame>
             <action property="background.colors[1]" end="#666666" />
        </frame>
        <frame>
             <action property="background.colors[1]" end="#FFFFFF" />
        </frame>
        <frame>
             <action property="background.colors[1]" end="#666666" />
        </frame>
 </animation>
View Example View Source

2 Filters

2.1 Example 1

  • This example animates a pixelBender filter.

<style type="xml/fhtmlassets" >
    <bitmap name="metal" src="images/metal.jpg" />
    <background type="bitmap" name="metal" bitmap="metal" repeat="repeat" />

    <pixelbender name="warp" src="assets/pbf/warp.pbj" />

    <filter name="myPBF">
        <item name="pb" filterType="pixelBender"
           data="warp" verticalAxis="180"
       />
        <item filterType="dropShadow" distance="30"
           angle="-25" blurX="20" blurY="20" color="#000000"
           alpha=".75" strength="1" quality="1"
       />
    </filter>
    <animation name="genie" duration=".2" >
        <frame easing="inSine" >
                <action property="filter.pb.control2" end="150" />
                <action property="filter.pb.anchor2" end="150" />
        </frame>
        <frame easing="linear" >
                <action property="filter.pb.control1" end="152" />
                <action property="filter.pb.anchor1" end="123" />
        </frame>
        <frame easing="linear" >
                <action property="y" end="800" />
                <action property="h" end="+=500" />
        </frame>
    </animation>
</style>
View Example View Source

2.2 Example 2

  • Here's another that animates a dropShadow:

<style type="xml/fhtmlassets" >
    <animation name="filterAnim" >
        <frame easing="inSine" duration="10" >
            <action property="filter[0].angle" end="1200" />
        </frame>
    </animation>
</style>
View Example View Source

2.3 Example 3

  • Another pixelBender.

<style type="xml/fhtmlassets" >
    <bitmap name="metal" src="images/metal.jpg" />
    <background type="bitmap" name="metal" bitmap="metal" repeat="repeat" />

    <pixelbender name="spotlight" src="assets/pbf/simplePointLight.pbj" />

    <filter name="myPBF">
        <item name="pb" filterType="pixelBender"
           data="spotlight" center="250"
       />
        <item name="dropShadow" filterType="dropShadow" distance="30"
           angle="270" blurX="20" blurY="20" color="#000000"
           alpha=".75" strength="1" quality="1"
       />
    </filter>
    <animation name="myAnim" duration="4" >
        <frame>
            <action property="filter.pb.attenuationDelta" end="600" />
            <action property="filter.pb.attenuationSpeed" end="2" />
            <action property="filter.pb.attenuationDecay" end="2" />
        </frame>
        <frame>
            <action property="filter.pb.attenuationDelta" end="175" />
            <action property="filter.pb.attenuationSpeed" end="0" />
            <action property="filter.pb.attenuationDecay" end="0" />        
        </frame>
    </animation>
</style>
View Example View Source


3 Coordinates

3.1 Example 1

  • FluidHtml lets you animate coordinates (x, y, width, height, right or bottom) of an element using coordinate rules. See the comments in the example below to learn how they work.

<style type="xml/fhtmlassets" >

    <animation name="coordAnim" easing="inOutExpo" duration=".5"  >
        <frame>
            <!--Move x so that right edge of element is aligned
           to the right edge of parent minus 20px. This will
           work no matter how wide the element is-->
            <action property="x" end="right|-20" />
        </frame>
        <frame>
            <!--Do the same for y-->
            <action property="y" end="bottom|-20" />
        </frame>
        <frame>
            <!--Now that we're aligned to the right,
           changing the width will cause the element to
           expand to the left. Tell it to stop when it's    
           20px from the left edge of parent element-->
            <action property="width" end="100%|-40" />
        </frame>
        <frame>
            <!--Now that we're aligned to the bottom,
               increasing height will cause element to
               expand upward. -->
            <action property="height" end="100%|-40" />
        </frame>
        <frame>
            <!--Play around some more. It's hard to mess up-->
            <action property="width" end="10%" />
            <action property="height" end="10%" />
        </frame>
        <frame>
            <action property="x" end="20" />
            <action property="y" end="20" />
        </frame>
        <frame name="over">
            <action property="x" end="100%|-20" />
            <action property="width" end="25%" />
            <action property="y" end="0%|20" />
            <action property="height" end="25%" />
        </frame>
        <frame>
            <action property="width" end="100%|-40" />
            <action property="height" end="100%|-40" />
        </frame>
    </animation>
</style>
View Example View Source

3.2 Example 2

  • Animating using dynamic values from JavaScript

<style type="xml/fhtmlassets">
    <animation name="coordAnim" easing="inOutExpo" duration=".5">
        <frame>
            <action property="$x" end="javascript:getMyX()" />
            <action property="$y" end="javascript:getMyY()" />
        </frame>
    </animation>
</style>
<script type="text/javascript" fhtmlignore="false">
     function getMyX(){
        return stage.stageWidth * Math.random();
     }
     function getMyY(){
        return stage.stageHeight * Math.random();
     }
     function playAnim(){
        $('test').gotoAndPlay('coordAnim', 0)
     }
     if (window.isFHTML){
        setInterval(playAnim,1000);
     }
</script>
View Example View Source

4 Transformations

Retrieved from "http://www.fluidhtml.com/docs/index.php/Animation_Examples"

Contents

General
Javascript
Elements
Effects
Animation
Pages
Personal tools