Tiny tweening library
Tiny, because it's heavily based on gre/bezier-easing. What woosh does is provide a controller with which you can instantiate animation objects and start the animation. Not much magic, bot does the job with minimal code.
var canvas = document.getElementById("viewport")
, ctx = canvas.getContext("2d")
var animation = woosh({
delay: 3000,
duration: 2000,
loop: true,
ease: [0.25, 0.1, 0.0, 1.0]
})
.listen("start", function (){
console.log("Hey ho, let's go!")
})
.listen("stop", function (){
console.log("Halted!")
})
.listen("end", function (){
console.log("Done!")
})
.start(function moveRectangle( p ){ // p move from 0 to 1
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = "hsl(" + Math.round(255 * p) + ",80%,50%)"
var w = 50
var h = 50 + p * (canvas.height - 50)
ctx.fillRect((canvas.width - w) * p, (canvas.height - h) * 0.5, w, h)
})
var box = document.getElementById("box")
, box2 = document.getElementById("box2")
var propertyAnimation = woosh({
duration: 2000,
loop: 10,
ease: [0.25, 0.1, 0.0, 1.0],
context: box
})
.to(box, {
left: "500px",
top: "100px"
})
.listen("cycle", function( cycleCount ){
this.textContent = 10-cycleCount
})
var propertyAnimation2 = woosh({
duration: 2000,
loop: true,
ease: [0.25, 0.1, 0.0, 1.0],
context: box2
})
.to(box2, {
left: 0,
top: -100
})
Set the easing with an easing alias. See them down below.
Define a custom easing function.
This function receives the current animation progress and should return a modified value for it.
These numbers will be passed to BezierEasing
.
They are the css equivalent of a bezier easing function's arguments.
Set multiple options regarding the tween.
The duration of the animation.
Delays the animation in milliseconds.
A boolean true indicates an infinite loop. A number indicates how many times the animation should loop.
Sets the easing function for the animation.
A context the rendering function (passed to .start(Function render)
) will be called with.
Kick off the animation, and use the provided rendering function to do stuff.
The rendering function receives one parameter which travels from 0 to 1. From the start of the animation to the end it indicates the progress.
Stops the animation. Starting again will start from all over again.
Property animation.
In this case .start()
is called automatically.
subject
is the host on properties will be modified.
to
is a hash of end values.
Register a callback for an event.
Unregister a listener from an event.
Listen to an event only once.
Triggered right before the first animation loop.
Triggered when .stop()
is called.
Triggered right after the last render happened.
Triggered on each cycle if the animation is looping.
- "ease"
- "linear"
- "ease-in"
- "ease-out"
- "elastic"
Equations are adapted from Thomas Fuchs' Scripty2. Based on Easing Equations (c) 2003 Robert Penner, all rights reserved. This work is subject to terms. TERMS OF USE - EASING EQUATIONS Open source under the BSD License. Easing Equations (c) 2003 Robert Penner, all rights reserved.
- "swingFromTo"
- "swingFrom"
- "swingTo"
- "bounce"
- "bouncePast"