Skip to content

Commit c8c7201

Browse files
tejitaktejitak
committed
Merge branch 'develop'
2 parents 589bf12 + 1623044 commit c8c7201

File tree

5 files changed

+212
-129
lines changed

5 files changed

+212
-129
lines changed

‎lib/Animate.js‎

Lines changed: 206 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -19,138 +19,221 @@ var eases = ["linear-in", "linear-out", "linear-in-out", "quad-in", "quad-out",
1919
*/
2020

2121
var Animate = (function () {
22-
function Animate(component) {
23-
var _this = this;
24-
25-
_classCallCheck(this, Animate);
22+
function Animate(component) {
23+
var _this = this;
2624

27-
this._component = component;
25+
_classCallCheck(this, Animate);
2826

29-
// generate an interface function for each ease.
30-
eases.forEach(function (e) {
31-
// convert to camelCase
32-
var easeName = e.replace(/-([a-z])/g, function (g) {
33-
return g[1].toUpperCase();
34-
});
27+
this._component = component;
3528

36-
// add instance methods dynamically
37-
_this[easeName] = function (prop, end, duration) {
38-
return this.animate(prop, end, duration, easeName);
39-
};
29+
// generate an interface function for each ease.
30+
eases.forEach(function (e) {
31+
// convert to camelCase
32+
var easeName = e.replace(/-([a-z])/g, function (g) {
33+
return g[1].toUpperCase();
34+
});
4035

41-
Easing[easeName] = ease(e);
42-
});
43-
}
44-
45-
_createClass(Animate, {
46-
_getStateValue: {
47-
48-
/**
49-
* Get state value
50-
* if the prop is not in state regular property
51-
*/
52-
53-
value: function _getStateValue(prop) {
54-
var c = this._component,
55-
v = c.state && c.state[prop];
56-
return v === undefined ? c[prop] : v;
57-
}
58-
},
59-
_updateStateValue: {
60-
61-
/**
62-
* Set value to state
63-
* if the prop is not in state, set value to regular property with force update
64-
*/
65-
66-
value: function _updateStateValue(prop, v) {
67-
var _this = this;
36+
// add instance methods dynamically
37+
_this[easeName] = function (prop, end, duration) {
38+
return this.animate(prop, end, duration, easeName);
39+
};
6840

69-
return new Promise(function (resolve, reject) {
70-
var c = _this._component;
71-
if (c.state && c.state[prop] !== undefined) {
72-
var state = {};
73-
state[prop] = v;
74-
c.setState(state, resolve);
75-
} else {
76-
c[prop] = v;
77-
c.forceUpdate();
78-
resolve();
79-
}
41+
Easing[easeName] = ease(e);
8042
});
81-
}
82-
},
83-
_start: {
84-
value: function _start(loopCallback) {
85-
this._loop = new Loop(loopCallback);
86-
this._loop.start();
87-
}
88-
},
89-
animate: {
90-
value: function animate(prop, end, duration, easing) {
91-
var _this = this;
43+
}
9244

93-
if (!Easing[easing]) {
94-
console.log("Specified easing does not exist: " + easing);
95-
return;
45+
_createClass(Animate, {
46+
_getStateValue: {
47+
48+
/**
49+
* Get state value
50+
* if the prop is not in state regular property
51+
*/
52+
53+
value: function _getStateValue(prop) {
54+
var c = this._component,
55+
v = c.state && c.state[prop];
56+
return v === undefined ? c[prop] : v;
57+
}
58+
},
59+
_updateStateValue: {
60+
61+
/**
62+
* Set value to state
63+
* if the prop is not in state, set value to regular property with force update
64+
*/
65+
66+
value: function _updateStateValue(prop, v) {
67+
var _this = this;
68+
69+
return new Promise(function (resolve, reject) {
70+
var c = _this._component;
71+
if (c.state && c.state[prop] !== undefined) {
72+
var state = {};
73+
state[prop] = v;
74+
c.setState(state, resolve);
75+
} else {
76+
c[prop] = v;
77+
c.forceUpdate();
78+
resolve();
79+
}
80+
});
81+
}
82+
},
83+
_updateStateMap: {
84+
85+
/**
86+
* Updates multiple properties within
87+
* @param prop {Array} array of targeted states= {state: {string}, target: {number}}
88+
* @param values {Array} array of values to be set
89+
* @returns {Promise}
90+
*/
91+
92+
value: function _updateStateMap(prop, values) {
93+
var _this = this;
94+
95+
return new Promise(function (resolve, reject) {
96+
var c = _this._component,
97+
state = {};
98+
// build up changed state
99+
for (var i = 0; i < prop.length; i++) {
100+
state[prop[i].state] = values[i];
101+
}
102+
c.setState(state, resolve);
103+
});
104+
}
105+
},
106+
_start: {
107+
value: function _start(loopCallback) {
108+
this._loop = new Loop(loopCallback);
109+
this._loop.start();
110+
}
111+
},
112+
animate: {
113+
value: function animate(prop, end, duration, easing) {
114+
var _this = this;
115+
116+
if (!Easing[easing]) {
117+
console.log("Specified easing does not exist: " + easing);
118+
return;
119+
}
120+
return new Promise(function (resolve, reject) {
121+
var begin = _this._getStateValue(prop);
122+
_this._start(function () {
123+
return _this._anim(prop, begin, end, duration, easing, resolve);
124+
});
125+
});
126+
}
127+
},
128+
manimate: {
129+
value: function manimate(prop, duration, easing) {
130+
var _this = this;
131+
132+
if (!Easing[easing]) {
133+
console.log("Specified easing does not exist: " + easing);
134+
return;
135+
}
136+
return new Promise(function (resolve, reject) {
137+
// gather array begin States
138+
var begins = [],
139+
ends = [];
140+
for (var i = 0; i < prop.length; i++) {
141+
var b = _this._getStateValue(prop[i].state);
142+
var e = prop[i].target;
143+
begins.push(b);
144+
ends.push(e);
145+
}
146+
// start multi-anim
147+
_this._start(function () {
148+
return _this._multianim(prop, begins, ends, duration, easing, resolve);
149+
});
150+
});
151+
}
152+
},
153+
onProcess: {
154+
155+
// for override on each loop
156+
157+
value: function onProcess(prop, value, progress) {}
158+
},
159+
_anim: {
160+
161+
/**
162+
* Start animation
163+
* - prop is a react state property
164+
* - end is a goal value of the state
165+
*/
166+
167+
value: function _anim(prop, begin, end, duration, easing, resolve) {
168+
if (!this._loop) {
169+
resolve();
170+
return false;
171+
}
172+
var progress = Easing[easing](this._loop.timeDiff() / duration),
173+
distance = Math.abs(begin - end),
174+
diff = progress * distance,
175+
operator = begin > end ? -1 : 1,
176+
value = begin + diff * operator;
177+
this.onProcess(prop, value, progress);
178+
if (progress < 1) {
179+
// return promise to keep loop
180+
return this._updateStateValue(prop, value);
181+
} else {
182+
this.stop();
183+
this._updateStateValue(prop, end).then(function () {
184+
resolve();
185+
});
186+
return false;
187+
}
188+
}
189+
},
190+
_multianim: {
191+
value: function _multianim(prop, begins, ends, duration, easing, resolve) {
192+
if (!this._loop) {
193+
resolve();
194+
return false;
195+
}
196+
var progress = Easing[easing](this._loop.timeDiff() / duration),
197+
newValues = [];
198+
199+
// step through all states
200+
for (var i = 0; i < prop.length; i++) {
201+
var begin = begins[i],
202+
end = ends[i],
203+
p = prop[i].state,
204+
distance = Math.abs(begin - end),
205+
diff = progress * distance,
206+
operator = begin > end ? -1 : 1,
207+
value = begin + diff * operator;
208+
209+
this.onProcess(p, value, progress);
210+
211+
newValues.push(value);
212+
}
213+
214+
if (progress < 1) {
215+
return this._updateStateMap(prop, newValues);
216+
} else {
217+
this.stop();
218+
this._updateStateMap(prop, ends).then(function () {
219+
resolve();
220+
});
221+
return false;
222+
}
223+
}
224+
},
225+
stop: {
226+
value: function stop() {
227+
if (this._loop) {
228+
this._loop.end();
229+
this._loop = null;
230+
}
231+
return this;
232+
}
96233
}
97-
return new Promise(function (resolve, reject) {
98-
var begin = _this._getStateValue(prop);
99-
_this._start(function () {
100-
return _this._anim(prop, begin, end, duration, easing, resolve);
101-
});
102-
});
103-
}
104-
},
105-
onProcess: {
106-
107-
// for override on each loop
108-
109-
value: function onProcess(prop, value, progress) {}
110-
},
111-
_anim: {
112-
113-
/**
114-
* Start animation
115-
* - prop is a react state property
116-
* - end is a goal value of the state
117-
*/
118-
119-
value: function _anim(prop, begin, end, duration, easing, resolve) {
120-
if (!this._loop) {
121-
resolve();
122-
return false;
123-
}
124-
var progress = Easing[easing](this._loop.timeDiff() / duration),
125-
distance = Math.abs(begin - end),
126-
diff = progress * distance,
127-
operator = begin > end ? -1 : 1,
128-
value = begin + diff * operator;
129-
this.onProcess(prop, value, progress);
130-
if (progress < 1) {
131-
// return promise to keep loop
132-
return this._updateStateValue(prop, value);
133-
} else {
134-
this.stop();
135-
this._updateStateValue(prop, end).then(function () {
136-
resolve();
137-
});
138-
return false;
139-
}
140-
}
141-
},
142-
stop: {
143-
value: function stop() {
144-
if (this._loop) {
145-
this._loop.end();
146-
this._loop = null;
147-
}
148-
return this;
149-
}
150-
}
151-
});
234+
});
152235

153-
return Animate;
236+
return Animate;
154237
})();
155238

156239
module.exports = Animate;

‎lib/Loop.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ var _classCallCheck = function (instance, Constructor) { if (!(instance instance
77
/*
88
* Loop utility using requestAnimationFrame
99
*/
10-
var w = global.window | 0,
10+
var w = global.window || 0,
1111
raf = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.mozRequestAnimationFrame || w.msRequestAnimationFrame || w.oRequestAnimationFrame || function (c) {
1212
global.setTimeout(c, 1000 / 60);
1313
},

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-state-animation",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"description": "Simple animations with React state",
55
"main": "lib/ReactStateAnimation.js",
66
"scripts": {

‎src/Animate.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export default class Animate {
9595
*/
9696
_updateStateMap(prop, values) {
9797

98-
return new Promise(function(resolve, reject) {
98+
return new Promise((resolve, reject) => {
9999
var c = this._component,
100100
state = {};
101101
// build up changed state
@@ -129,7 +129,7 @@ export default class Animate {
129129
console.log("Specified easing does not exist: " + easing);
130130
return;
131131
}
132-
return new Promise(function(resolve, reject) {
132+
return new Promise((resolve, reject) => {
133133
// gather array begin States
134134
var begins = [],
135135
ends = [];
@@ -140,7 +140,7 @@ export default class Animate {
140140
ends.push(e);
141141
}
142142
// start multi-anim
143-
this._start(function() {
143+
this._start(() => {
144144
return this._multianim(prop, begins, ends, duration, easing, resolve);
145145
});
146146
});

‎src/Loop.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* Loop utility using requestAnimationFrame
33
*/
4-
var w = (global.window | 0),
4+
var w = (global.window || 0),
55
raf = w['requestAnimationFrame'] || w['webkitRequestAnimationFrame'] || w['mozRequestAnimationFrame'] || w['msRequestAnimationFrame'] || w['oRequestAnimationFrame'] || function(c){ global.setTimeout(c, 1000 / 60) },
66
caf = w['cancelAnimationFrame'] || w['webkitCancelAnimationFrame'] || w['mozCancelAnimationFrame'] || w['msCancelAnimationFrame'] || w['oCancelAnimationFrame'] || global.clearTimeout
77

0 commit comments

Comments
 (0)