├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── examples └── index.html ├── package.json ├── rollup.config.js └── src ├── easing.js ├── index.js └── tween.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | package-lock.json 64 | 65 | dist 66 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | examples/ 2 | src/ 3 | rollup.config.js 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 PengJiyuan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # b-tween 2 | A simple but powerful tweening engine for Javascript. 3 | 4 | ## Install 5 | 6 | ```bash 7 | npm i b-tween 8 | ``` 9 | 10 | ## Usage 11 | 12 | #### ES Module 13 | 14 | ```js 15 | import BTween from 'b-tween'; 16 | const tween = new BTween({ 17 | from: { 18 | left: 0 19 | }, 20 | to: { 21 | left: 700 22 | }, 23 | duration: 500, 24 | easing: 'bounceOut', 25 | onUpdate: (keys) => { 26 | // You can do everything with keys 27 | block.style.left = keys.left + 'px'; 28 | } 29 | }); 30 | tween.start(); 31 | ``` 32 | 33 | #### Commonjs 34 | 35 | ```js 36 | const BTween = require('b-tween'); 37 | ... 38 | ``` 39 | 40 | #### Browser 41 | 42 | https://unpkg.com/b-tween/dist/b-tween.umd.js 43 | 44 | ```html 45 | 46 | 52 | ``` 53 | 54 | ## Api 55 | 56 | ### new Tween(options) 57 | 58 | #### options.from (object) 59 | 60 | #### options.to (object) 61 | 62 | #### options.duration (number) 63 | 64 | #### options.delay (number) 65 | 66 | #### options.easing (string) 67 | 68 | * linear 69 | * quadIn 70 | * quadOut 71 | * quadInOut 72 | * cubicIn 73 | * cubicOut 74 | * cubicInOut 75 | * quartIn 76 | * quartOut 77 | * quartInOut 78 | * quintIn 79 | * quintOut 80 | * quintInOut 81 | * sineIn 82 | * sineOut 83 | * sineInOut 84 | * bounceIn 85 | * bounceOut 86 | * bounceInOut 87 | 88 | #### options.onStart ( function(keys) {} ) 89 | 90 | #### options.onUpdate ( function(keys) {} ) 91 | 92 | #### options.onFinish ( function(keys) {} ) 93 | 94 | ### Start Animation 95 | 96 | ```js 97 | const tween = new Btween({...}); 98 | tween.start(); 99 | ``` 100 | 101 | ## LICENSE 102 | 103 | [MIT](./LICENSE) © [PengJiyuan](https://github.com/PengJiyuan) 104 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | B-tween example 8 | 56 | 57 | 58 |

b-tween

59 |

A simple but powerful tweening engine for Javascript.

