Permalink
Browse files

Introduce Animate7

  • Loading branch information...
1 parent 075db01 commit 991e77761ae5bc5cc1788423aff41337045613a8 @nolimits4web committed Nov 3, 2016
Showing with 173 additions and 0 deletions.
  1. +1 −0 gulpfile.js
  2. +1 −0 modules.json
  3. +171 −0 src/js/animate7.js
View
@@ -111,6 +111,7 @@
'src/js/dom7-ajax.js',
'src/js/dom7-utils.js',
'src/js/dom7-outro.js',
+ 'src/js/animate7.js',
'src/js/proto-support.js',
'src/js/proto-device.js',
'src/js/proto-plugins.js',
View
@@ -71,6 +71,7 @@
"src/js/dom7-utils.js",
"src/js/dom7-ajax.js",
"src/js/dom7-outro.js",
+ "src/js/animate7.js",
"src/js/proto-support.js",
"src/js/proto-device.js",
"src/js/proto-plugins.js",
View
@@ -0,0 +1,171 @@
+/*========================
+Animate7 Animate Engine
+==========================*/
+var Animate7 = function (elements, props, params) {
+ props = props || {};
+ params = params || {
+ duration: 300,
+ easing: 'swing', // or 'linear'
+ /* Callbacks
+ begin(elements)
+ complete(elements)
+ progress(elements, complete, remaining, start, tweenValue)
+ */
+ };
+
+ var a = this;
+ a.params = params;
+ a.props = props;
+ a.elements = $(elements);
+ if (a.elements.length === 0) {
+ return a;
+ }
+
+ a.easingProgress = function (easing, progress) {
+ if (easing === 'swing') {
+ return 0.5 - Math.cos( progress * Math.PI ) / 2;
+ }
+ if (typeof easing === 'function') {
+ return easing(progress);
+ }
+ return progress;
+ };
+
+ a.stop = function () {
+ if (a.frameId) {
+ $.cancelAnimationFrame(a.frameId);
+ }
+ a.animating = false;
+ a.elements.each(function (index, el) {
+ delete el.animate7Instance;
+ });
+ a.que = [];
+ };
+ a.done = function (complete) {
+ a.animating = false;
+ a.elements.each(function (index, el) {
+ delete el.animate7Instance;
+ });
+ if (complete) complete(elements);
+ if (a.que.length > 0) {
+ var que = a.que.pop();
+ a.animate(que[0], que[1]);
+ }
+ };
+ a.animating = false;
+ a.que = [];
+ a.animate = function (props, params) {
+ if (a.animating) {
+ a.que.push([props, params]);
+ return a;
+ }
+ a.params = params;
+
+ var _elements = [];
+
+ // Define & Cache Initials & Units
+ a.elements.each(function (index, el) {
+ var initialFullValue, initialValue, unit, finalValue, finalFullValue;
+
+ _elements[index] = {
+ _container: el
+ };
+
+ for (var prop in props) {
+ initialFullValue = window.getComputedStyle(el, null).getPropertyValue(prop).replace(',', '.');
+ initialValue = parseFloat(initialFullValue);
+ unit = initialFullValue.replace(initialValue, '');
+ finalValue = props[prop];
+ finalFullValue = props[prop] + unit;
+ _elements[index][prop] = {
+ initialFullValue: initialFullValue,
+ initialValue: initialValue,
+ unit: unit,
+ finalValue: finalValue,
+ finalFullValue: finalFullValue,
+ currentValue: initialValue
+ };
+
+ }
+ });
+
+ var startTime = null,
+ time,
+ elementsDone = 0,
+ done,
+ began = false;
+
+ a.animating = true;
+
+ function render() {
+ time = new Date().getTime();
+ var progress, easeProgress, el;
+ if (!began) {
+ began = true;
+ if (params.begin) params.begin(elements);
+ }
+ if (startTime === null) {
+ startTime = time;
+ }
+ if (params.progress) {
+ params.progress(
+ a.elements,
+ Math.max(Math.min((time - startTime) / params.duration, 1), 0),
+ ((startTime + params.duration) - time < 0 ? 0 : (startTime + params.duration) - time),
+ startTime
+ );
+ }
+
+ for (var prop in props) {
+ if (done) continue;
+
+ for (var i = 0; i < _elements.length; i++) {
+ el = _elements[i];
+ if (el.done) continue;
+
+ progress = Math.max(Math.min((time - startTime) / params.duration, 1), 0);
+ easeProgress = a.easingProgress(params.easing, progress);
+
+ el[prop].currentValue = el[prop].initialValue + easeProgress * (el[prop].finalValue - el[prop].initialValue);
+
+ if (el[prop].finalValue > el[prop].initialValue && el[prop].currentValue >= el[prop].finalValue || el[prop].finalValue < el[prop].initialValue && el[prop].currentValue <= el[prop].finalValue) {
+ el._container.style[prop] = el[prop].finalValue + el[prop].unit;
+ el.done = true;
+ elementsDone++;
+ if (elementsDone === _elements.length) {
+ done = true;
+ }
+ }
+ if (done) {
+ a.done(params.complete);
+ return a;
+ }
+ el._container.style[prop] = el[prop].currentValue + el[prop].unit;
+ }
+ }
+
+ // Then call
+ a.frameId = $.requestAnimationFrame(render);
+ }
+ a.frameId = $.requestAnimationFrame(render);
+ return a;
+ };
+ var foundInstance;
+ for (var i = 0; i < a.elements.length; i++) {
+ if (a.elements[i].animate7Instance) {
+ foundInstance = a.elements[i].animate7Instance;
+ }
+ else a.elements[i].animate7Instance = a;
+ }
+ if (foundInstance) {
+ return foundInstance.animate(props, params);
+ }
+ else a.animate(props, params);
+ return a;
+};
+window.Animate7 = function (elements, props, params){
+ return new Animate7(elements, props, params);
+};
+Dom7.fn.animate = function (props, params) {
+ return new Animate7(this, props, params);
+};

0 comments on commit 991e777

Please sign in to comment.