SOURCE CODE: Animate Position in JavaScript

  
  
  
  
  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    Animate Position in JavaScript
    

      
SOURCE
    
  

  

  

    
In this example, the Uize.Fx.fadeStyle method of the Uize.Fx module is animating the position of a silver sphere. Click anywhere on the brushed metal square and the sphere will move to that position. How the sphere moves is decided by the curve(s) used by the Uize.Fx.fadeStyle method. You can change the curve(s) by clicking on one of the links in the "PRESETS" tab. When you choose a preset, a random target position will be chosen for the sphere, and the sphere will then animate to that position using the new curve(s). To animate the sphere again, click a preset link repeatedly, or click the "PREVIEW ANIMATION" button repeatedly, or click anywhere on the metal square. To fool around with the settings for a preset, switch over to the "PARAMS" tab to tweak values and click the "PREVIEW ANIMATION" button to preview changes.
  

  

  



Linear
  curve: null
  duration: 300

Picking Up Speed
  curve: Uize.Curve.easeInPow (4)
  duration: 500

Really Slow to Get Started
  curve: Uize.Curve.easeInPow (10)
  duration: 1000

Decelerating Towards the End
  curve: Uize.Curve.easeOutPow (4)
  duration: 500

Decelerating to a Crawl at the End
  curve: Uize.Curve.easeOutPow (10)
  duration: 3000

Starting Off Slow, Decelerating Towards the End
  curve: Uize.Curve.easeInOutPow (7)
  duration: 1000

Taking a Breather in the Middle
  curve: Uize.Curve.easeMiddlePow (4)
  duration: 800

Pull Back First
  curve: Uize.Curve.Rubber.easeInBack (2)
  duration: 600

Overshoot at the End
  curve: Uize.Curve.Rubber.easeOutBack (2)
  duration: 600

Pull Back First, Then Overshoot at the End
  curve: Uize.Curve.Rubber.easeInOutBack (3)
  duration: 800

Gentle Elastic Ease Out
  curve: Uize.Curve.Rubber.easeOutElastic (.3)
  duration: 1500

Super Elastic Ease Out
  curve: Uize.Curve.Rubber.easeOutElastic (.1)
  duration: 1500

Loose and Sloppy Elastic
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.Rubber.easeOutElastic (.2),
      Uize.Curve.Rubber.easeOutElastic (.1)
    )
  duration: 2800

Pull and Release
  curve::
    Uize.Curve.Mod.repeat (
      [
        Uize.Curve.Mod.band (
          Uize.Curve.easeOutPow (5),
          1,
          0,
          -.3,
          0
        ),
        Uize.Curve.Rubber.easeOutElastic (.1)
      ],
      2
    )
  duration: 2200

Muffled Bounce
  curve: Uize.Curve.Rubber.easeOutBounce (3,-4,1.7)
  duration: 800

More Bouncy
  curve: Uize.Curve.Rubber.easeOutBounce (4,1.5)
  duration: 1200

Super Bouncy
  curve: Uize.Curve.Rubber.easeOutBounce (9,4,1.25)
  duration: 2000

Coin Settle Effect
  curve::
    Uize.Curve.Mod.bend (
      Uize.Curve.Mod.rotate (
        Uize.Curve.Mod.multiply (
          Uize.Curve.easeInPow (3),
          Uize.Curve.Mod.repeat (
            Uize.Curve.easeInCircular (),
            45,
            0,
            true
          )
        )
      ),
      2
    )
  duration: 4000

Decelerate Into Bounce
  curve::
    Uize.Curve.Mod.repeat (
      [
        Uize.Curve.easeInSweetPow (1/5),
        Uize.Curve.Rubber.easeOutBounce (4,2)
      ],
      2,
      1
    )
  duration: 1300

Ease Slowly Into Short Bounce
  curve::
    Uize.Curve.Mod.bend (
      Uize.Curve.Rubber.easeOutBounce (10,-2,2,2.5),
      Uize.Curve.easeInOutPow (2)
    )
  duration: 1500

Third Time's a Charm
  curve::
    Uize.Curve.Rubber.easeInBounce (
      3,
      1.3,
      1,
      Uize.Curve.easeInCircular ()
    )
  duration: 2000

Quickly to Middle, Pull Back, Then Quickly to End
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.easeInSweetPow (1/6),
      Uize.Curve.easeOutSweetPow (1/12),
      Uize.Curve.line (0,1)
    )
  duration: 1100

Stop and Go, Stop and Go, Stop and Go
  curve::
    Uize.Curve.Mod.repeat (
      Uize.Curve.easeInOutPow (3),
      3,
      1
    )
  duration: 1200

Wobbling on its Way
  curve::
    Uize.Curve.Mod.redraw (
      Uize.Curve.easeInOutPow (4),
      12,
      Uize.Curve.Rubber.easeInOutBack (4)
    )
  duration: 1700

Bouncing on its Way
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.easeInPow (3),
      Uize.Curve.easeOutPow (1.5),
      Uize.Curve.Rubber.easeOutBounce (10,4,1.1)
    )
  duration: 3000

