├── LICENSE ├── README.md └── metronome.js /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014, Vox Media, Inc. All rights reserved. 2 | 3 | BSD license 4 | 5 | Redistribution and use in source and binary forms, with or without modification, 6 | are permitted provided that the following conditions are met: 7 | 8 | Redistributions of source code must retain the above copyright notice, this list 9 | of conditions and the following disclaimer. 10 | 11 | Redistributions in binary form must reproduce the above copyright notice, this 12 | list of conditions and the following disclaimer in the documentation and/or other 13 | materials provided with the distribution. 14 | 15 | Neither the name of the copyright holder nor the names of its contributors may be 16 | used to endorse or promote products derived from this software without specific 17 | prior written permission. 18 | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 20 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 21 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. 22 | IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, 23 | INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, 24 | BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 25 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF 26 | LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE 27 | OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 28 | OF THE POSSIBILITY OF SUCH DAMAGE. 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ## Metronome 3 | 4 | A friendlier front-end to requestAnimationFrame-based animations. 5 | 6 | ## Documentation 7 | 8 | This library provides two main methods for animation via requestAnimationFrame: a frame-based 9 | method, and a duration-based method. 10 | 11 | ### Frame-Based Animations 12 | 13 | A frame-based animation specifies an explicit number of frames that the animation should take. The animation will use exactly that quantity of frames, regardless of the specific framerate that the browser is currently running. 14 | 15 | Advantages of this method include a visually smoother animation, as essentially no frames are "skipped". 16 | 17 | ### Duration-Based Animations 18 | 19 | A duration-based animation specifies an exact amount of time (in milliseconds) that the animation should take. In this scenario, regardless of the framerate of the browser, the animation will conclude in an exact amount of time. 20 | 21 | Advantages of this method include a chronologically more predictable process, essentially "skipping" frames in order to finish the animation in the time specified. This is important if duration-based animations are chained together, or if the *quickness* of the animation is more important than the smoothness of an animation (such as a lightning bolt flash, for example). 22 | 23 | #### Usage 24 | 25 | ```javascript 26 | var path = fetchPreparedSVGPath(); 27 | var length = path.getTotalLength(); 28 | 29 | path.style.strokeDasharray = length + ' ' + length; 30 | path.style.strokeDashoffset = length; 31 | 32 | // frame based animation 33 | Metronome({ 34 | type: 'frame', 35 | frames: 120, 36 | easing: 'easeInOutQuad', 37 | draw: function(handle, progress) { 38 | path.style.strokeDashoffset = Math.floor(length * (1 - progress)); 39 | }, 40 | complete: function() { 41 | alert('Jerbs done'); 42 | } 43 | }); 44 | 45 | // duration based animation 46 | Metronome({ 47 | type: 'duration', 48 | duration: 3000, 49 | easing: 'easeInOutQuad', 50 | draw: function(handle, progress) { 51 | path.style.strokeDashoffset = Math.floor(length * (1 - progress)); 52 | }, 53 | complete: function() { 54 | alert('Jerbs done'); 55 | } 56 | }); 57 | 58 | 59 | ``` 60 | 61 | #### Easing 62 | 63 | This includes includes several basic easing equations. Please see the source for the complete list of easing methods. 64 | 65 | #### ``draw()`` and ``complete()`` 66 | 67 | ``draw()`` is the main draw action that is called during the animation loop. All side-effects of the animation shoudl be done in this method. 68 | 69 | The ``handle`` parameter is simply the requestAnimationFrame handle that JavaScript provides. Using the handle, code inside ``draw()`` could optionally break out of the animation loop early. 70 | 71 | The ``progress`` paramter is a decimal percentage of the progress of the animation, starting from 0 and continuing to 1. In a frame based animation, progress percentage increases linearly. In a duration based animation, there is no guarantee of linear progression, are momentary freezes or fps slowdowns may cause ``progress` to jump in order to catch up to where the progression should be given elapsed time and desired duration. 72 | 73 | #### Options 74 | 75 | - ``type``: one of ``frame`` or ``duration`` 76 | - ``draw``: callback that fires with each requestAnimationFrame call 77 | - ``complete``: calback that fires after the completion of the animation 78 | - ``easing``: one of the easing methods. Default is 'easeInOutQuad'. See source for more easing options. 79 | 80 | Dependent on ``type``: 81 | 82 | - ``frames``: the number of frames the animation should run in a ``frame`` type animation 83 | - ``duration``: the total amount, in milliseconds, that the animation should run in a ``duration`` type animation 84 | 85 | ## Authors 86 | 87 | David Zhou (dz@voxmedia.com, [@dz](http://twitter.com/dz)) 88 | 89 | ## Contribute 90 | 91 | This is an active project and we encourage contributions. [Please review our guidelines and code of conduct before contributing.](https://github.com/voxmedia/open-source-contribution-guidelines) 92 | 93 | ## License 94 | 95 | Copyright (c) 2014, Vox Media, Inc. 96 | All rights reserved. 97 | 98 | BSD license 99 | 100 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 101 | 102 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 103 | 104 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 105 | 106 | 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 107 | 108 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 109 | -------------------------------------------------------------------------------- /metronome.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // Adapted from https://gist.github.com/paulirish/1579671 which derived from 4 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 5 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating 6 | 7 | // requestAnimationFrame polyfill by Erik Möller. 8 | // Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon 9 | 10 | var dateNow = Date.now || function() { return new Date().getTime(); }; 11 | 12 | (function() { 13 | var vendors = ['webkit', 'moz']; 14 | for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { 15 | var vp = vendors[i]; 16 | window.requestAnimationFrame = window[vp+'RequestAnimationFrame']; 17 | window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame'] 18 | || window[vp+'CancelRequestAnimationFrame']); 19 | } 20 | if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy 21 | || !window.requestAnimationFrame || !window.cancelAnimationFrame) { 22 | var lastTime = 0; 23 | window.requestAnimationFrame = function(callback) { 24 | var now = dateNow(); 25 | var nextTime = Math.max(lastTime + 16, now); 26 | return setTimeout(function() { callback(lastTime = nextTime); }, 27 | nextTime - now); 28 | }; 29 | window.cancelAnimationFrame = clearTimeout; 30 | } 31 | }()); 32 | 33 | // From: https://gist.github.com/gre/1650294 34 | var Easing = { 35 | // no easing, no acceleration 36 | linear: function (t) { return t; }, 37 | // accelerating from zero velocity 38 | easeInQuad: function (t) { return t*t; }, 39 | // decelerating to zero velocity 40 | easeOutQuad: function (t) { return t*(2-t); }, 41 | // acceleration until halfway, then deceleration 42 | easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; }, 43 | // accelerating from zero velocity 44 | easeInCubic: function (t) { return t*t*t; }, 45 | // decelerating to zero velocity 46 | easeOutCubic: function (t) { return (--t)*t*t+1; }, 47 | // acceleration until halfway, then deceleration 48 | easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; }, 49 | // accelerating from zero velocity 50 | easeInQuart: function (t) { return t*t*t*t; }, 51 | // decelerating to zero velocity 52 | easeOutQuart: function (t) { return 1-(--t)*t*t*t; }, 53 | // acceleration until halfway, then deceleration 54 | easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; }, 55 | // accelerating from zero velocity 56 | easeInQuint: function (t) { return t*t*t*t*t; }, 57 | // decelerating to zero velocity 58 | easeOutQuint: function (t) { return 1+(--t)*t*t*t*t; }, 59 | // acceleration until halfway, then deceleration 60 | easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; } 61 | }; 62 | 63 | var MetronomeException = function(message) { 64 | this.name = "MetronomeException"; 65 | this.message = message; 66 | }; 67 | 68 | var noop = function() {}; 69 | 70 | var animate_frames = function(options) { 71 | var handle = 0; 72 | var current_frame = 0; 73 | var max_frame = options.frames; 74 | var progress = 0; 75 | var callback = options.draw || noop; 76 | var complete = options.complete || noop; 77 | var easing = Easing[options.easing || 'easeInOutQuad' ]; 78 | var progress_method = function() { 79 | current_frame++; 80 | return Math.min(1, easing(current_frame/max_frame)); 81 | }; 82 | 83 | var draw = function() { 84 | var progress = progress_method(); 85 | callback(handle, progress); 86 | if (progress >= 1) { 87 | window.cancelAnimationFrame(handle); 88 | if (!!complete) { complete(); } 89 | } else { 90 | handle = window.requestAnimationFrame(draw); 91 | } 92 | }; 93 | draw(); 94 | }; 95 | 96 | var animate_duration = function(options) { 97 | var handle = 0; 98 | var initial_ts = dateNow(); 99 | var progress = 0; 100 | var max_duration = options.duration; 101 | var callback = options.draw || noop; 102 | var complete = options.complete || noop; 103 | var easing = Easing[options.easing || 'easeInOutQuad']; 104 | var progress_method = function() { 105 | return Math.min(1, easing((dateNow() - initial_ts)/max_duration)); 106 | }; 107 | 108 | var draw = function() { 109 | var progress = progress_method(); 110 | callback(handle, progress); 111 | if (progress >= 1) { 112 | window.cancelAnimationFrame(handle); 113 | if (!!complete) { complete(); } 114 | } else { 115 | handle = window.requestAnimationFrame(draw); 116 | } 117 | }; 118 | draw(); 119 | }; 120 | 121 | var Metronome = function(options) { 122 | if (!options.type) { 123 | throw new MetronomeException("'type' is required"); 124 | return; 125 | } 126 | if (options.type === 'frame') { 127 | animate_frames(options); 128 | } 129 | if (options.type === 'duration') { 130 | animate_duration(options); 131 | } 132 | }; 133 | 134 | window.Metronome = Metronome; 135 | })(); 136 | --------------------------------------------------------------------------------