mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
Import anime.js 1.1.0 bundle.
This commit is contained in:
Andrey Antukh
parent
1532dccafa
commit
88036c1cb0
4 changed files with 667 additions and 0 deletions
5
resources/deps.cljs
Normal file
5
resources/deps.cljs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{:foreign-libs
|
||||
[{:file "js/anime/anime.js"
|
||||
:file-min "js/anime/anime.min.js"
|
||||
:provides ["vendor.animejs"]}]
|
||||
:externs ["js/anime/externs.js"]}
|
||||
634
resources/js/anime/anime.js
Normal file
634
resources/js/anime/anime.js
Normal file
|
|
@ -0,0 +1,634 @@
|
|||
/*
|
||||
* Anime v1.1.0
|
||||
* http://anime-js.com
|
||||
* JavaScript animation engine
|
||||
* Copyright (c) 2016 Julian Garnier
|
||||
* http://juliangarnier.com
|
||||
* Released under the MIT license
|
||||
*/
|
||||
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define([], factory);
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
// Node. Does not work with strict CommonJS, but
|
||||
// only CommonJS-like environments that support module.exports,
|
||||
// like Node.
|
||||
module.exports = factory();
|
||||
} else {
|
||||
// Browser globals (root is window)
|
||||
root.anime = factory();
|
||||
}
|
||||
}(this, function () {
|
||||
|
||||
var version = '1.1.0';
|
||||
|
||||
// Defaults
|
||||
|
||||
var defaultSettings = {
|
||||
duration: 1000,
|
||||
delay: 0,
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
direction: 'normal',
|
||||
easing: 'easeOutElastic',
|
||||
elasticity: 400,
|
||||
round: false,
|
||||
begin: undefined,
|
||||
update: undefined,
|
||||
complete: undefined
|
||||
}
|
||||
|
||||
// Transforms
|
||||
|
||||
var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skewX', 'skewY'];
|
||||
var transform, transformStr = 'transform';
|
||||
|
||||
// Utils
|
||||
|
||||
var is = (function() {
|
||||
return {
|
||||
array: function(a) { return Array.isArray(a) },
|
||||
object: function(a) { return Object.prototype.toString.call(a).indexOf('Object') > -1 },
|
||||
svg: function(a) { return a instanceof SVGElement },
|
||||
dom: function(a) { return a.nodeType || is.svg(a) },
|
||||
number: function(a) { return !isNaN(parseInt(a)) },
|
||||
string: function(a) { return typeof a === 'string' },
|
||||
func: function(a) { return typeof a === 'function' },
|
||||
undef: function(a) { return typeof a === 'undefined' },
|
||||
null: function(a) { return typeof a === 'null' },
|
||||
hex: function(a) { return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a) },
|
||||
rgb: function(a) { return /^rgb/.test(a) },
|
||||
rgba: function(a) { return /^rgba/.test(a) },
|
||||
hsl: function(a) { return /^hsl/.test(a) },
|
||||
color: function(a) { return (is.hex(a) || is.rgb(a) || is.rgba(a) || is.hsl(a))}
|
||||
}
|
||||
})();
|
||||
|
||||
// Easings functions adapted from http://jqueryui.com/
|
||||
|
||||
var easings = (function() {
|
||||
var eases = {};
|
||||
var names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo'];
|
||||
var functions = {
|
||||
Sine: function(t) { return 1 - Math.cos( t * Math.PI / 2 ); },
|
||||
Circ: function(t) { return 1 - Math.sqrt( 1 - t * t ); },
|
||||
Elastic: function(t, m) {
|
||||
if( t === 0 || t === 1 ) return t;
|
||||
var p = (1 - Math.min(m, 998) / 1000), st = t / 1, st1 = st - 1, s = p / ( 2 * Math.PI ) * Math.asin( 1 );
|
||||
return -( Math.pow( 2, 10 * st1 ) * Math.sin( ( st1 - s ) * ( 2 * Math.PI ) / p ) );
|
||||
},
|
||||
Back: function(t) { return t * t * ( 3 * t - 2 ); },
|
||||
Bounce: function(t) {
|
||||
var pow2, bounce = 4;
|
||||
while ( t < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
|
||||
return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - t, 2 );
|
||||
}
|
||||
}
|
||||
names.forEach(function(name, i) {
|
||||
functions[name] = function(t) {
|
||||
return Math.pow( t, i + 2 );
|
||||
}
|
||||
});
|
||||
Object.keys(functions).forEach(function(name) {
|
||||
var easeIn = functions[name];
|
||||
eases['easeIn' + name] = easeIn;
|
||||
eases['easeOut' + name] = function(t, m) { return 1 - easeIn(1 - t, m); };
|
||||
eases['easeInOut' + name] = function(t, m) { return t < 0.5 ? easeIn(t * 2, m) / 2 : 1 - easeIn(t * -2 + 2, m) / 2; };
|
||||
});
|
||||
eases.linear = function(t) { return t; };
|
||||
return eases;
|
||||
})();
|
||||
|
||||
// Strings
|
||||
|
||||
var numberToString = function(val) {
|
||||
return (is.string(val)) ? val : val + '';
|
||||
}
|
||||
|
||||
var stringToHyphens = function(str) {
|
||||
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
||||
}
|
||||
|
||||
var selectString = function(str) {
|
||||
if (is.color(str)) return false;
|
||||
try {
|
||||
var nodes = document.querySelectorAll(str);
|
||||
return nodes;
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Numbers
|
||||
|
||||
var random = function(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
// Arrays
|
||||
|
||||
var flattenArray = function(arr) {
|
||||
return arr.reduce(function(a, b) {
|
||||
return a.concat(is.array(b) ? flattenArray(b) : b);
|
||||
}, []);
|
||||
}
|
||||
|
||||
var toArray = function(o) {
|
||||
if (is.array(o)) return o;
|
||||
if (is.string(o)) o = selectString(o) || o;
|
||||
if (o instanceof NodeList || o instanceof HTMLCollection) return [].slice.call(o);
|
||||
return [o];
|
||||
}
|
||||
|
||||
var arrayContains = function(arr, val) {
|
||||
return arr.some(function(a) { return a === val; });
|
||||
}
|
||||
|
||||
var groupArrayByProps = function(arr, propsArr) {
|
||||
var groups = {};
|
||||
arr.forEach(function(o) {
|
||||
var group = JSON.stringify(propsArr.map(function(p) { return o[p]; }));
|
||||
groups[group] = groups[group] || [];
|
||||
groups[group].push(o);
|
||||
});
|
||||
return Object.keys(groups).map(function(group) {
|
||||
return groups[group];
|
||||
});
|
||||
}
|
||||
|
||||
var removeArrayDuplicates = function(arr) {
|
||||
return arr.filter(function(item, pos, self) {
|
||||
return self.indexOf(item) === pos;
|
||||
});
|
||||
}
|
||||
|
||||
// Objects
|
||||
|
||||
var cloneObject = function(o) {
|
||||
var newObject = {};
|
||||
for (var p in o) newObject[p] = o[p];
|
||||
return newObject;
|
||||
}
|
||||
|
||||
var mergeObjects = function(o1, o2) {
|
||||
for (var p in o2) o1[p] = !is.undef(o1[p]) ? o1[p] : o2[p];
|
||||
return o1;
|
||||
}
|
||||
|
||||
// Colors
|
||||
|
||||
var hexToRgb = function(hex) {
|
||||
var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
var hex = hex.replace(rgx, function(m, r, g, b) { return r + r + g + g + b + b; });
|
||||
var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
var r = parseInt(rgb[1], 16);
|
||||
var g = parseInt(rgb[2], 16);
|
||||
var b = parseInt(rgb[3], 16);
|
||||
return 'rgb(' + r + ',' + g + ',' + b + ')';
|
||||
}
|
||||
|
||||
var hslToRgb = function(hsl) {
|
||||
var hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hsl);
|
||||
var h = parseInt(hsl[1]) / 360;
|
||||
var s = parseInt(hsl[2]) / 100;
|
||||
var l = parseInt(hsl[3]) / 100;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
}
|
||||
var r, g, b;
|
||||
if (s == 0) {
|
||||
r = g = b = l;
|
||||
} else {
|
||||
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
var p = 2 * l - q;
|
||||
r = hue2rgb(p, q, h + 1/3);
|
||||
g = hue2rgb(p, q, h);
|
||||
b = hue2rgb(p, q, h - 1/3);
|
||||
}
|
||||
return 'rgb(' + r * 255 + ',' + g * 255 + ',' + b * 255 + ')';
|
||||
}
|
||||
|
||||
var colorToRgb = function(val) {
|
||||
if (is.rgb(val) || is.rgba(val)) return val;
|
||||
if (is.hex(val)) return hexToRgb(val);
|
||||
if (is.hsl(val)) return hslToRgb(val);
|
||||
}
|
||||
|
||||
// Units
|
||||
|
||||
var getUnit = function(val) {
|
||||
return /([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(val)[2];
|
||||
}
|
||||
|
||||
var addDefaultTransformUnit = function(prop, val, intialVal) {
|
||||
if (getUnit(val)) return val;
|
||||
if (prop.indexOf('translate') > -1) return getUnit(intialVal) ? val + getUnit(intialVal) : val + 'px';
|
||||
if (prop.indexOf('rotate') > -1 || prop.indexOf('skew') > -1) return val + 'deg';
|
||||
return val;
|
||||
}
|
||||
|
||||
// Values
|
||||
|
||||
var getCSSValue = function(el, prop) {
|
||||
// First check if prop is a valid CSS property
|
||||
if (prop in el.style) {
|
||||
// Then return the property value or fallback to '0' when getPropertyValue fails
|
||||
return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0';
|
||||
}
|
||||
}
|
||||
|
||||
var getTransformValue = function(el, prop) {
|
||||
var defaultVal = prop.indexOf('scale') > -1 ? 1 : 0;
|
||||
var str = el.style.transform;
|
||||
if (!str) return defaultVal;
|
||||
var rgx = /(\w+)\((.+?)\)/g;
|
||||
var match = [];
|
||||
var props = [];
|
||||
var values = [];
|
||||
while (match = rgx.exec(str)) {
|
||||
props.push(match[1]);
|
||||
values.push(match[2]);
|
||||
}
|
||||
var val = values.filter(function(f, i) { return props[i] === prop; });
|
||||
return val.length ? val[0] : defaultVal;
|
||||
}
|
||||
|
||||
var getAnimationType = function(el, prop) {
|
||||
if ( is.dom(el) && arrayContains(validTransforms, prop)) return 'transform';
|
||||
if ( is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) return 'css';
|
||||
if ( is.dom(el) && (el.getAttribute(prop) || (is.svg(el) && el[prop]))) return 'attribute';
|
||||
if (!is.null(el[prop]) && !is.undef(el[prop])) return 'object';
|
||||
}
|
||||
|
||||
var getInitialTargetValue = function(target, prop) {
|
||||
switch (getAnimationType(target, prop)) {
|
||||
case 'transform': return getTransformValue(target, prop);
|
||||
case 'css': return getCSSValue(target, prop);
|
||||
case 'attribute': return target.getAttribute(prop);
|
||||
}
|
||||
return target[prop] || 0;
|
||||
}
|
||||
|
||||
var getValidValue = function(values, val, originalCSS) {
|
||||
if (is.color(val)) return colorToRgb(val);
|
||||
if (getUnit(val)) return val;
|
||||
var unit = getUnit(values.to) ? getUnit(values.to) : getUnit(values.from);
|
||||
if (!unit && originalCSS) unit = getUnit(originalCSS);
|
||||
return unit ? val + unit : val;
|
||||
}
|
||||
|
||||
var decomposeValue = function(val) {
|
||||
var rgx = /-?\d*\.?\d+/g;
|
||||
return {
|
||||
original: val,
|
||||
numbers: numberToString(val).match(rgx) ? numberToString(val).match(rgx).map(Number) : [0],
|
||||
strings: numberToString(val).split(rgx)
|
||||
}
|
||||
}
|
||||
|
||||
var recomposeValue = function(numbers, strings, initialStrings) {
|
||||
return strings.reduce(function(a, b, i) {
|
||||
var b = (b ? b : initialStrings[i - 1]);
|
||||
return a + numbers[i - 1] + b;
|
||||
});
|
||||
}
|
||||
|
||||
// Animatables
|
||||
|
||||
var getAnimatables = function(targets) {
|
||||
var targets = targets ? (flattenArray(is.array(targets) ? targets.map(toArray) : toArray(targets))) : [];
|
||||
return targets.map(function(t, i) {
|
||||
return { target: t, id: i };
|
||||
});
|
||||
}
|
||||
|
||||
// Properties
|
||||
|
||||
var getProperties = function(params, settings) {
|
||||
var props = [];
|
||||
for (var p in params) {
|
||||
if (!defaultSettings.hasOwnProperty(p) && p !== 'targets') {
|
||||
var prop = is.object(params[p]) ? cloneObject(params[p]) : {value: params[p]};
|
||||
prop.name = p;
|
||||
props.push(mergeObjects(prop, settings));
|
||||
}
|
||||
}
|
||||
return props;
|
||||
}
|
||||
|
||||
var getPropertiesValues = function(target, prop, value, i) {
|
||||
var values = toArray( is.func(value) ? value(target, i) : value);
|
||||
return {
|
||||
from: (values.length > 1) ? values[0] : getInitialTargetValue(target, prop),
|
||||
to: (values.length > 1) ? values[1] : values[0]
|
||||
}
|
||||
}
|
||||
|
||||
// Tweens
|
||||
|
||||
var getTweenValues = function(prop, values, type, target) {
|
||||
var valid = {};
|
||||
if (type === 'transform') {
|
||||
valid.from = prop + '(' + addDefaultTransformUnit(prop, values.from, values.to) + ')';
|
||||
valid.to = prop + '(' + addDefaultTransformUnit(prop, values.to) + ')';
|
||||
} else {
|
||||
var originalCSS = (type === 'css') ? getCSSValue(target, prop) : undefined;
|
||||
valid.from = getValidValue(values, values.from, originalCSS);
|
||||
valid.to = getValidValue(values, values.to, originalCSS);
|
||||
}
|
||||
return { from: decomposeValue(valid.from), to: decomposeValue(valid.to) };
|
||||
}
|
||||
|
||||
var getTweensProps = function(animatables, props) {
|
||||
var tweensProps = [];
|
||||
animatables.forEach(function(animatable, i) {
|
||||
var target = animatable.target;
|
||||
return props.forEach(function(prop) {
|
||||
var animType = getAnimationType(target, prop.name);
|
||||
if (animType) {
|
||||
var values = getPropertiesValues(target, prop.name, prop.value, i);
|
||||
var tween = cloneObject(prop);
|
||||
tween.animatables = animatable;
|
||||
tween.type = animType;
|
||||
tween.from = getTweenValues(prop.name, values, tween.type, target).from;
|
||||
tween.to = getTweenValues(prop.name, values, tween.type, target).to;
|
||||
tween.round = (is.color(values.from) || tween.round) ? 1 : 0;
|
||||
tween.delay = (is.func(tween.delay) ? tween.delay(target, i, animatables.length) : tween.delay) / animation.speed;
|
||||
tween.duration = (is.func(tween.duration) ? tween.duration(target, i, animatables.length) : tween.duration) / animation.speed;
|
||||
tweensProps.push(tween);
|
||||
}
|
||||
});
|
||||
});
|
||||
return tweensProps;
|
||||
}
|
||||
|
||||
var getTweens = function(animatables, props) {
|
||||
var tweensProps = getTweensProps(animatables, props);
|
||||
var splittedProps = groupArrayByProps(tweensProps, ['name', 'from', 'to', 'delay', 'duration']);
|
||||
return splittedProps.map(function(tweenProps) {
|
||||
var tween = cloneObject(tweenProps[0]);
|
||||
tween.animatables = tweenProps.map(function(p) { return p.animatables });
|
||||
tween.totalDuration = tween.delay + tween.duration;
|
||||
return tween;
|
||||
});
|
||||
}
|
||||
|
||||
var reverseTweens = function(anim, delays) {
|
||||
anim.tweens.forEach(function(tween) {
|
||||
var toVal = tween.to;
|
||||
var fromVal = tween.from;
|
||||
var delayVal = anim.duration - (tween.delay + tween.duration);
|
||||
tween.from = toVal;
|
||||
tween.to = fromVal;
|
||||
if (delays) tween.delay = delayVal;
|
||||
});
|
||||
anim.reversed = anim.reversed ? false : true;
|
||||
}
|
||||
|
||||
var getTweensDuration = function(tweens) {
|
||||
if (tweens.length) return Math.max.apply(Math, tweens.map(function(tween){ return tween.totalDuration; }));
|
||||
}
|
||||
|
||||
// will-change
|
||||
|
||||
var getWillChange = function(anim) {
|
||||
var props = [];
|
||||
var els = [];
|
||||
anim.tweens.forEach(function(tween) {
|
||||
if (tween.type === 'css' || tween.type === 'transform' ) {
|
||||
props.push(tween.type === 'css' ? stringToHyphens(tween.name) : 'transform');
|
||||
tween.animatables.forEach(function(animatable) { els.push(animatable.target); });
|
||||
}
|
||||
});
|
||||
return {
|
||||
properties: removeArrayDuplicates(props).join(', '),
|
||||
elements: removeArrayDuplicates(els)
|
||||
}
|
||||
}
|
||||
|
||||
var setWillChange = function(anim) {
|
||||
var willChange = getWillChange(anim);
|
||||
willChange.elements.forEach(function(element) {
|
||||
element.style.willChange = willChange.properties;
|
||||
});
|
||||
}
|
||||
|
||||
var removeWillChange = function(anim) {
|
||||
var willChange = getWillChange(anim);
|
||||
willChange.elements.forEach(function(element) {
|
||||
element.style.removeProperty('will-change');
|
||||
});
|
||||
}
|
||||
|
||||
/* Svg path */
|
||||
|
||||
var getPathProps = function(path) {
|
||||
var el = is.string(path) ? selectString(path)[0] : path;
|
||||
return {
|
||||
path: el,
|
||||
value: el.getTotalLength()
|
||||
}
|
||||
}
|
||||
|
||||
var snapProgressToPath = function(tween, progress) {
|
||||
var pathEl = tween.path;
|
||||
var pathProgress = tween.value * progress;
|
||||
var point = function(offset) {
|
||||
var o = offset || 0;
|
||||
var p = progress > 1 ? tween.value + o : pathProgress + o;
|
||||
return pathEl.getPointAtLength(p);
|
||||
}
|
||||
var p = point();
|
||||
var p0 = point(-1);
|
||||
var p1 = point(+1);
|
||||
switch (tween.name) {
|
||||
case 'translateX': return p.x;
|
||||
case 'translateY': return p.y;
|
||||
case 'rotate': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI;
|
||||
}
|
||||
}
|
||||
|
||||
// Progress
|
||||
|
||||
var getTweenProgress = function(tween, time) {
|
||||
var elapsed = Math.min(Math.max(time - tween.delay, 0), tween.duration);
|
||||
var percent = elapsed / tween.duration;
|
||||
var progress = tween.to.numbers.map(function(number, p) {
|
||||
var start = tween.from.numbers[p];
|
||||
var eased = easings[tween.easing](percent, tween.elasticity);
|
||||
var val = tween.path ? snapProgressToPath(tween, eased) : start + eased * (number - start);
|
||||
val = tween.round ? Math.round(val * tween.round) / tween.round : val;
|
||||
return val;
|
||||
});
|
||||
return recomposeValue(progress, tween.to.strings, tween.from.strings);
|
||||
}
|
||||
|
||||
var setAnimationProgress = function(anim, time) {
|
||||
var transforms;
|
||||
anim.currentTime = time;
|
||||
anim.progress = (time / anim.duration) * 100;
|
||||
for (var t = 0; t < anim.tweens.length; t++) {
|
||||
var tween = anim.tweens[t];
|
||||
tween.currentValue = getTweenProgress(tween, time);
|
||||
var progress = tween.currentValue;
|
||||
for (var a = 0; a < tween.animatables.length; a++) {
|
||||
var animatable = tween.animatables[a];
|
||||
var id = animatable.id;
|
||||
var target = animatable.target;
|
||||
var name = tween.name;
|
||||
switch (tween.type) {
|
||||
case 'css': target.style[name] = progress; break;
|
||||
case 'attribute': target.setAttribute(name, progress); break;
|
||||
case 'object': target[name] = progress; break;
|
||||
case 'transform':
|
||||
if (!transforms) transforms = {};
|
||||
if (!transforms[id]) transforms[id] = [];
|
||||
transforms[id].push(progress);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (transforms) {
|
||||
if (!transform) transform = (getCSSValue(document.body, transformStr) ? '' : '-webkit-') + transformStr;
|
||||
for (var t in transforms) {
|
||||
anim.animatables[t].target.style[transform] = transforms[t].join(' ');
|
||||
}
|
||||
}
|
||||
if (anim.settings.update) anim.settings.update(anim);
|
||||
}
|
||||
|
||||
// Animation
|
||||
|
||||
var createAnimation = function(params) {
|
||||
var anim = {};
|
||||
anim.animatables = getAnimatables(params.targets);
|
||||
anim.settings = mergeObjects(params, defaultSettings);
|
||||
anim.properties = getProperties(params, anim.settings);
|
||||
anim.tweens = getTweens(anim.animatables, anim.properties);
|
||||
anim.duration = getTweensDuration(anim.tweens) || params.duration;
|
||||
anim.currentTime = 0;
|
||||
anim.progress = 0;
|
||||
anim.ended = false;
|
||||
return anim;
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
var animations = [];
|
||||
var raf = 0;
|
||||
|
||||
var engine = (function() {
|
||||
var play = function() { raf = requestAnimationFrame(step); };
|
||||
var step = function(t) {
|
||||
if (animations.length) {
|
||||
for (var i = 0; i < animations.length; i++) animations[i].tick(t);
|
||||
play();
|
||||
} else {
|
||||
cancelAnimationFrame(raf);
|
||||
raf = 0;
|
||||
}
|
||||
}
|
||||
return play;
|
||||
})();
|
||||
|
||||
var animation = function(params) {
|
||||
|
||||
var anim = createAnimation(params);
|
||||
var time = {};
|
||||
|
||||
anim.tick = function(now) {
|
||||
anim.ended = false;
|
||||
if (!time.start) time.start = now;
|
||||
time.current = Math.min(Math.max(time.last + now - time.start, 0), anim.duration);
|
||||
setAnimationProgress(anim, time.current);
|
||||
var s = anim.settings;
|
||||
if (s.begin && time.current >= s.delay) { s.begin(anim); s.begin = undefined; };
|
||||
if (time.current >= anim.duration) {
|
||||
if (s.loop) {
|
||||
time.start = now;
|
||||
if (s.direction === 'alternate') reverseTweens(anim, true);
|
||||
if (is.number(s.loop)) s.loop--;
|
||||
} else {
|
||||
anim.ended = true;
|
||||
anim.pause();
|
||||
if (s.complete) s.complete(anim);
|
||||
}
|
||||
time.last = 0;
|
||||
}
|
||||
}
|
||||
|
||||
anim.seek = function(progress) {
|
||||
setAnimationProgress(anim, (progress / 100) * anim.duration);
|
||||
}
|
||||
|
||||
anim.pause = function() {
|
||||
removeWillChange(anim);
|
||||
var i = animations.indexOf(anim);
|
||||
if (i > -1) animations.splice(i, 1);
|
||||
}
|
||||
|
||||
anim.play = function(params) {
|
||||
anim.pause();
|
||||
if (params) anim = mergeObjects(createAnimation(mergeObjects(params, anim.settings)), anim);
|
||||
time.start = 0;
|
||||
time.last = anim.ended ? 0 : anim.currentTime;
|
||||
var s = anim.settings;
|
||||
if (s.direction === 'reverse') reverseTweens(anim);
|
||||
if (s.direction === 'alternate' && !s.loop) s.loop = 1;
|
||||
setWillChange(anim);
|
||||
animations.push(anim);
|
||||
if (!raf) engine();
|
||||
}
|
||||
|
||||
anim.restart = function() {
|
||||
if (anim.reversed) reverseTweens(anim);
|
||||
anim.pause();
|
||||
anim.seek(0);
|
||||
anim.play();
|
||||
}
|
||||
|
||||
if (anim.settings.autoplay) anim.play();
|
||||
|
||||
return anim;
|
||||
|
||||
}
|
||||
|
||||
// Remove one or multiple targets from all active animations.
|
||||
|
||||
var remove = function(elements) {
|
||||
var targets = flattenArray(is.array(elements) ? elements.map(toArray) : toArray(elements));
|
||||
for (var i = animations.length-1; i >= 0; i--) {
|
||||
var animation = animations[i];
|
||||
var tweens = animation.tweens;
|
||||
for (var t = tweens.length-1; t >= 0; t--) {
|
||||
var animatables = tweens[t].animatables;
|
||||
for (var a = animatables.length-1; a >= 0; a--) {
|
||||
if (arrayContains(targets, animatables[a].target)) {
|
||||
animatables.splice(a, 1);
|
||||
if (!animatables.length) tweens.splice(t, 1);
|
||||
if (!tweens.length) animation.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
animation.version = version;
|
||||
animation.speed = 1;
|
||||
animation.list = animations;
|
||||
animation.remove = remove;
|
||||
animation.easings = easings;
|
||||
animation.getValue = getInitialTargetValue;
|
||||
animation.path = getPathProps;
|
||||
animation.random = random;
|
||||
|
||||
return animation;
|
||||
|
||||
}));
|
||||
19
resources/js/anime/anime.min.js
vendored
Normal file
19
resources/js/anime/anime.min.js
vendored
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
(function(t,q){"function"===typeof define&&define.amd?define([],q):"object"===typeof module&&module.exports?module.exports=q():t.anime=q()})(this,function(){var t={duration:1E3,delay:0,loop:!1,autoplay:!0,direction:"normal",easing:"easeOutElastic",elasticity:400,round:!1,begin:void 0,update:void 0,complete:void 0},q="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),x,f=function(){return{array:function(a){return Array.isArray(a)},object:function(a){return-1<
|
||||
Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||f.svg(a)},number:function(a){return!isNaN(parseInt(a))},string:function(a){return"string"===typeof a},func:function(a){return"function"===typeof a},undef:function(a){return"undefined"===typeof a},"null":function(a){return"null"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},rgba:function(a){return/^rgba/.test(a)},
|
||||
hsl:function(a){return/^hsl/.test(a)},color:function(a){return f.hex(a)||f.rgb(a)||f.rgba(a)||f.hsl(a)}}}(),C=function(){var a={},b={Sine:function(a){return 1-Math.cos(a*Math.PI/2)},Circ:function(a){return 1-Math.sqrt(1-a*a)},Elastic:function(a,b){if(0===a||1===a)return a;var d=1-Math.min(b,998)/1E3,g=a/1-1;return-(Math.pow(2,10*g)*Math.sin(2*(g-d/(2*Math.PI)*Math.asin(1))*Math.PI/d))},Back:function(a){return a*a*(3*a-2)},Bounce:function(a){for(var b,d=4;a<((b=Math.pow(2,--d))-1)/11;);return 1/Math.pow(4,
|
||||
3-d)-7.5625*Math.pow((3*b-2)/22-a,2)}};["Quad","Cubic","Quart","Quint","Expo"].forEach(function(a,e){b[a]=function(a){return Math.pow(a,e+2)}});Object.keys(b).forEach(function(c){var e=b[c];a["easeIn"+c]=e;a["easeOut"+c]=function(a,b){return 1-e(1-a,b)};a["easeInOut"+c]=function(a,b){return.5>a?e(2*a,b)/2:1-e(-2*a+2,b)/2}});a.linear=function(a){return a};return a}(),y=function(a){return f.string(a)?a:a+""},D=function(a){return a.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()},E=function(a){if(f.color(a))return!1;
|
||||
try{return document.querySelectorAll(a)}catch(b){return!1}},z=function(a){return a.reduce(function(a,c){return a.concat(f.array(c)?z(c):c)},[])},r=function(a){if(f.array(a))return a;f.string(a)&&(a=E(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]},F=function(a,b){return a.some(function(a){return a===b})},R=function(a,b){var c={};a.forEach(function(a){var d=JSON.stringify(b.map(function(b){return a[b]}));c[d]=c[d]||[];c[d].push(a)});return Object.keys(c).map(function(a){return c[a]})},
|
||||
G=function(a){return a.filter(function(a,c,e){return e.indexOf(a)===c})},A=function(a){var b={},c;for(c in a)b[c]=a[c];return b},u=function(a,b){for(var c in b)a[c]=f.undef(a[c])?b[c]:a[c];return a},S=function(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,H){return b+b+c+c+H+H});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"},T=function(a){a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);
|
||||
var b=parseInt(a[1])/360,c=parseInt(a[2])/100,e=parseInt(a[3])/100;a=function(a,b,c){0>c&&(c+=1);1<c&&--c;return c<1/6?a+6*(b-a)*c:.5>c?b:c<2/3?a+(b-a)*(2/3-c)*6:a};if(0==c)c=e=b=e;else var d=.5>e?e*(1+c):e+c-e*c,g=2*e-d,c=a(g,d,b+1/3),e=a(g,d,b),b=a(g,d,b-1/3);return"rgb("+255*c+","+255*e+","+255*b+")"},p=function(a){return/([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(a)[2]},I=function(a,b,c){return p(b)?b:-1<a.indexOf("translate")?p(c)?b+p(c):b+"px":-1<a.indexOf("rotate")||
|
||||
-1<a.indexOf("skew")?b+"deg":b},v=function(a,b){if(b in a.style)return getComputedStyle(a).getPropertyValue(D(b))||"0"},U=function(a,b){var c=-1<b.indexOf("scale")?1:0,e=a.style.transform;if(!e)return c;for(var d=/(\w+)\((.+?)\)/g,g=[],f=[],l=[];g=d.exec(e);)f.push(g[1]),l.push(g[2]);e=l.filter(function(a,c){return f[c]===b});return e.length?e[0]:c},J=function(a,b){if(f.dom(a)&&F(q,b))return"transform";if(f.dom(a)&&"transform"!==b&&v(a,b))return"css";if(f.dom(a)&&(a.getAttribute(b)||f.svg(a)&&a[b]))return"attribute";
|
||||
if(!f["null"](a[b])&&!f.undef(a[b]))return"object"},K=function(a,b){switch(J(a,b)){case "transform":return U(a,b);case "css":return v(a,b);case "attribute":return a.getAttribute(b)}return a[b]||0},L=function(a,b,c){if(f.color(b))return b=f.rgb(b)||f.rgba(b)?b:f.hex(b)?S(b):f.hsl(b)?T(b):void 0,b;if(p(b))return b;a=p(a.to)?p(a.to):p(a.from);!a&&c&&(a=p(c));return a?b+a:b},M=function(a){var b=/-?\d*\.?\d+/g;return{original:a,numbers:y(a).match(b)?y(a).match(b).map(Number):[0],strings:y(a).split(b)}},
|
||||
V=function(a,b,c){return b.reduce(function(b,d,g){d=d?d:c[g-1];return b+a[g-1]+d})},W=function(a){a=a?z(f.array(a)?a.map(r):r(a)):[];return a.map(function(a,c){return{target:a,id:c}})},N=function(a,b,c,e){"transform"===c?(c=a+"("+I(a,b.from,b.to)+")",b=a+"("+I(a,b.to)+")"):(a="css"===c?v(e,a):void 0,c=L(b,b.from,a),b=L(b,b.to,a));return{from:M(c),to:M(b)}},X=function(a,b){var c=[];a.forEach(function(e,d){var g=e.target;return b.forEach(function(b){var l=J(g,b.name);if(l){var m;m=b.name;var h=b.value,
|
||||
h=r(f.func(h)?h(g,d):h);m={from:1<h.length?h[0]:K(g,m),to:1<h.length?h[1]:h[0]};h=A(b);h.animatables=e;h.type=l;h.from=N(b.name,m,h.type,g).from;h.to=N(b.name,m,h.type,g).to;h.round=f.color(m.from)||h.round?1:0;h.delay=(f.func(h.delay)?h.delay(g,d,a.length):h.delay)/k.speed;h.duration=(f.func(h.duration)?h.duration(g,d,a.length):h.duration)/k.speed;c.push(h)}})});return c},Y=function(a,b){var c=X(a,b);return R(c,["name","from","to","delay","duration"]).map(function(a){var b=A(a[0]);b.animatables=
|
||||
a.map(function(a){return a.animatables});b.totalDuration=b.delay+b.duration;return b})},B=function(a,b){a.tweens.forEach(function(c){var e=c.from,d=a.duration-(c.delay+c.duration);c.from=c.to;c.to=e;b&&(c.delay=d)});a.reversed=a.reversed?!1:!0},Z=function(a){if(a.length)return Math.max.apply(Math,a.map(function(a){return a.totalDuration}))},O=function(a){var b=[],c=[];a.tweens.forEach(function(a){if("css"===a.type||"transform"===a.type)b.push("css"===a.type?D(a.name):"transform"),a.animatables.forEach(function(a){c.push(a.target)})});
|
||||
return{properties:G(b).join(", "),elements:G(c)}},aa=function(a){var b=O(a);b.elements.forEach(function(a){a.style.willChange=b.properties})},ba=function(a){O(a).elements.forEach(function(a){a.style.removeProperty("will-change")})},ca=function(a,b){var c=a.path,e=a.value*b,d=function(d){d=d||0;return c.getPointAtLength(1<b?a.value+d:e+d)},g=d(),f=d(-1),d=d(1);switch(a.name){case "translateX":return g.x;case "translateY":return g.y;case "rotate":return 180*Math.atan2(d.y-f.y,d.x-f.x)/Math.PI}},da=
|
||||
function(a,b){var c=Math.min(Math.max(b-a.delay,0),a.duration)/a.duration,e=a.to.numbers.map(function(b,e){var f=a.from.numbers[e],l=C[a.easing](c,a.elasticity),f=a.path?ca(a,l):f+l*(b-f);return f=a.round?Math.round(f*a.round)/a.round:f});return V(e,a.to.strings,a.from.strings)},P=function(a,b){var c;a.currentTime=b;a.progress=b/a.duration*100;for(var e=0;e<a.tweens.length;e++){var d=a.tweens[e];d.currentValue=da(d,b);for(var f=d.currentValue,k=0;k<d.animatables.length;k++){var l=d.animatables[k],
|
||||
m=l.id,l=l.target,h=d.name;switch(d.type){case "css":l.style[h]=f;break;case "attribute":l.setAttribute(h,f);break;case "object":l[h]=f;break;case "transform":c||(c={}),c[m]||(c[m]=[]),c[m].push(f)}}}if(c)for(e in x||(x=(v(document.body,"transform")?"":"-webkit-")+"transform"),c)a.animatables[e].target.style[x]=c[e].join(" ");a.settings.update&&a.settings.update(a)},Q=function(a){var b={};b.animatables=W(a.targets);b.settings=u(a,t);var c=b.settings,e=[],d;for(d in a)if(!t.hasOwnProperty(d)&&"targets"!==
|
||||
d){var g=f.object(a[d])?A(a[d]):{value:a[d]};g.name=d;e.push(u(g,c))}b.properties=e;b.tweens=Y(b.animatables,b.properties);b.duration=Z(b.tweens)||a.duration;b.currentTime=0;b.progress=0;b.ended=!1;return b},n=[],w=0,ea=function(){var a=function(){w=requestAnimationFrame(b)},b=function(b){if(n.length){for(var e=0;e<n.length;e++)n[e].tick(b);a()}else cancelAnimationFrame(w),w=0};return a}(),k=function(a){var b=Q(a),c={};b.tick=function(a){b.ended=!1;c.start||(c.start=a);c.current=Math.min(Math.max(c.last+
|
||||
a-c.start,0),b.duration);P(b,c.current);var d=b.settings;d.begin&&c.current>=d.delay&&(d.begin(b),d.begin=void 0);c.current>=b.duration&&(d.loop?(c.start=a,"alternate"===d.direction&&B(b,!0),f.number(d.loop)&&d.loop--):(b.ended=!0,b.pause(),d.complete&&d.complete(b)),c.last=0)};b.seek=function(a){P(b,a/100*b.duration)};b.pause=function(){ba(b);var a=n.indexOf(b);-1<a&&n.splice(a,1)};b.play=function(a){b.pause();a&&(b=u(Q(u(a,b.settings)),b));c.start=0;c.last=b.ended?0:b.currentTime;a=b.settings;"reverse"===
|
||||
a.direction&&B(b);"alternate"!==a.direction||a.loop||(a.loop=1);aa(b);n.push(b);w||ea()};b.restart=function(){b.reversed&&B(b);b.pause();b.seek(0);b.play()};b.settings.autoplay&&b.play();return b};k.version="1.1.0";k.speed=1;k.list=n;k.remove=function(a){a=z(f.array(a)?a.map(r):r(a));for(var b=n.length-1;0<=b;b--)for(var c=n[b],e=c.tweens,d=e.length-1;0<=d;d--)for(var g=e[d].animatables,k=g.length-1;0<=k;k--)F(a,g[k].target)&&(g.splice(k,1),g.length||e.splice(d,1),e.length||c.pause())};k.easings=
|
||||
C;k.getValue=K;k.path=function(a){a=f.string(a)?E(a)[0]:a;return{path:a,value:a.getTotalLength()}};k.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return k});
|
||||
9
resources/js/anime/externs.js
Normal file
9
resources/js/anime/externs.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
var anime = function() {};
|
||||
anime.version = function() {};
|
||||
anime.speed = function() {};
|
||||
anime.list = function() {};
|
||||
anime.remove = function() {};
|
||||
anime.easing = function() {};
|
||||
anime.getValue = function() {};
|
||||
anime.path = function() {};
|
||||
anime.random = function() {};
|
||||
Loading…
Add table
Reference in a new issue