Skip to content

Commit

Permalink
Merge pull request #9 from mikeedwards/build-manimate-code
Browse files Browse the repository at this point in the history 
Translate latest code to es5 and copy to lib
  • Loading branch information
@tejitak
tejitak authored Jul 12, 2016
2 parents 589bf12 + 6789991 commit cee7fc5
Show file tree
Hide file tree
Showing 2 changed files with 209 additions and 126 deletions.
329 changes: 206 additions & 123 deletions lib/Animate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,138 +19,221 @@ var eases = ["linear-in", "linear-out", "linear-in-out", "quad-in", "quad-out",
*/

var Animate = (function () {
function Animate(component) {
var _this = this;

_classCallCheck(this, Animate);
function Animate(component) {
var _this = this;

this._component = component;
_classCallCheck(this, Animate);

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

// add instance methods dynamically
_this[easeName] = function (prop, end, duration) {
return this.animate(prop, end, duration, easeName);
};
// generate an interface function for each ease.
eases.forEach(function (e) {
// convert to camelCase
var easeName = e.replace(/-([a-z])/g, function (g) {
return g[1].toUpperCase();
});

Easing[easeName] = ease(e);
});
}

_createClass(Animate, {
_getStateValue: {

/**
* Get state value
* if the prop is not in state regular property
*/

value: function _getStateValue(prop) {
var c = this._component,
v = c.state && c.state[prop];
return v === undefined ? c[prop] : v;
}
},
_updateStateValue: {

/**
* Set value to state
* if the prop is not in state, set value to regular property with force update
*/

value: function _updateStateValue(prop, v) {
var _this = this;
// add instance methods dynamically
_this[easeName] = function (prop, end, duration) {
return this.animate(prop, end, duration, easeName);
};

return new Promise(function (resolve, reject) {
var c = _this._component;
if (c.state && c.state[prop] !== undefined) {
var state = {};
state[prop] = v;
c.setState(state, resolve);
} else {
c[prop] = v;
c.forceUpdate();
resolve();
}
Easing[easeName] = ease(e);
});
}
},
_start: {
value: function _start(loopCallback) {
this._loop = new Loop(loopCallback);
this._loop.start();
}
},
animate: {
value: function animate(prop, end, duration, easing) {
var _this = this;
}

if (!Easing[easing]) {
console.log("Specified easing does not exist: " + easing);
return;
_createClass(Animate, {
_getStateValue: {

/**
* Get state value
* if the prop is not in state regular property
*/

value: function _getStateValue(prop) {
var c = this._component,
v = c.state && c.state[prop];
return v === undefined ? c[prop] : v;
}
},
_updateStateValue: {

/**
* Set value to state
* if the prop is not in state, set value to regular property with force update
*/

value: function _updateStateValue(prop, v) {
var _this = this;

return new Promise(function (resolve, reject) {
var c = _this._component;
if (c.state && c.state[prop] !== undefined) {
var state = {};
state[prop] = v;
c.setState(state, resolve);
} else {
c[prop] = v;
c.forceUpdate();
resolve();
}
});
}
},
_updateStateMap: {

/**
* Updates multiple properties within
* @param prop {Array} array of targeted states= {state: {string}, target: {number}}
* @param values {Array} array of values to be set
* @returns {Promise}
*/

value: function _updateStateMap(prop, values) {
var _this = this;

return new Promise(function (resolve, reject) {
var c = _this._component,
state = {};
// build up changed state
for (var i = 0; i < prop.length; i++) {
state[prop[i].state] = values[i];
}
c.setState(state, resolve);
});
}
},
_start: {
value: function _start(loopCallback) {
this._loop = new Loop(loopCallback);
this._loop.start();
}
},
animate: {
value: function animate(prop, end, duration, easing) {
var _this = this;

if (!Easing[easing]) {
console.log("Specified easing does not exist: " + easing);
return;
}
return new Promise(function (resolve, reject) {
var begin = _this._getStateValue(prop);
_this._start(function () {
return _this._anim(prop, begin, end, duration, easing, resolve);
});
});
}
},
manimate: {
value: function manimate(prop, duration, easing) {
var _this = this;

if (!Easing[easing]) {
console.log("Specified easing does not exist: " + easing);
return;
}
return new Promise(function (resolve, reject) {
// gather array begin States
var begins = [],
ends = [];
for (var i = 0; i < prop.length; i++) {
var b = _this._getStateValue(prop[i].state);
var e = prop[i].target;
begins.push(b);
ends.push(e);
}
// start multi-anim
_this._start(function () {
return _this._multianim(prop, begins, ends, duration, easing, resolve);
});
});
}
},
onProcess: {

// for override on each loop

value: function onProcess(prop, value, progress) {}
},
_anim: {

/**
* Start animation
* - prop is a react state property
* - end is a goal value of the state
*/

value: function _anim(prop, begin, end, duration, easing, resolve) {
if (!this._loop) {
resolve();
return false;
}
var progress = Easing[easing](this._loop.timeDiff() / duration),
distance = Math.abs(begin - end),
diff = progress * distance,
operator = begin > end ? -1 : 1,
value = begin + diff * operator;
this.onProcess(prop, value, progress);
if (progress < 1) {
// return promise to keep loop
return this._updateStateValue(prop, value);
} else {
this.stop();
this._updateStateValue(prop, end).then(function () {
resolve();
});
return false;
}
}
},
_multianim: {
value: function _multianim(prop, begins, ends, duration, easing, resolve) {
if (!this._loop) {
resolve();
return false;
}
var progress = Easing[easing](this._loop.timeDiff() / duration),
newValues = [];

// step through all states
for (var i = 0; i < prop.length; i++) {
var begin = begins[i],
end = ends[i],
p = prop[i].state,
distance = Math.abs(begin - end),
diff = progress * distance,
operator = begin > end ? -1 : 1,
value = begin + diff * operator;

this.onProcess(p, value, progress);

newValues.push(value);
}

if (progress < 1) {
return this._updateStateMap(prop, newValues);
} else {
this.stop();
this._updateStateMap(prop, ends).then(function () {
resolve();
});
return false;
}
}
},
stop: {
value: function stop() {
if (this._loop) {
this._loop.end();
this._loop = null;
}
return this;
}
}
return new Promise(function (resolve, reject) {
var begin = _this._getStateValue(prop);
_this._start(function () {
return _this._anim(prop, begin, end, duration, easing, resolve);
});
});
}
},
onProcess: {

// for override on each loop

value: function onProcess(prop, value, progress) {}
},
_anim: {

/**
* Start animation
* - prop is a react state property
* - end is a goal value of the state
*/

value: function _anim(prop, begin, end, duration, easing, resolve) {
if (!this._loop) {
resolve();
return false;
}
var progress = Easing[easing](this._loop.timeDiff() / duration),
distance = Math.abs(begin - end),
diff = progress * distance,
operator = begin > end ? -1 : 1,
value = begin + diff * operator;
this.onProcess(prop, value, progress);
if (progress < 1) {
// return promise to keep loop
return this._updateStateValue(prop, value);
} else {
this.stop();
this._updateStateValue(prop, end).then(function () {
resolve();
});
return false;
}
}
},
stop: {
value: function stop() {
if (this._loop) {
this._loop.end();
this._loop = null;
}
return this;
}
}
});
});

return Animate;
return Animate;
})();

module.exports = Animate;
6 changes: 3 additions & 3 deletions src/Animate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default class Animate {
*/
_updateStateMap(prop, values) {

return new Promise(function(resolve, reject) {
return new Promise((resolve, reject) => {
var c = this._component,
state = {};
// build up changed state
Expand Down Expand Up @@ -129,7 +129,7 @@ export default class Animate {
console.log("Specified easing does not exist: " + easing);
return;
}
return new Promise(function(resolve, reject) {
return new Promise((resolve, reject) => {
// gather array begin States
var begins = [],
ends = [];
Expand All @@ -140,7 +140,7 @@ export default class Animate {
ends.push(e);
}
// start multi-anim
this._start(function() {
this._start(() => {
return this._multianim(prop, begins, ends, duration, easing, resolve);
});
});
Expand Down

0 comments on commit cee7fc5

Please sign in to comment.