Stupid Tween Animator

| Comments

I guess I should introduce this small library to the world. Meet this stupid tween animator, clench, quoting from its readme,

Clench programmatically animate transition effect for DOM element using CSS3 transition features.

This blog is powered by ender’s libraries, so I think it’s only natural to just use these instead of jQuery’s. And actually, ender has animation library called morpehus, which is currently used by picto.

So why bothered re-inventing the wheel? Well, while morpheus is good, it’s using requestAnimationFrame to render animation, and using css properties as well, I’m running into problem with chrome cannary and internet explorer, picto animate a single screen-covering div element to emulate modal widget, this div element supposed to be animated in fade in mode, from whole transparent to semi dimmed transparent, but the case with ie and chrome cannary is different, this div keep pulsating back and forth without end. I tried to investigate this but end up getting confused since it looks like morpheus missed the end value for specified properties so it keeps animating to reach the value.

So I come up with something that make use native browser’s transition effect while still controllable via javascript. This is different from morpheus in which instead of slicing the values into step frames and animate it using requestAnimationFrame, clench just let you specify the desired end value and feed that to css’s -*-transition properties, letting the browser to do all the hardwork.

API

Clench object is a wrapper for DOM element/node, to construct clench object, one can specify node’s id or the node itself. For example:

1
2
3
4
5
6
var rect  = clench('rectangle1');

// Or let say we already select the nodes with ender / jQuery,
// we can pass the node directly to clench
var nodes = $('.circle');
var circle = clench(nodes[0]);

As of currently, clench support move, i.e. transition from one position to another, resizing, opacity, and color change. The base animation method is called animate and used like this:

1
2
3
4
5
6
7
circle.animate({
  duration: '400ms',
  top: '+200',
  ease: [0, 0, 1, 1]
}).then(function () {
  console.log('I just moved the circle');
});

Not really useful, but there’s some points you can get from the snippet before. First, yes, animate takes object as parameter. The only mandatory field over there is duration, you can also specify the time unit like ms (millisecond) or s for second. Second, for numeric value properties, you can specify either constant value, or relative value just like my example. Above +200 means that add current value with 200, it can also negative value for a substraction. To distinguish relative value from constant, it should be specified in string format.

As you may expect, clench animation is chainable, you can create transition sequence with chained call to animate. Above I call then function which execute arbitrary function after the animation finished.

As for ease field, it’s used to specify bezier curve values for css’s cubic-bezier function for easing the transition. The [0, 0, 1, 1] above is linear which means no easing, also some specific values can be used to create bouncing effect. MDN has more information about cubic-bezier here, and check this site to test some bezier curves.

There’s a shortened version of animate for resize, move, and opacity, each called respectively and can be used as follow:

1
2
3
rect.resize(640, 480, '350ms') /*width x height*/
  .move(200, 100, '500ms')     /*X,Y*/
  .opacity(0.6, '200ms');

Here be some demo:

Comments