Hopping on its Way
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.Mod.band (1,1,0,.8,0),
      Uize.Curve.Mod.band (1,1,0,.8,1),
      Uize.Curve.Rubber.easeOutBounce (
        6,
        Uize.Curve.Mod.band (1,0,0),
        1,
        -2
      )
    )
  duration: 2500

Horizontal First, Then Vertical
  curve::
    {
      left:Uize.Curve.easeOutPow (10),
      top:Uize.Curve.easeInPow (10)
    }
  duration: 500

Vertical First, Then Horizontal
  curve::
    {
      left:Uize.Curve.easeInPow (10),
      top:Uize.Curve.easeOutPow (10)
    }
  duration: 500

Elastic Horizontal First, Then Vertical
  curve::
    {
      left:
        Uize.Curve.Rubber.easeOutElastic (.5,2),
      top:
        Uize.Curve.Rubber.easeInElastic (.5,1.5)
    }
  duration: 750

Elastic Vertical First, Then Horizontal
  curve::
    {
      left:
        Uize.Curve.Rubber.easeInElastic (.5,1.5),
      top:
        Uize.Curve.Rubber.easeOutElastic (.5,2)
    }
  duration: 750

Snappy Elastic Vertical First, Then Horizontal
  curve::
    {
      left:
        Uize.Curve.Rubber.easeInElastic (1.2),
      top:
        Uize.Curve.Rubber.easeInOutElastic (.5)
    }
  duration: 500

Waddling Along
  curve::
    {
      left:
        Uize.Curve.Mod.repeat (
          Uize.Curve.easeInOutPow (3),
          3,
          1
        ),
      top:
        Uize.Curve.Mod.repeat (
          Uize.Curve.easeInOutPow (4),
          5,
          1
        )
    }
  duration: 1200

Spastic Side-to-side Wobbling
  curve::
    {
      left:
        Uize.Curve.Mod.redraw (
          Uize.Curve.easeInOutPow (4),
          12,
          Uize.Curve.Rubber.easeInOutBack (4)
        ),
      top:
        Uize.Curve.Mod.redraw (
          Uize.Curve.easeInOutPow (5),
          14,
          Uize.Curve.Rubber.easeInOutBack (4)
        )
    }
  duration: 1700

Eccentric Elasticity Pounce
  curve::
    {
      left:
        Uize.Curve.easeOutPow (10),
      top:
        Uize.Curve.Rubber.easeOutElastic ()
    }
  duration: 500

Crazy Fly Buzzing Around
  curve::
    {
      left:
        Uize.Curve.Rubber.easeOutBounce (4,3,1.5),
      top:
        Uize.Curve.Rubber.easeOutBounce (5,4,1)
    }
  duration: 750

Diagonal Staircase
  curve::
    {
      left:
        Uize.Curve.Mod.repeat (
          Uize.Curve.Mod.band (1,.4,0),
          4,
          1
        ),
      top:
        Uize.Curve.Mod.repeat (
          Uize.Curve.Mod.band (1,.4,1),
          4,
          1
        )
    }
  duration: 1400

Bouncing Along Diagonal Staircase
  curve::
    {
      left:Uize.Curve.easeOutPow (3),
      top:
        Uize.Curve.Mod.blend (
          Uize.Curve.easeInPow (3),
          Uize.Curve.easeOutPow (5),
          Uize.Curve.Rubber.easeOutBounce (10,3,1.4)
        )
    }
  duration: 3000

Pinball Bouncing Off the Bumpers
  curve::
    {
      left:
        Uize.Curve.Mod.blend (
          Uize.Curve.easeInPow (3),
          Uize.Curve.easeOutPow (5),
          Uize.Curve.Rubber.easeOutBounce (10,3,1.5)
        ),
      top:
        Uize.Curve.Mod.blend (
          Uize.Curve.easeInPow (3),
          Uize.Curve.easeOutPow (5),
          Uize.Curve.Rubber.easeOutBounce (10,3,.5)
        )
    }
  duration: 3000

Twist Around and Turn Back
  curve::
    {
      left:Uize.Curve.Rubber.easeOutBack (4),
      top:Uize.Curve.Rubber.easeInBack (4)
    }
  duration: 700

Double Twist Around
  curve::
    {
      left:Uize.Curve.Rubber.easeMiddleBack (5),
      top:Uize.Curve.Rubber.easeInOutBack (5)
    }
  duration: 1200

Ease Into Accelerating Twirls
  curve::
    {
      left:
        Uize.Curve.Mod.bend (
          Uize.Curve.Mod.blend (
            Uize.Curve.Mod.repeat (
              Uize.Curve.easeInOutCircular (),
              5,
              0,
              true,
              false
            ),
            1,
            .5
          ),
          3
        ),
      top:
        Uize.Curve.Mod.bend (
          Uize.Curve.Mod.blend (
            Uize.Curve.Mod.repeat (
              Uize.Curve.easeInOutCircular (),
              5,
              0,
              true,
              false
            ),
            1,
            .5
          ),
          4
        )
    }
  duration: 1200