morphr
v0.7.8
Published
Morphr - morphing numerical object values in a given time interval
Downloads
20
Maintainers
Readme
Morphr
Morphr is a tiny and lightweight javascript class for morphing numerical values of
arbitrary, mostly plain javascript objects in a given time interval dt
along a given range dval
.
Most often you will want to use it for animation. So it works excellently in combination with Html canvas.
Example
(animated gif)
see example
<h1>Morphr Example</h1>
<canvas id="c" width="401" height="301"></canvas>
<script src='./g2.js'></script>
<script src='./morphr.js'></script>
<script>
// object value handlers ...
function value(obj,prop,dval) {
var val0 = obj[prop];
return function(q) { obj[prop] = val0 + q*dval; };
}
// render to canvas via g2 ..
function render() {
g2().clr()
.rec(rec.x,rec.y,rec.b,rec.h,{ls:"maroon",lw:2,fs:"transparent",ld:[4,4]})
.exe(document.getElementById("c").getContext("2d"));
}
var rec = {x:100,y:100,b:20,h:100}, // plain javascript rectangle object ...
morphr = Morphr.create(4,0,"sinoid") // create and configure Morphr object ...
.register(value(rec,"x",100)) // move along x-axis by 100 in 4 s.
.register(value(rec,"y",50)) // move along y-axis by 50 in 4 s.
.register(value(rec,"b",100)) // increase width by 100 in 4 s.
.register(value(rec,"h",-75)) // decrease height by 75 in 4 s.
.register(render) // render to canvas.
.start();
</script>
Sequential morphing is easily achieved via multiple Morphr objects. DOM element attributes are morphable as well.
see sequential
Here is a more complex canvas based Crank-Rocker animation using a g2 command queue for vector graphics.
Maybe you want to learn a bit more about Crank-Rockers.
API Reference
Morphr
is a tiny class for simultaneously morphing numerical object values in a given time interval.
Use case is most often parameter animation of plain javascript objects. So it works excellently with
canvas. Morphr
depends on requestAnimationFrame
.
Do not use new Morphr()
, call Morphr.create()
instead for creating instances.
- Morphr
- static
- .create([dt], [t0], [fn]) ⇒ object
- instance
- .register(hdl) ⇒ object
- .start() ⇒ object
- static
Morphr.create([dt], [t0], [fn]) ⇒ object
Create a Morphr
instance by start time, duration and timing function for morphing. A couple of predefined
timing functions are available [s. VDI2143]:
linear
quadratic
sinoid
poly5
Kind: static method of Morphr
Returns: object - Morphr
instance.
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [dt] | float | 2 | Duration in [s]. |
| [t0] | float | 0 | Start time in [s] relative to first time call of start
method. |
| [fn] | function | string | "linear" | Timing function as function
object or name of predefined function. |
morphr.register(hdl) ⇒ object
Register morphing handler function.
Kind: instance method of Morphr
Returns: object - this.
| Param | Type | Description |
| --- | --- | --- |
| hdl | function | Callback function hdl(q){}
, where q
is the - via fn
- normalized time or the boolean value false
to reset for a new start. |
morphr.start() ⇒ object
Start morphing process.
Kind: instance method of Morphr
Returns: object - this.
#Change Log
All notable changes to this project will be documented here. This project adheres to Semantic Versioning.