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

Commit 7f806c9

Browse files
dalisoftdalisoft
committed
## UPDATE
#### Improvements - Improved demo with more real example #### NEW features - Added `Composite#Init` feature
1 parent 5d59292 commit 7f806c9

File tree

9 files changed

+148
-93
lines changed

9 files changed

+148
-93
lines changed

‎CHANGELOG.md

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# CHANGELOG
22

3+
## v1.10.5
4+
5+
#### Improvements
6+
- Improved demo with more real example
7+
8+
#### NEW features
9+
- Added `Composite#Init` feature
10+
311
## v1.10.3: Much new features
412

513
#### Fixes

‎dist/Tween.js

+28-14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Tween.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/test.html

+80-66
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,87 @@
1-
<html><head>
2-
<meta charset="UTF-8">
3-
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
4-
<title>Unim.js</title>
5-
<style>
6-
#container {
7-
width: 200px;
8-
height: auto;
9-
margin: 0 auto;
10-
position: relative;
11-
display: block;
12-
}
13-
14-
.line {
15-
width: 200px;
16-
height: 2px;
17-
position: absolute;
18-
}
19-
</style>
20-
</head>
21-
<body>
1+
<html>
222

23-
<div id="container"></div>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
6+
<title>TWEEN.js</title>
7+
<style>
8+
#container {
9+
width: 200px;
10+
height: auto;
11+
margin: 0 auto;
12+
position: relative;
13+
display: block;
14+
}
15+
16+
.line {
17+
width: 200px;
18+
height: 2px;
19+
position: absolute;
20+
}
21+
</style>
22+
</head>
2423

25-
<script src="../dist/Tween.js"></script>
26-
<script>
27-
28-
TWEEN.autoPlay(true);
24+
<body>
2925

30-
function random(min, max) {
31-
return Math.random() * (max - min) + min;
32-
}
26+
<div id="container"></div>
3327

34-
var nodes = [],
35-
c = document.getElementById("container"),
36-
easing = "quadraticInOut",
37-
wIh = window.innerHeight || screen.height - 40,
38-
frag = document.createDocumentFragment();
39-
40-
const update = (object) => {
41-
object.dom.style.transform = object.transform;
42-
}
28+
<script src="../dist/Tween.js"></script>
29+
<script>
30+
TWEEN.autoPlay(true);
4331

44-
const Style = TWEEN.Plugins.DOM;
32+
function random(min, max) {
33+
return Math.random() * (max - min) + min;
34+
}
4535

