Created
August 3, 2016 16:21
-
-
Save sabitertan/0123ecea9ced66dccaa6abfa52da36bc to your computer and use it in GitHub Desktop.
TinyAnimate simplified with one animation (easing.linear)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var TinyAnimate = {}; | |
| TinyAnimate.animate = function(from, to, duration, update, done) { | |
| // Early bail out if called incorrectly | |
| if (typeof from !== 'number' || | |
| typeof to !== 'number' || | |
| typeof duration !== 'number' || | |
| typeof update !== 'function') | |
| return; | |
| // easing.linear look https://github.com/branneman/TinyAnimate/blob/master/src/TinyAnimate.js for others | |
| var easing = function(t, b, c, d){return c * t / d + b;} | |
| // Create mock done() function if necessary | |
| if (typeof done !== 'function') { | |
| done = function() {}; | |
| } | |
| // Pick implementation (requestAnimationFrame | setTimeout) | |
| var rAF = window.requestAnimationFrame || function(callback) { | |
| window.setTimeout(callback, 1000 / 60); | |
| }; | |
| // Animation loop | |
| var change = to - from; | |
| function loop(timestamp) { | |
| var time = (timestamp || +new Date()) - start; | |
| update(easing(time, from, change, duration)); | |
| if (time >= duration) { | |
| update(to); | |
| done(); | |
| } else { | |
| rAF(loop); | |
| } | |
| } | |
| update(from); | |
| // Start animation loop | |
| var start = window.performance && window.performance.now ? window.performance.now() : +new Date(); | |
| rAF(loop); | |
| }; | |
| TinyAnimate.animateCSS = function(element, property, unit, from, to, duration, done) { | |
| var update = function(value) { | |
| element.style[property] = value + unit; | |
| }; | |
| TinyAnimate.animate(from, to, duration, update, done); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment