diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..4e2031e --- /dev/null +++ b/.babelrc @@ -0,0 +1,9 @@ +{ + "presets": [ + ["@babel/preset-env", { + "targets": { + "browsers": ["last 2 versions"] + } + }] + ] +} \ No newline at end of file diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..53c37a1 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +dist \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..1253d55 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,13 @@ +{ + "extends": "airbnb", + "env": { + "browser": true, + "node": false + }, + "rules": { + "indent": ["warn", 4], + "no-restricted-syntax": 0, + "guard-for-in": 0, + "func-names": 0 + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 78f7758..6e3b7b2 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,4 @@ ehthumbs.db Thumbs.db node_modules -bower_components +prepros.cfg diff --git a/LICENSE b/LICENSE index 41d15a2..4f08693 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014 jQueryKeyframes +Copyright (c) 2018 jQuery.Keyframes (https://github.com/Keyframes/jQuery.Keyframes) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index e0d3d28..cab8b9b 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,21 @@ jQuery.Keyframes =========== -jQuery-Keyframes allows dynamic generation of CSS3 keyframes with callback events and other niceness. + +[![npm version](https://img.shields.io/npm/v/jquerykeyframes.svg?style=flat-square)](https://www.npmjs.org/package/jquerykeyframes) + +This library is a wrapper around [Keyframes.js](https://github.com/Keyframes/Keyframes), a vanilla js library that allows dynamic generation of CSS keyframes with callback events and other niceness. Overview -------- -With the rise of CSS3 and HTML5, we see more and more usage of fancy features like transformations, translations, rotations and scaling. +CSS3 introduced fancy features like transformations, translations, rotations and scaling. jQuery has a very nice built in *$(selector).animate()* function which allows for easy setup of these animations. However, jQuery's animate() does not support multiple keyframes. jQuery.Keyframes helps you accomplish just that. Requirements ------------ -In order for jQuery.Keyframes to work the jQuery library needs to be linked either through CDN: - -```html - -``` - -or local copy: ```html - + ``` Installation @@ -30,12 +26,7 @@ Include script in your document using the following line: ``` -Be sure to define and play animations after the page has loaded using jquerys $(window).load - -Vendor Prefixing ----------------- -[Prefix Free](http://leaverou.github.io/prefixfree/) is used on the generated css to automatically add vendor prefixes. This means you should avoid adding any vendor prefixes to your defined css. -For convenience, it is bundled into the minified version. +Be sure to define and play animations only after the page has loaded using `window.onload`. Usage ------------- @@ -64,10 +55,10 @@ $.keyframe.define([{ $.keyframe.define({ name: 'ball-roll', from: { - 'transform': 'rotate(0deg)' //Note that 'transform' will be autoprefixed for you + 'transform': 'rotate(0deg)' }, to: { - 'transform': 'rotate(360deg)' //Note that 'transform' will be autoprefixed for you + 'transform': 'rotate(360deg)' } }); ``` @@ -121,15 +112,30 @@ $.keyframe.define([{ '40%': shake_even2, '50%': shake_odd2, '60%': shake_even1, - '70%': shake_odd1, - '80%': shake_even2, - '90%': shake_odd1 + '75.3%': shake_odd1, + '80.45%': shake_even2, + '91.6%': shake_odd1 } ]); ``` *Please note, you can add as many properties to the array as you want to* +**Responsive animations** +```javascript +$.keyframe.define([{ + name: 'roll-clockwise', + media: 'screen and (max-width: 700px)', + from: { + 'margin-left' : '0px' + }, + to: { + 'margin-left' : '600px' + } + } +]); +``` + **Playing an animation** The css3 animation methods available are better documented here: http://www.w3schools.com/css/css3_animations.asp @@ -137,9 +143,9 @@ The css3 animation methods available are better documented here: http://www.w3sc ```javascript $(selector).playKeyframe({ name: 'trapdoor-sequence', // name of the keyframe you want to bind to the selected element - duration: 1000, // [optional, default: 0, in ms] how long you want it to last in milliseconds + duration: '1s', // [optional, default: 0, in ms] how long you want it to last in milliseconds timingFunction: 'linear', // [optional, default: ease] specifies the speed curve of the animation - delay: 0, //[optional, default: 0] how long you want to wait before the animation starts + delay: '0s', //[optional, default: 0s] how long you want to wait before the animation starts iterationCount: 'infinite', //[optional, default:1] how many times you want the animation to repeat direction: 'normal', //[optional, default: 'normal'] which direction you want the frames to flow fillMode: 'forwards', //[optional, default: 'forward'] how to apply the styles outside the animation time, default value is forwards @@ -151,7 +157,7 @@ $(selector).playKeyframe({ ```javascript $(selector).playKeyframe( - 'trapdoor-sequence 1s linear 0 infinite normal forwards', + 'trapdoor-sequence 1s linear 0s infinite normal forwards', complete ); ``` @@ -160,7 +166,7 @@ $(selector).playKeyframe( ```javascript $(selector).playKeyframe([ - 'trapdoor-sequence 1s linear 0 infinite', + 'trapdoor-sequence 1s linear 0s infinite', { name: 'ball-roll', duration: "3s", @@ -191,9 +197,52 @@ $(selector).resumeKeyframe(); Who is using jQuery.Keyframes? ------------------------------ -* Metrize Premium HTML5 Template: http://themeforest.net/item/metrize-responsive-flipcard-template/7415882 * Hipster Gallery: http://labs.bebensiganteng.com/html5/hipstergallery/#thumbnails/0 +* Ronneby Wordpress Theme: https://themeforest.net/item/ronneby-highperformance-wordpress-theme/11776839?s_rank=1 +* Brooklyn Wordpress Theme: https://themeforest.net/item/brooklyn-responsive-multipurpose-wordpress-theme/6221179 +* Contrive Wordpress Theme: https://themeforest.net/item/contrive-building-construction-html5-template/14535825 +* DFD-Native Wordpress Theme: https://themeforest.net/item/native-powerful-startup-development-tool/19200310 +* Sunday Wordpress Theme: http://themes.dfd.name/sunday/promo/ Plugins! -------- -See other plugins that allow for spritesheets & more complex movement paths: https://github.com/jQueryKeyframes +See other plugins that allow for spritesheets & more complex movement paths: https://github.com/Keyframes + +- [Keyframes.Pathfinder](https://github.com/Keyframes/Keyframes.Pathfinder): A plugin for jQuery.Keyframes that generates complex movement paths +- [Keyframes.Spritesheet](https://github.com/Keyframes/Keyframes.Spritesheet): Keyframes.Spritesheet easily generates css3 keyframes for elements using animated spritesheets. + +## šŸ’– Support Me +Hi! Iā€™m krazyjakee šŸŽ®, creator and maintainĀ­er of Keyframes & NodotProject - a suite of openā€‘source Godot tools (e.g. Nodot, Gedis etc) that empower game developers to build faster and maintain cleaner code. + +Iā€™m looking for sponsors to help sustain and grow the project: more dev time, better docs, more features, and deeper community support. Your support means more stable, polished tools used by indie makers and studios alike. + +[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/krazyjakee) + +Every contribution helps maintain and improve this project. And encourage me to make more projects like this! + +*This is optional support. The tool remains free and open-source regardless.* + +--- + +**Created with ā¤ļø** +For contributions, please open issues on GitHub + +Changelog +--------- + +**2.0.0** +* Update dependencies + +**1.0.0** +* Moved to use [keyframes.js](https://github.com/Keyframes/Keyframes) as a base + +**0.1.0** +* Remove all vendor prefix functionality (if you need this stick with 0.0.9) +* Remove debug output +* Source code now in ES6 +* Remove advanced example +* Add jQuery 3.x to example +* Add linting + +**0.0.9** +* Add debug output diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c419263 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-cayman \ No newline at end of file diff --git a/bower.json b/bower.json deleted file mode 100644 index 917d3e1..0000000 --- a/bower.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "jQueryKeyframes", - "version": "0.0.6", - "homepage": "https://github.com/jQueryKeyframes/jQuery.Keyframes", - "license": "MIT", - "private": false, - "ignore": [ - "**/.*", - "node_modules", - "bower_components" - ], - "dependencies": { - "jquery": "latest", - "prefixfree": "latest" - } -} diff --git a/dist/jquery.keyframes.js b/dist/jquery.keyframes.js new file mode 100644 index 0000000..8bf0170 --- /dev/null +++ b/dist/jquery.keyframes.js @@ -0,0 +1,704 @@ +(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i t[0] && op[1] < t[3])) _.label = op[1];else if (6 === op[0] && _.label < t[1]) _.label = t[1], t = op;else { + if (!(t && _.label < t[2])) { + t[2] && _.ops.pop(), _.trys.pop(); + continue; + } + _.label = t[2], _.ops.push(op); + } + } + op = body.call(thisArg, _); + } catch (e) { + op = [6, e], y = 0; + } finally { + f = t = 0; + } + if (5 & op[0]) throw op[1]; + return { + value: op[0] ? op[1] : void 0, + done: !0 + }; + }; + } + }, + __read = void 0 && (void 0).__read || function (o, n) { + var m = "function" == typeof Symbol && o[Symbol.iterator]; + if (!m) return o; + var r, + e, + i = m.call(o), + ar = []; + try { + for (; (void 0 === n || 0 < n--) && !(r = i.next()).done;) ar.push(r.value); + } catch (error) { + e = { + error: error + }; + } finally { + try { + r && !r.done && (m = i["return"]) && m.call(i); + } finally { + if (e) throw e.error; + } + } + return ar; + }, + __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) { + if (pack || 2 === arguments.length) for (var ar, i = 0, l = from.length; i < l; i++) !ar && i in from || ((ar = ar || Array.prototype.slice.call(from, 0, i))[i] = from[i]); + return to.concat(ar || Array.prototype.slice.call(from)); + }, + __importDefault = void 0 && (void 0).__importDefault || function (mod) { + return mod && mod.__esModule ? mod : { + "default": mod + }; + }, + add_px_to_style_1 = (Object.defineProperty(exports, "__esModule", { + value: !0 + }), exports.isBrowser = void 0, __importDefault(require("add-px-to-style"))), + hyphenate_style_name_1 = __importDefault(require("hyphenate-style-name")), + wait = function wait() { + return new Promise(function (accept) { + requestAnimationFrame(function () { + accept(); + }); + }); + }, + clone = (exports.isBrowser = "undefined" != typeof window, exports.isBrowser && ((styleElem = document.createElement("style")).setAttribute("id", "keyframesjs-stylesheet"), document.head.appendChild(styleElem), keyframesSheet = styleElem.sheet), function (input) { + return Array.isArray(input) ? __spreadArray([], __read(input), !1) : "object" == _typeof(input) ? __assign({}, input) : input.toString(); + }), + voidFunction = function voidFunction() {}, + defaultCallbacks = { + onStart: voidFunction, + onBeforeStart: voidFunction, + onIteration: voidFunction, + onEnd: voidFunction, + onQueueComplete: voidFunction, + onCancel: voidFunction + }, + objToCss = function objToCss(obj) { + if (!Object.keys(obj).length) return ""; + var key, + result = ""; + for (key in obj) result += "".concat((0, hyphenate_style_name_1["default"])(key), ":").concat((0, add_px_to_style_1["default"])(key, obj[key]), ";"); + return result; + }, + Keyframes = function () { + function Keyframes(elem, debug) { + void 0 === debug && (debug = !1), this.playing = !1, this.previousCancel = voidFunction, this.debug = !1, this.queueStore = [], this.callbacks = defaultCallbacks, this.animationstartListener = voidFunction, this.animationendListener = voidFunction, this.animationiterationListener = voidFunction, this.animationcancelListener = voidFunction, this.mountedElement = elem, this.frozenStyles = [], this.debug = debug; + } + return Keyframes.isSupported = function () { + return void 0 !== document.body.style.animationName; + }, Keyframes.prototype.freeze = function () { + var computedStyle_1, + _this = this, + ruleCache = Keyframes.ruleCache[this.mountedElement.style.animationName]; + ruleCache && (computedStyle_1 = __assign({}, getComputedStyle(this.mountedElement)), ruleCache.forEach(function (rule) { + _this.mountedElement.style[rule] = computedStyle_1[rule]; + }), this.frozenStyles = __spreadArray([], __read(new Set(this.frozenStyles.concat(ruleCache))), !1)); + }, Keyframes.prototype.unfreeze = function () { + var _this = this; + this.frozenStyles.length && (this.frozenStyles.forEach(function (rule) { + _this.mountedElement.style[rule] = ""; + }), this.frozenStyles = []); + }, Keyframes.prototype.reset = function () { + return __awaiter(this, void 0, void 0, function () { + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + return this.log("reset"), this.playing = !1, this.removeEvents(), this.mountedElement.style.animationPlayState = "running", this.mountedElement.style.animation = "none", [4, wait()]; + case 1: + return _a.sent(), [2, this]; + } + }); + }); + }, Keyframes.prototype.pause = function () { + return this.mountedElement.style.animationPlayState = "paused", this; + }, Keyframes.prototype.resume = function () { + return this.mountedElement.style.animationPlayState = "running", this; + }, Keyframes.prototype.play = function (animationOptions, callbacks) { + var animationCount, + _this = this, + _a = (this.log("play", animationOptions), callbacks || {}), + _b = _a.onBeforeStart, + _b = void 0 === _b ? null : _b, + _c = _a.onStart, + onStart = void 0 === _c ? null : _c, + _c = _a.onIteration, + onIteration = void 0 === _c ? null : _c, + _c = _a.onEnd, + onEnd = void 0 === _c ? null : _c, + _c = _a.onCancel, + _a = void 0 === _c ? null : _c; + return !0 === this.playing && (this.log("cancelled"), this.previousCancel) && (this.queueStore = [], this.previousCancel()), _a && (this.previousCancel = _a), this.mountedElement.style.animationName === this.getAnimationName(animationOptions) ? (this.freeze(), requestAnimationFrame(function () { + return __awaiter(_this, void 0, void 0, function () { + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + return [4, this.reset()]; + case 1: + return _a.sent(), this.play(animationOptions, callbacks), this.unfreeze(), [2]; + } + }); + }); + })) : (this.playing = !0, animationCount = Array.isArray(animationOptions) ? animationOptions.length : 1, _c = Keyframes.playCSS(animationOptions), _a = function _a(type, eventCallback) { + var listenerName = "".concat(type, "Listener"); + _this.mountedElement.removeEventListener(type, _this[listenerName]), _this[listenerName] = eventCallback, _this.mountedElement.addEventListener(type, _this[listenerName]); + }, this.log("onBeforeStart"), _b && _b(), this.mountedElement.style.animationPlayState = "running", this.mountedElement.style.animation = _c, _a("animationiteration", function (e) { + _this.log("animationiteration", e), onIteration && onIteration(e); + }), _a("animationend", function (e) { + --animationCount || (_this.log("ended", e), _this.playing = !1, onEnd && !animationCount && onEnd(e)); + }), _a("animationstart", function (e) { + _this.log("onStart", e), onStart && onStart(e); + })), this; + }, Keyframes.prototype.playNext = function () { + var _this = this, + animationOption = this.queueStore[this.queueStore.length - 1]; + animationOption ? this.log("playNext", animationOption) : this.log("Queue Complete"), animationOption ? this.play(animationOption, { + onEnd: function onEnd(e) { + _this.queueStore.pop(), _this.callbacks.onEnd && _this.callbacks.onEnd(e), _this.playNext(); + }, + onCancel: this.callbacks.onCancel, + onIteration: this.callbacks.onIteration + }) : this.callbacks.onQueueComplete && this.callbacks.onQueueComplete(); + }, Keyframes.prototype.removeEvents = function () { + return this.log("events cleared"), this.mountedElement.removeEventListener("animationiteration", this.animationiterationListener), this.mountedElement.removeEventListener("animationend", this.animationendListener), this.mountedElement.removeEventListener("animationstart", this.animationstartListener), this; + }, Keyframes.prototype.updateCallbacks = function (callbacks) { + callbacks && (this.callbacks = __assign(__assign({}, this.callbacks), callbacks)); + }, Keyframes.prototype.queue = function (animationOptions, callbacks) { + var _this = this, + currentQueueLength = this.queueStore.length, + callbacks = (this.updateCallbacks(__assign(__assign({}, defaultCallbacks), callbacks)), clone(animationOptions)); + return Array.isArray(callbacks) ? this.queueStore = callbacks.reverse().concat(this.queueStore) : this.queueStore.unshift(callbacks), this.log("queued", animationOptions, currentQueueLength), currentQueueLength ? this.playing || this.playNext() : requestAnimationFrame(function () { + return __awaiter(_this, void 0, void 0, function () { + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + return [4, this.reset()]; + case 1: + return _a.sent(), this.playNext(), [2]; + } + }); + }); + }), this; + }, Keyframes.prototype.chain = function (animationOptions, callbacks) { + return this.queue(animationOptions, callbacks), this; + }, Keyframes.prototype.resetQueue = function () { + return __awaiter(this, void 0, void 0, function () { + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + return this.log("resetQueue"), [4, wait()]; + case 1: + return _a.sent(), this.removeEvents(), this.queueStore = [], [4, this.reset()]; + case 2: + return _a.sent(), [2, this]; + } + }); + }); + }, Keyframes.prototype.loop = function (animationOptions_1) { + return __awaiter(this, arguments, void 0, function (animationOptions, callbacks) { + var _populateQueue, + _this = this; + return void 0 === callbacks && (callbacks = {}), __generator(this, function (_a) { + switch (_a.label) { + case 0: + return this.log("loop", animationOptions), [4, this.resetQueue()]; + case 1: + return _a.sent(), (_populateQueue = function populateQueue() { + _this.queue(animationOptions, __assign(__assign({}, callbacks), { + onQueueComplete: function onQueueComplete() { + return _populateQueue(); + } + })); + })(), [2, this]; + } + }); + }); + }, Keyframes.prototype.getAnimationName = function (animationObject) { + var _this = this; + return Array.isArray(animationObject) ? animationObject.map(function (o) { + return _this.getAnimationName(o); + }).join(", ") : "string" == typeof animationObject ? animationObject.split(" ")[0] : animationObject.name; + }, Keyframes.playCSS = function (animationOptions) { + function animObjToStr(obj) { + return [(obj = __assign({ + duration: "0s", + timingFunction: "ease", + delay: "0s", + iterationCount: 1, + direction: "normal", + fillMode: "forwards" + }, obj)).name, obj.duration, obj.timingFunction, obj.delay, obj.iterationCount, obj.direction, obj.fillMode].join(" "); + } + if (Array.isArray(animationOptions)) { + for (var animationOptionsStrings = [], i = 0; i < animationOptions.length; i += 1) { + var option = animationOptions[i]; + animationOptionsStrings.push("string" == typeof option ? option : animObjToStr(option)); + } + return animationOptionsStrings.join(", "); + } + return "string" == typeof animationOptions ? animationOptions : animObjToStr(animationOptions); + }, Keyframes.generateCSS = function (frameData) { + var key, + cssRuleObject, + css = "@keyframes ".concat(frameData.name, " {"); + for (key in frameData) "name" !== key && "media" !== key && "complete" !== key && (cssRuleObject = objToCss(frameData[key]), css += "".concat(key, " {").concat(cssRuleObject, "}")); + return css += "}", css = frameData.media ? "@media ".concat(frameData.media, "{").concat(css, "}") : css; + }, Keyframes.generate = function (frameData) { + this.addToRuleCache(frameData); + var css = this.generateCSS(frameData), + oldFrameIndex = Keyframes.rules.indexOf(frameData.name), + oldFrameIndex = (-1 < oldFrameIndex && (Keyframes.sheet.deleteRule(oldFrameIndex), Keyframes.rules.splice(oldFrameIndex, 1)), (Keyframes.sheet.cssRules || Keyframes.sheet.rules).length); + Keyframes.sheet.insertRule(css, oldFrameIndex), Keyframes.rules[oldFrameIndex] = frameData.name; + }, Keyframes.define = function (frameOptions) { + if (Array.isArray(frameOptions)) for (var i = 0; i < frameOptions.length; i += 1) this.generate(frameOptions[i]);else this.generate(frameOptions); + }, Keyframes.defineCSS = function (frameOptions) { + if (Array.isArray(frameOptions)) { + for (var css = "", i = 0; i < frameOptions.length; i += 1) css += this.generateCSS(frameOptions[i]); + return css; + } + return this.generateCSS(frameOptions); + }, Keyframes.addToRuleCache = function (frameData) { + var rules; + this.ruleCache[frameData.name] || (rules = Object.values(frameData).filter(function (v) { + return "object" == _typeof(v); + }).map(function (v) { + return Object.keys(v); + }).flat(), this.ruleCache[frameData.name] = __spreadArray([], __read(new Set(rules)), !1)); + }, Keyframes.prototype.log = function (msg) { + for (var _i = 1; _i < arguments.length; _i++) _i - 1, 0; + this.debug; + }, Keyframes.sheet = keyframesSheet, Keyframes.rules = [], Keyframes.ruleCache = {}, Keyframes.clearRules = function () { + for (Keyframes.rules = []; Keyframes.sheet.cssRules.length;) Keyframes.sheet.deleteRule(0); + }, Keyframes; + }(); +exports.isBrowser && (window.Keyframes = Keyframes), __exportStar(require("./pathfinder"), exports), __exportStar(require("./spritesheet"), exports), exports["default"] = Keyframes; + +},{"./pathfinder":3,"./spritesheet":4,"add-px-to-style":5,"hyphenate-style-name":6}],3:[function(require,module,exports){ +"use strict"; + +var __assign = void 0 && (void 0).__assign || function () { + __assign = Object.assign || function (t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.circlePath = exports.bezierPath = void 0; +var keyframes_1 = require("./keyframes"); +function getCirclePoint(radians, radius, center) { + return { + x: center.x + radius * Math.cos(radians), + y: center.y + radius * Math.sin(radians) + }; +} +var coord = function coord(x, y) { + if (x === void 0) { + x = 0; + } + if (y === void 0) { + y = 0; + } + return { + x: x, + y: y + }; +}; +var B1 = function B1(t) { + return t * t * t; +}; +var B2 = function B2(t) { + return 3 * t * t * (1 - t); +}; +var B3 = function B3(t) { + return 3 * t * (1 - t) * (1 - t); +}; +var B4 = function B4(t) { + return (1 - t) * (1 - t) * (1 - t); +}; +var getBezier = function getBezier(percent, C1, C2, C3, C4) { + var pos = coord(); + pos.x = C1.x * B1(percent) + C2.x * B2(percent) + C3.x * B3(percent) + C4.x * B4(percent); + pos.y = C1.y * B1(percent) + C2.y * B2(percent) + C3.y * B3(percent) + C4.y * B4(percent); + return pos; +}; +var bezierPath = function bezierPath(keyframeOptions, p1, p2, p3, p4) { + var opts = __assign({ + bezierSteps: 100, + transform: "" + }, keyframeOptions); + if (p4 == null) { + p4 = p1; + } + var vector1 = coord(p1[0], p1[1]); + var vector2 = coord(p2[0], p2[1]); + var vector3 = coord(p3[0], p3[1]); + var vector4 = coord(p4[0], p4[1]); + var points = {}; + var step = 1 / opts.bezierSteps; + for (var i = 0; i <= 1.01; i += step) { + var newPosition = getBezier(i, vector1, vector4, vector3, vector2); + points["".concat(100 - Math.round(i * 100), "%")] = { + transform: "translate(".concat(newPosition.x, "px,").concat(newPosition.y, "px) ").concat(opts.transform) + }; + } + return Object.assign({}, keyframeOptions, points); +}; +exports.bezierPath = bezierPath; +var circlePath = function circlePath(keyframeOptions, center, radius) { + var opts = __assign({ + circleSteps: 100, + transform: "" + }, keyframeOptions); + var points = {}; + var newCenter = coord(center[0], center[1]); + var pieandahalf = 1.5 * Math.PI; + var notmuchpie = Math.PI / 180; + var stepPercentage = 100 / opts.circleSteps; + var stepDegree = 360 / opts.circleSteps; + for (var i = 0; i <= opts.circleSteps; i += 1) { + var degree = stepDegree * i; + var radians = pieandahalf + degree * notmuchpie; + var newpos = getCirclePoint(radians, radius, newCenter); + points["".concat(Math.round(stepPercentage * i), "%")] = { + transform: "translate(".concat(newpos.x, "px,").concat(newpos.y, "px) ").concat(opts.transform) + }; + } + for (var step in keyframeOptions) { + var rules = keyframeOptions[step]; + for (var newstep in points) { + var newrules = points[newstep]; + if (step === newstep) { + if (newrules.transform && rules.transform) { + points[newstep].transform = "".concat(newrules.transform, " ").concat(rules.transform); + break; + } + } + } + } + return Object.assign({}, keyframeOptions, points); +}; +exports.circlePath = circlePath; +if (keyframes_1.isBrowser) { + var _window = window; + if (_window.Keyframes) { + _window.Keyframes.bezierPath = exports.bezierPath; + _window.Keyframes.circlePath = exports.circlePath; + } +} + +},{"./keyframes":2}],4:[function(require,module,exports){ +"use strict"; + +var __assign = void 0 && (void 0).__assign || function () { + __assign = Object.assign || function (t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = void 0 && (void 0).__rest || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; + } + return t; +}; +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.playSpriteSheet = exports.spriteSheet = void 0; +var keyframes_1 = require("./keyframes"); +var spriteSheet = function spriteSheet(_a) { + var _b = _a.rows, + rows = _b === void 0 ? 1 : _b, + _c = _a.cols, + cols = _c === void 0 ? 1 : _c, + _d = _a.width, + width = _d === void 0 ? 0 : _d, + _e = _a.height, + height = _e === void 0 ? 0 : _e, + rest = __rest(_a, ["rows", "cols", "width", "height"]); + var defaults = { + offsetX: 0, + offsetY: 0, + count: rows * cols, + spriteWidth: width / cols, + spriteHeight: height / rows, + loop: true + }; + var opts = __assign(__assign(__assign({}, defaults), { + rows: rows, + cols: cols, + width: width, + height: height + }), rest); + var spriteStep = 100 / opts.count; + var spriteFrames = {}; + var x = opts.offsetX; + var y = opts.offsetY; + for (var i = 0; i < opts.count; i += 1) { + spriteFrames["".concat(Math.round(spriteStep * i), "%")] = { + backgroundPosition: "-".concat(x, "px -").concat(y, "px") + }; + if (x >= opts.width - opts.spriteWidth) { + y += opts.spriteHeight; + } else { + x += opts.spriteWidth; + } + } + return Object.assign({}, { + name: opts.name + }, spriteFrames); +}; +exports.spriteSheet = spriteSheet; +var playSpriteSheet = function playSpriteSheet(name, time, loops) { + if (loops === void 0) { + loops = 'infinite'; + } + if (typeof loops === 'number' && loops < 0) { + loops = 'infinite'; + } + return "".concat(name, " ").concat(time, " steps(1) ").concat(loops); +}; +exports.playSpriteSheet = playSpriteSheet; +if (keyframes_1.isBrowser) { + var _window = window; + if (_window.Keyframes) { + _window.Keyframes.spriteSheet = exports.spriteSheet; + _window.Keyframes.playSpriteSheet = exports.playSpriteSheet; + } +} + +},{"./keyframes":2}],5:[function(require,module,exports){ +"use strict"; + +/* The following list is defined in React's core */ +var IS_UNITLESS = { + animationIterationCount: true, + boxFlex: true, + boxFlexGroup: true, + boxOrdinalGroup: true, + columnCount: true, + flex: true, + flexGrow: true, + flexPositive: true, + flexShrink: true, + flexNegative: true, + flexOrder: true, + gridRow: true, + gridColumn: true, + fontWeight: true, + lineClamp: true, + lineHeight: true, + opacity: true, + order: true, + orphans: true, + tabSize: true, + widows: true, + zIndex: true, + zoom: true, + // SVG-related properties + fillOpacity: true, + stopOpacity: true, + strokeDashoffset: true, + strokeOpacity: true, + strokeWidth: true +}; +module.exports = function (name, value) { + if (typeof value === 'number' && !IS_UNITLESS[name]) { + return value + 'px'; + } else { + return value; + } +}; + +},{}],6:[function(require,module,exports){ +'use strict'; + +/* eslint-disable no-var, prefer-template */ +var uppercasePattern = /[A-Z]/g; +var msPattern = /^ms-/; +var cache = {}; +function toHyphenLower(match) { + return '-' + match.toLowerCase(); +} +function hyphenateStyleName(name) { + if (cache.hasOwnProperty(name)) { + return cache[name]; + } + var hName = name.replace(uppercasePattern, toHyphenLower); + return cache[name] = msPattern.test(hName) ? '-' + hName : hName; +} +module.exports = hyphenateStyleName; + +},{}]},{},[1]); diff --git a/dist/jquery.keyframes.min.js b/dist/jquery.keyframes.min.js new file mode 100644 index 0000000..6fc1210 --- /dev/null +++ b/dist/jquery.keyframes.min.js @@ -0,0 +1 @@ +!function r(o,i,a){function s(t,e){if(!i[t]){if(!o[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(u)return u(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}n=i[t]={exports:{}},o[t][0].call(n.exports,function(e){return s(o[t][1][e]||e)},n,n.exports,r,o,i,a)}return i[t].exports}for(var u="function"==typeof require&&require,e=0;es[0]&&t[1]{if(!Object.keys(e).length)return"";var t,n="";for(t in e)n+="".concat((0,d.default)(t),":").concat((0,m.default)(t,e[t]),";");return n})(e[t]),r+="".concat(t," {").concat(n,"}"));return r+="}",e.media?"@media ".concat(e.media,"{").concat(r,"}"):r},g.generate=function(e){this.addToRuleCache(e);var t=this.generateCSS(e),n=(-1<(n=g.rules.indexOf(e.name))&&(g.sheet.deleteRule(n),g.rules.splice(n,1)),(g.sheet.cssRules||g.sheet.rules).length);g.sheet.insertRule(t,n),g.rules[n]=e.name},g.define=function(e){if(Array.isArray(e))for(var t=0;t=i.width-i.spriteWidth?c+=i.spriteHeight:u+=i.spriteWidth;return Object.assign({},{name:i.name},s)};n.playSpriteSheet=function(e,t,n){return"number"==typeof(n=void 0===n?"infinite":n)&&n<0&&(n="infinite"),"".concat(e," ").concat(t," steps(1) ").concat(n)},e.isBrowser&&(e=window).Keyframes&&(e.Keyframes.spriteSheet=n.spriteSheet,e.Keyframes.playSpriteSheet=n.playSpriteSheet)},{"./keyframes":2}],5:[function(e,t,n){var r={animationIterationCount:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,stopOpacity:!0,strokeDashoffset:!0,strokeOpacity:!0,strokeWidth:!0};t.exports=function(e,t){return"number"!=typeof t||r[e]?t:t+"px"}},{}],6:[function(e,t,n){var r=/[A-Z]/g,o=/^ms-/,i={};function a(e){return"-"+e.toLowerCase()}t.exports=function(e){var t;return i.hasOwnProperty(e)?i[e]:(t=e.replace(r,a),i[e]=o.test(t)?"-"+t:t)}},{}]},{},[1]); diff --git a/example/advanced/css/style.css b/example/advanced/css/style.css deleted file mode 100644 index 09f9054..0000000 --- a/example/advanced/css/style.css +++ /dev/null @@ -1,51 +0,0 @@ -/* line 1, ../style.sass */ -html, body { - margin: 0; - padding: 0; - overflow-x: hidden; -} - -/* line 6, ../style.sass */ -.hills { - width: 100%; - height: auto; - margin-top: 200px; -} - -/* line 11, ../style.sass */ -.sun, .balloon, .birds, .cloud, .leaf { - height: auto; - position: absolute; - left: 0; - top: 0; -} - -/* line 17, ../style.sass */ -.sun { - width: 100px; -} - -/* line 19, ../style.sass */ -.balloon { - width: 100px; -} - -/* line 21, ../style.sass */ -.birds { - width: 100px; - display: none; -} - -/* line 24, ../style.sass */ -.cloud { - width: 400px; -} - -/* line 27, ../style.sass */ -.leaf { - width: 14px; - height: 14px; - background-image: url(../img/leaf.png); - background-size: cover; - display: none; -} diff --git a/example/advanced/img/balloon.png b/example/advanced/img/balloon.png deleted file mode 100644 index d6cc030..0000000 Binary files a/example/advanced/img/balloon.png and /dev/null differ diff --git a/example/advanced/img/birds.png b/example/advanced/img/birds.png deleted file mode 100644 index 9cfd156..0000000 Binary files a/example/advanced/img/birds.png and /dev/null differ diff --git a/example/advanced/img/cloud.png b/example/advanced/img/cloud.png deleted file mode 100644 index fdc68e2..0000000 Binary files a/example/advanced/img/cloud.png and /dev/null differ diff --git a/example/advanced/img/hills.png b/example/advanced/img/hills.png deleted file mode 100644 index fd86eb4..0000000 Binary files a/example/advanced/img/hills.png and /dev/null differ diff --git a/example/advanced/img/leaf.png b/example/advanced/img/leaf.png deleted file mode 100644 index f8b2eed..0000000 Binary files a/example/advanced/img/leaf.png and /dev/null differ diff --git a/example/advanced/img/sun.png b/example/advanced/img/sun.png deleted file mode 100644 index 46529ac..0000000 Binary files a/example/advanced/img/sun.png and /dev/null differ diff --git a/example/advanced/index.html b/example/advanced/index.html deleted file mode 100644 index 9acf648..0000000 --- a/example/advanced/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - jQuery-Keyframes Advanced Example - - - -
- hillssunballoonbirdscloud -
-
- - - - - - - diff --git a/example/advanced/js/animation.coffee b/example/advanced/js/animation.coffee deleted file mode 100644 index 3b90f41..0000000 --- a/example/advanced/js/animation.coffee +++ /dev/null @@ -1,15 +0,0 @@ -bcode = $.keyframe.vendorPrefix() - -$.keyframe.define [ - name: "clouds" - "from": "margin-left:-50%" - "to": "margin-left:100%" -, - name: "balloon" - "from": "margin-top:200px;margin-left:100%;#{bcode}transform:scale(1)" - "to": "margin-top:100px;margin-left:-20%;#{bcode}transform:scale(0.3)" -, - name: "sun" - "from": "margin-top:50px;margin-left:-20px;#{bcode}transform:rotate(360deg)" - "to": "margin-top:-20px;margin-left:100px;#{bcode}transform:rotate(0deg)" -] \ No newline at end of file diff --git a/example/advanced/js/animation.js b/example/advanced/js/animation.js deleted file mode 100644 index ab875e6..0000000 --- a/example/advanced/js/animation.js +++ /dev/null @@ -1,40 +0,0 @@ -(function() { - var pfx = $.keyframe.getVendorPrefix(); - var transform = pfx + 'transform'; - - $.keyframe.define([{ - name: 'clouds', - 'from': { - 'margin-left': '-50%' - }, - 'to': { - 'margin-left': '100%' - } - }, { - name: 'balloon', - 'from': { - 'margin-top': '200px', - 'margin-left': '100%', - 'transform': 'transform:scale(1)' - }, - 'to': { - 'margin-top': '100px', - 'margin-left': '-20%', - 'transform': 'transform:scale(0.3)' - } - }, { - name: 'sun', - 'from': { - 'margin-top': '50px', - 'margin-left': '-20px', - 'transform': 'transform:rotate(360deg)' - }, - 'to': { - 'margin-top': '-20px', - 'margin-left': '100px', - 'transform': 'transform:rotate(0deg)' - } - } - ]); - -}).call(this); diff --git a/example/advanced/js/animation.min.js b/example/advanced/js/animation.min.js deleted file mode 100644 index b0c5d80..0000000 --- a/example/advanced/js/animation.min.js +++ /dev/null @@ -1 +0,0 @@ -(function(){$.keyframe.getVendorPrefix();$.keyframe.define([{name:"clouds",from:{"margin-left":"-50%"},to:{"margin-left":"100%"}},{name:"balloon",from:{"margin-top":"200px","margin-left":"100%",transform:"transform:scale(1)"},to:{"margin-top":"100px","margin-left":"-20%",transform:"transform:scale(0.3)"}},{name:"sun",from:{"margin-top":"50px","margin-left":"-20px",transform:"transform:rotate(360deg)"},to:{"margin-top":"-20px","margin-left":"100px",transform:"transform:rotate(0deg)"}}])}).call(this); \ No newline at end of file diff --git a/example/advanced/js/init.js b/example/advanced/js/init.js deleted file mode 100644 index b07a364..0000000 --- a/example/advanced/js/init.js +++ /dev/null @@ -1,8 +0,0 @@ -(function() { - $(window).ready(function() { - $('.cloud').playKeyframe('clouds 40s linear 0 infinite'); - $('.balloon').playKeyframe('balloon 40s ease 0 infinite'); - $('.sun').playKeyframe('sun 40s linear 0 infinite'); - }); - -}).call(this); diff --git a/example/index.html b/example/index.html index 0c66dd2..c4db077 100644 --- a/example/index.html +++ b/example/index.html @@ -3,35 +3,25 @@ jQuery-Keyframes Example - - - + +