Skip to content
This repository has been archived by the owner on Jun 23, 2023. It is now read-only.

Commit

Permalink
this issue closes #42, #41, #40, #39
Browse files Browse the repository at this point in the history
  • Loading branch information
@dalisoft
dalisoft committed Nov 5, 2017
1 parent 48486e9 commit b3e18d2
Show file tree
Hide file tree
Showing 22 changed files with 9,531 additions and 1,154 deletions.
448 changes: 96 additions & 352 deletions API.md
View file

Large diffs are not rendered by default.

56 changes: 1 addition & 55 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ ES6 implementation of <a href="https://github.com/tweenjs/tween.js">tween.js</a>

[![size](http://img.badgesize.io/http://unpkg.com/es6-tween?cache=false)](http://unpkg.com/es6-tween)
[![gzipsize](http://img.badgesize.io/http://unpkg.com/es6-tween?compression=gzip&cache=false)](http://unpkg.com/es6-tween)
[![size-lite](http://img.badgesize.io/http://unpkg.com/es6-tween/lite/Tween.min.js?label=lite%20size&cache=false)](http://unpkg.com/es6-tween/lite/Tween.min.js)
[![gzipsize-lite](http://img.badgesize.io/http://unpkg.com/es6-tween/lite/Tween.min.js?compression=gzip&cache=false&label=lite%20gzip%20size)](http://unpkg.com/es6-tween/lite/Tween.min.js)
[![CDNJS](https://img.shields.io/cdnjs/v/es6-tween.svg)](https://cdnjs.com/libraries/es6-tween)
[![jsdelivr](https://img.shields.io/badge/cdn-jsdelivr-brightgreen.svg)](https://cdn.jsdelivr.net/npm/es6-tween) [![unpkg](https://img.shields.io/badge/cdn-unpkg-brightgreen.svg)](https://unpkg.com/es6-tween) [![npmcdn](https://img.shields.io/badge/cdn-npmcdn-brightgreen.svg)](https://npmcdn.com/es6-tween)
[![NPM Version][npm-image]][npm-url]
Expand All @@ -29,33 +27,6 @@ let tween = new TWEEN.Tween(coords)

```

# Adversiting
* Backers will be show there
* The user @dalisoft is looking for job, you can contact to me via [e-mail](mailto:[email protected]), or at [Twitter](https://twitter.com/dalisoft)


# `Lite` version

You can use the `Lite` version of ES6 which lighter (~9Kb minified, ~3Kb min&gzip), faster (~10% faster execution speed), simpler (like the original one), memory effecient and better (can tween second-level Objects/Array). Optimized for runtime performance, no-lag anymore.
When you want building mobile apps that loading files from server, use `Lite` for better performance.
Differences when using `Lite`:

* 2-times lighter size
* No `Timeline` instance
* No `String` tween support
* No `Deep tween` support (does 2-level)
* Uses original `Interpolation` instances for `Bezier` interpolation
* Faster performance and execution speed
* Memory effecient
* No more shims required
* No `Plugins` support
* No `DOM Get/Set`, `Renderer` instance/plugin/add-on support
* No full-Event system, just 3 event support (`onStart`, `onUpdate`, `onComplete`)
* No `seek`, `reverse`, `restart` support
* No event fire when `stop`, `pause`, `etc`
* No `*`, `/`, `%` relatives support


## Plugins

Starting at `v3`, we provide excluded plugins from core, so our core becomes lighter and faster. [Here our plugins list](https://www.npmjs.com/browse/keyword/es6-tween)
Expand All @@ -80,32 +51,19 @@ Download the [library](https://raw.githubusercontent.com/tweenjs/es6-tween/maste
* See [cdnjs-hosted version](https://cdnjs.com/libraries/es6-tween) for get which result you want
* NOTE: `@latest` suffix sometimes saves life by loading latest, because sometimes CDN services will not load the latest

* Now you can load from CDN both version `Full` and `Lite`
* Now you can load from CDN

```html
<!-- jsDelivr -->
<!-- Full -->
<script src="https://cdn.jsdelivr.net/npm/es6-tween"></script>

<!-- Lite -->
<script src="https://cdn.jsdelivr.net/npm/es6-tween/lite/Tween.min.js"></script>



<!-- unpkg -->
<!-- Full -->
<script src="https://unpkg.com/es6-tween"></script>

<!-- Lite -->
<script src="https://unpkg.com/es6-tween/lite/Tween.min.js"></script>


<!-- npmcdn -->
<!-- Full -->
<script src="https://npmcdn.com/es6-tween"></script>

<!-- Lite -->
<script src="https://npmcdn.com/es6-tween/lite/Tween.min.js"></script>
```


Expand Down Expand Up @@ -135,19 +93,11 @@ import { Easing, Interpolation, Tween, autoPlay } from 'es6-tween/src/index.lite
<script src="https://unpkg.com/getlibs"></script>
<script type="x-module">
// ES6
// Full
import { Easing, Tween, autoPlay } from 'es6-tween'
// Lite
import { Easing, Interpolation, Tween, autoPlay } from 'es6-tween/src/index.lite'
// CommonJS
// Full
const { Tween, Easing, autoPlay } = require('es6-tween')
// Lite
const { Easing, Interpolation, Tween, autoPlay } = require('es6-tween/lite/Tween')
</script>
```

Expand All @@ -164,11 +114,7 @@ $ bower install es6-tween
Then include the Tween.js module with the standard node.js `require`:

```javascript
// Full
const { Tween, Easing, autoPlay } = require('es6-tween');

// Lite
const { Tween, Interpolation, Easing, autoPlay } = require('es6-tween/lite/Tween');
```

And you can use Tween.js as in all other examples--for example:
Expand Down
30 changes: 16 additions & 14 deletions examples/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,28 @@
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<script src="../dist/Tween.js"></script>
<script src="../../es6-tween-plugins/renderer/index.js"></script>
<svg id="svg" width="200" height="200" viewBox="-50 -50 200 200">
<path id="pp" d="M0 50 C0 50 5 64 10 56 C16 47 15 16 20 25 C26 34 21 93 29 87 C38 81 42 0 51 2 C59 5 52 92 61 98 C69 104 72 36 81 24 C89 13 87 47 92 56 C97 64 100 50 100 50" stroke-width="2" fill="none" stroke="#fc0"/>
<circle id="p0" cx="0" cy="100" r="5" fill="#0cf"/> <!-- [['M'], [0, 100]] -->
</svg>
<script src="../full/Tween.js"></script>
<script src="../../es6-tween-plugins/renderer/render.js"></script>
<script src="../../es6-tween-plugins/owneasing/owneasing.umd.js"></script>
<script>
const { autoPlay, Tween, Easing, Timeline } = TWEEN;
const { autoPlay, Tween, Easing, Timeline, OwnProps, OwnInterpolation } = TWEEN;

autoPlay(true);

var box = [].slice.call(document.querySelectorAll('.box'));
var box = [].slice.call(document.querySelectorAll('.box'))[0];
var p0 = document.getElementById('p0')
var pp = document.getElementById('pp')

console.log(box);
var _cease = OwnEasing(pp.getAttribute('d'))

var tl = new Timeline();

tl.fromTo(box, {x:'0px'}, {x:'300px'}, {duration:2000,stagger:100,easing:Easing.Elastic.InOut});

tl.yoyo(true).repeat(Infinity)
var t = new Tween(p0, {x:0,y:0}).to({x:100,y:-100}, 20000).easing({y:_cease}).on('update', (obj, t) => {
//const r = _cease([0, 45], t)
//box.style.transform = 'rotate(' + r + 'deg)'
}).start()
</script>
</body>
</html>
8 changes: 4 additions & 4 deletions examples/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
}

function update (v) {
v.el.style.transform = 'translate3d(' + ((v.x * 10) | 0) / 10 + 'px, 0px, 0px)';
v.el.style.transform = 'translate3d(' + v.x + 'px, 0px, 0px)';
}

var nodes = [],
Expand All @@ -62,10 +62,10 @@
tl = Math.floor(random(-200, 200));
div.setAttribute("class", "line");
div.style.top = [(Math.random() * wIh), "px"].join("");
//div.style.left = l + 'px';
div.style.transform = "translate3d(" + l + "px, 0px, 0px)";
div.style.left = l + 'px';
//div.style.transform = "translate3d(" + l + "px, 0px, 0px)";
div.style.backgroundColor = bgC;
var a = new TWEEN.Tween(div, { x : l }).to({ x: tl }, 1000).easing(TWEEN.Easing.Quadratic.InOut).repeat(Infinity).yoyo(true).start();
var a = new TWEEN.Tween(div, { left : l }).to({ left: tl }, 1000).easing(TWEEN.Easing.Quadratic.InOut).repeat(Infinity).yoyo(true).start();

frag.appendChild(div);

Expand Down
9 changes: 2 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "es6-tween",
"version": "3.8.23",
"version": "4.0.1",
"description": "ES6 implementation of amazing tween.js",
"browser": "full/Tween.min.js",
"cdn": "full/Tween.min.js",
Expand All @@ -13,14 +13,9 @@
"source": "rollup -c",
"minify": "uglifyjs full/Tween.js -c -m -o full/Tween.min.js --source-map \"filename='full/Tween.min.js.map'\"",
"build": "npm run source && npm run minify",
"source-lite": "rollup -c rollup.config.lite.js",
"minify-lite": "uglifyjs lite/Tween.js -c -m -o lite/Tween.min.js --source-map \"filename='lite/Tween.min.js.map'\"",
"build-lite": "npm run source-lite && npm run minify-lite",
"buildAll": "tsc && npm run build && npm run build-lite",
"dev": "rollup -c -w",
"dev-lite": "rollup -c rollup.config.lite.js -w",
"test": "tsc && rollup -c && ava --verbose",
"prepublishOnly": "npm run buildAll && ava --verbose && npm run doc && npm run doc-md",
"prepublishOnly": "tsc && npm run build && ava --verbose && npm run doc && npm run doc-md",
"doc": "jsdoc --tutorials guide_notes --readme README.md --configure jsdoc.json --verbose",
"doc-md": "jsdoc2md src/** > API.md"
},
Expand Down
Loading

0 comments on commit b3e18d2

Please sign in to comment.