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

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.

0.7.0 - 2016-03-27

First Commit to Github