Tween Example with a Curve and Tangent

Using the tween plugin for animating arbitrary values. In this example we're drawing a sine wave on a canvas using the jQuery curve plugin. Additionally, a little ship is being animated along the curve using CSS.

by secretgspot

HTML

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

CSS

div {
    position: relative;
    display: inline-block;
    border: 2px solid black;
    font-size: 0;
}
img {
    position: absolute;
}

JavaScript

var $canvas = $('canvas:first');
var ctx = $canvas[0].getContext('2d');
var height = $canvas[0].height;
var width = $canvas[0].width;

var $img = $('img:first');
var hoff = $img.height() / 2;
var woff = $img.width() / 2;

// Draw a sine wave on a canvas
$canvas.tween(function(now, fx) {
    var t = fx.pos; // current time
    var p = $.curve.sine(t, {
        x: 0,
        y: height / 2,
        amp: height / 2,
        wavelength: width
    });
    var x = p[0];
    var y = p[1];

    $img.css({
        top: (y - hoff) + 'px',
        left: (x - woff) + 'px',
        rotate: (p[2] + Math.PI / 2) + 'rad'
    });

    // start the path
    if (fx.pos === 0) {
        ctx.moveTo(x, y);
        ctx.beginPath();
    }

    // draw a line
    ctx.lineTo(x, y);
    ctx.stroke();
}, 3000);