Bezier Curve Demo - using jquery tween

by Ben Clayton

HTML

<script src="http://assets.heygrady.com/curve/jquery.transform-0.9.3.min.js"></script>
<script src="http://assets.heygrady.com/curve/jquery.curve.js"></script>
<script src="//assets.heygrady.com/curve/jquery.tween.js"></script>
<div id="map">
    <img src="http://www.digissentialdesign.com/images/rocket.png" width="40" />
 </div>

<button id="move33">33%</button>
<button id="move50">50%</button>
<button id="move66">66%</button>
<button id="move75">75%</button>
<button id="move100">100%</button><br/>

<button id="move33r">rel33%</button>
<button id="move50r">rel50%</button>
<button id="move66r">rel66%</button>
<button id="move75r">rel75%</button>
<button id="move100r">rel100%</button><br/>

<div id="debug"></div>
<div id="debug2"></div>

CSS

#map {
    height: 200px;
    width: 400px;
    border: 2px solid black;
    position: relative;
}
#map img {
    position: absolute;
    opacity:0;
}

JavaScript

// requires jquery 1.6.2
;(function($) {
    // find our elements
    var $div = $('#map');
    var $ship = $div.find('img');
    var $debug = $("#debug");
    var $debug2 = $("#debug2");
       
    var moveit = function(xst,xend) { 
        c=0;
        tween($.curve.bezier, {
            x: 0,
            y: 100,
            xst:xst,
            xend:xend,
            dur:3000 *Math.abs(xend-xst),
            points: [
                [0, 50],
                [20, 80],
                [80, 80],
                [100, 50]
            ]
        });
    };
    // Bezier Curve
    var cur=0;
    $('#move33').click(function(e) {
        e.preventDefault();
        moveit(0,0.33);
        cur=0.33
    });
    $('#move50').click(function(e) {
        e.preventDefault();
        moveit(0,0.5);
        cur=0.5
    });
    $('#move66').click(function(e) {
        e.preventDefault();
        moveit(0,0.66);
        cur=0.66
    });
    $('#move75').click(function(e) {
        e.preventDefault();
        moveit(0,0.75);
         cur=0.75
   });
    $('#move100').click(function(e) {
        e.preventDefault();
        moveit(0,1);
        cur=1
    });
    //=======================
    $('#move33r').click(function(e) {
        e.preventDefault();
        moveit(cur,0.33);
        cur=.33
    });
    $('#move50r').click(function(e) {
        e.preventDefault();
        moveit(cur,0.5);
        cur=.5
    });
    $('#move66r').click(function(e) {
        e.preventDefault();
        moveit(cur,0.66);
        cur=0.66
    });
    $('#move75r').click(function(e) {
        e.preventDefault();
        moveit(cur,0.75);
         cur=0.75
   });
    $('#move100r').click(function(e) {
        e.preventDefault();
        moveit(cur,1);
        cur=1
    });

    
    
    
    // some useful variables
   var halfPI = (Math.PI / 2);
    
    // make it so
    function tween(curve, opts) {
        $ship.tween(function(now, fx) {
            // find the element
            var $elem =...