60 |
61 |
62 | 缓动方式： 63 | 84 | 缓动时间： 85 | 86 | 87 | 88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 | 96 | 97 | 98 | 99 | 100 | 137 | 138 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "b-tween", 3 | "version": "0.3.3", 4 | "description": "A simple but powerful tweening engine for Javascript.", 5 | "main": "./dist/b-tween.cjs.js", 6 | "module": "./dist/b-tween.es.js", 7 | "scripts": { 8 | "dev-cjs": "rollup -c -f cjs -o ./dist/b-tween.cjs.js -w", 9 | "dev-es": "rollup -c -w", 10 | "dev-umd": "rollup -c -f umd -o ./dist/b-tween.umd.js -n BTween -w", 11 | "build": "rm -rf dist/* && rollup -c -o ./dist/b-tween.es.js && rollup -c -f cjs -o ./dist/b-tween.cjs.js && rollup -c -f umd -n BTween -o ./dist/b-tween.umd.js" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/PengJiyuan/b-tween.git" 16 | }, 17 | "keywords": [ 18 | "tween", 19 | "animation", 20 | "javascript", 21 | "motion", 22 | "transform" 23 | ], 24 | "author": "PengJiyuan", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/PengJiyuan/b-tween/issues" 28 | }, 29 | "homepage": "https://github.com/PengJiyuan/b-tween#readme", 30 | "devDependencies": { 31 | "pre-commit": "^1.2.2", 32 | "rollup": "^1.9.0", 33 | "rollup-plugin-buble": "^0.19.6" 34 | }, 35 | "pre-commit": [ 36 | "build" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import buble from 'rollup-plugin-buble'; 2 | 3 | const config = { 4 | input: './src/index.js', 5 | output: { 6 | file: './dist/b-tween.es.js', 7 | format: 'es' 8 | }, 9 | plugins: [ 10 | buble({objectAssign: true}) 11 | ] 12 | }; 13 | 14 | export default config; 15 | -------------------------------------------------------------------------------- /src/easing.js: -------------------------------------------------------------------------------- 1 | // https://github.com/LiikeJS/Liike/blob/master/src/ease.js 2 | const easeInBy = power => t => Math.pow(t, power); 3 | const easeOutBy = power => t => 1 - Math.abs(Math.pow(t - 1, power)); 4 | const easeInOutBy = power => t => t < 0.5 ? easeInBy(power)(t * 2) / 2 : easeOutBy(power)(t * 2 - 1) / 2 + 0.5; 5 | 6 | export const linear = t => t; 7 | export const quadIn = easeInBy(2); 8 | export const quadOut = easeOutBy(2); 9 | export const quadInOut = easeInOutBy(2); 10 | export const cubicIn = easeInBy(3); 11 | export const cubicOut = easeOutBy(3); 12 | export const cubicInOut = easeInOutBy(3); 13 | export const quartIn = easeInBy(4); 14 | export const quartOut = easeOutBy(4); 15 | export const quartInOut = easeInOutBy(4); 16 | export const quintIn = easeInBy(5); 17 | export const quintOut = easeOutBy(5); 18 | export const quintInOut = easeInOutBy(5); 19 | export const sineIn = t => 1 + Math.sin(Math.PI / 2 * t - Math.PI / 2); 20 | export const sineOut = t => Math.sin(Math.PI / 2 * t); 21 | export const sineInOut = t => (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2; 22 | export const bounceOut = t => { 23 | const s = 7.5625; 24 | const p = 2.75; 25 | 26 | if (t < 1 / p) { 27 | return s * t * t; 28 | } 29 | if (t < 2 / p) { 30 | t -= 1.5 / p; 31 | return s * t * t + 0.75; 32 | } 33 | if (t < 2.5 / p) { 34 | t -= 2.25 / p; 35 | return s * t * t + 0.9375; 36 | } 37 | t -= 2.625 / p; 38 | return s * t * t + 0.984375; 39 | }; 40 | export const bounceIn = t => 1 - bounceOut(1 - t); 41 | export const bounceInOut = t => t < 0.5 ? bounceIn(t * 2) * 0.5 : bounceOut(t * 2 - 1) * 0.5 + 0.5; 42 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { Tween } from './tween'; 2 | 3 | export default Tween; 4 | -------------------------------------------------------------------------------- /src/tween.js: -------------------------------------------------------------------------------- 1 | import * as easing from './easing'; 2 | 3 | export class Tween { 4 | constructor(settings) { 5 | const { 6 | from, 7 | to, 8 | duration, 9 | delay, 10 | easing, 11 | onStart, 12 | onUpdate, 13 | onFinish 14 | } = settings; 15 | 16 | for (let key in from) { 17 | if (to[key] === undefined) { 18 | to[key] = from[key]; 19 | } 20 | } 21 | for (let key in to) { 22 | if (from[key] === undefined) { 23 | from[key] = to[key]; 24 | } 25 | } 26 | 27 | this.from = from; 28 | this.to = to; 29 | this.duration = duration || 500; 30 | this.delay = delay || 0; 31 | this.easing = easing || 'linear'; 32 | this.onStart = onStart; 33 | this.onUpdate = onUpdate || function () { }; 34 | this.onFinish = onFinish; 35 | this.startTime = Date.now() + this.delay; 36 | this.started = false; 37 | this.finished = false; 38 | this.timer = null; 39 | this.keys = {}; 40 | } 41 | 42 | update() { 43 | this.time = Date.now(); 44 | // delay some time 45 | if (this.time < this.startTime) { 46 | return; 47 | } 48 | if (this.finished) { 49 | return; 50 | } 51 | // finish animation 52 | if (this.elapsed === this.duration) { 53 | if (!this.finished) { 54 | this.finished = true; 55 | this.onFinish && this.onFinish(this.keys); 56 | } 57 | return; 58 | } 59 | this.elapsed = this.time - this.startTime; 60 | this.elapsed = this.elapsed > this.duration ? this.duration : this.elapsed; 61 | for (let key in this.to) { 62 | this.keys[key] = this.from[key] + (this.to[key] - this.from[key]) * easing[this.easing](this.elapsed / this.duration); 63 | } 64 | if (!this.started) { 65 | this.onStart && this.onStart(this.keys); 66 | this.started = true; 67 | } 68 | this.onUpdate(this.keys); 69 | } 70 | 71 | start() { 72 | this.startTime = Date.now() + this.delay; 73 | const tick = () => { 74 | this.update(); 75 | this.timer = requestAnimationFrame(tick); 76 | if (this.finished) { 77 | cancelAnimationFrame(this.timer); 78 | this.timer = null; 79 | } 80 | }; 81 | tick(); 82 | } 83 | 84 | stop() { 85 | cancelAnimationFrame(this.timer); 86 | this.timer = null; 87 | } 88 | } 89 | --------------------------------------------------------------------------------