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.

GitCDN

Use the link https://gitcdn.xyz/repo/goessner/g2/master/morphr.min.js for getting the latest commit as a raw file.

In HTML use ...

<script src="https://gitcdn.xyz/repo/goessner/morphr/master/morphr.min.js"></script>

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.

morphr.register(hdl) ⇒ object

Register morphing handler function.

Kind: instance method of Morphr
Returns: object - this.

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