46-
function createTest(count) {
47-
var i;
48-
for (i = 0; i < count; i++) {
49-
var div = document.createElement("div"),
50-
bg = (Math.random() * 0xffffff) >> 0,
51-
bgC = "#" + bg.toString(16),
52-
l = Math.floor(random(-200, 200)),
53-
dl = Math.floor(Math.random() * 1000),
54-
tl = Math.floor(random(-200, 200));
55-
div.setAttribute("class", "line");
56-
div.style.top = [(Math.random() * wIh), "px"].join("");
57-
div.style.transform = "translate3d(" + l + "px, 0px, 0px)";
58-
//div.style.left = l + "px";
59-
div.style.backgroundColor = bgC;
60-
nodes.push(div);
61-
frag.appendChild(div);
62-
var layer = new TWEEN.Composite(div).applyPlugin('DOM');
63-
var a = new TWEEN.Tween({ transform : `translate3d(${ l }px, 0px, 0px)`,dom:div }).to({
64-
transform : `translate3d(${ tl }px, 0px, 0px)`
65-
}, 1000).easing(TWEEN.Easing.Quadratic.InOut).on('update', layer.render).repeat(Infinity).yoyo(true).start();
36+
var nodes = [],
37+
c = document.getElementById("container"),
38+
easing = "quadraticInOut",
39+
ratio = 0.9,
40+
wIh = (window.innerHeight || screen.height - 40) * ratio,
41+
wIw = window.innerWidth,
42+
hwiw = (wIw / 5) * ratio,
43+
frag = document.createDocumentFragment();
6644

67-
}
68-
c.appendChild(frag);
69-
}
70-
createTest(2);
71-
</script>
72-
73-
</body></html>
45+
const update = (object) => {
46+
object.dom.style.transform = object.transform;
47+
}
48+
49+
const Style = TWEEN.Plugins.DOM;
50+
51+
function createTest(count) {
52+
var i;
53+
for (i = 0; i < count; i++) {
54+
var div = document.createElement("div"),
55+
bg = (Math.random() * 0xffffff) >> 0,
56+
bgC = "#" + bg.toString(16),
57+
l = Math.floor(random(-200, 200)),
58+
dl = Math.floor(Math.random() * 1000),
59+
tl = Math.floor(random(-200, 200));
60+
div.setAttribute("class", "line");
61+
div.style.top = [(Math.random() * wIh), "px"].join("");
62+
div.style.transform = "translate3d(" + -hwiw + "px, 0px, 0px)";
63+
//div.style.left = l + "px";
64+
div.style.backgroundColor = bgC;
65+
var layer = new TWEEN.Composite(div).applyPlugin('DOM');
66+
var a = new TWEEN.Tween({ transform: `translate3d(${ -hwiw }px, 0px, 0px)` }).to({
67+
transform: `translate3d(${hwiw}px, 0px, 0px)`
68+
}, 1000).easing(TWEEN.Easing.Circular.InOut).on('update', layer.render).repeat(Infinity).yoyo(true);
69+
nodes.push({ layer: layer, node: div, tween: a });
70+
71+
}
72+
nodes.sort((a, b) => {
73+
return parseFloat(a.node.style.top) - parseFloat(b.node.style.top);
74+
}).map((node, i) => {
75+
frag.appendChild(node.node);
76+
node.tween.delay(delay => {
77+
return (i * (i % 2 ? 15 : -15));
78+
}).start();
79+
})
80+
c.appendChild(frag);
81+
}
82+
createTest(200);
83+
</script>
84+
85+
</body>
86+
87+
</html>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "es6-tween",
3-
"version": "1.10.3",
3+
"version": "1.10.5",
44
"description": "ES6 implementation of amazing tween.js",
55
"main": "dist/Tween.js",
66
"directories": {

‎src/dist/Composite.js

+12-6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ export default class Composite {
77

88
let self = this;
99

10-
this.mode = 'dom';
1110
this.domNode = domNode;
1211
this.plugins = {};
1312
let pluginList = this.plugins;
@@ -22,6 +21,18 @@ export default class Composite {
2221

2322
return this;
2423
};
24+
25+
this.init = function (object) {
26+
27+
for (let p in pluginList) {
28+
29+
pluginList[p] && pluginList[p].init && pluginList[p].init(this, object);
30+
31+
}
32+
33+
return this;
34+
}
35+
2536
return this;
2637
}
2738
applyPlugin(name) {
@@ -30,11 +41,6 @@ export default class Composite {
3041
}
3142
return this;
3243
}
33-
drawMode(mode = 'dom') {
34-
// TO-DO: Implement SVG and Canvas mode
35-
this.mode = mode;
36-
return this;
37-
}
3844
set object(obj) {
3945
return this.render(obj);
4046
}

‎src/dist/Plugins.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export default class Plugins {
22
static DOM (Composite) {
33
let layer = Composite.domNode, style = layer.style;
44
return {
5-
update: (Tween, RenderObject) => {
5+
update (Tween, RenderObject) {
66
for (let p in RenderObject) {
77
style[p] = RenderObject[p];
88
}

‎src/dist/Timeline.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@ export default class Timeline {
1616
for ( let p in tween ) {
1717
tweenExample[p](tween[p]);
1818
}
19+
this.add(tweenExample)
1920
} else if (typeof tween === "object") {
2021
tween.map(add => {
21-
Timeline.add.call(this, add);
22+
this.add(add);
2223
});
2324
}
2425
return this;

0 commit comments

Comments
 (0)