2017-05-17 01:44:04 +00:00
|
|
|
var GetValue = require('../utils/object/GetValue');
|
|
|
|
var GetAdvancedValue = require('../utils/object/GetAdvancedValue');
|
|
|
|
var Tween = require('./Tween');
|
|
|
|
var RESERVED = require('./ReservedProps');
|
|
|
|
var GetEaseFunction = require('./GetEaseFunction');
|
2017-05-17 13:39:49 +00:00
|
|
|
var TweenData = require('./TweenData');
|
2017-05-18 05:39:47 +00:00
|
|
|
var TweenTarget = require('./TweenTarget');
|
2017-05-17 01:44:04 +00:00
|
|
|
|
2017-05-24 00:27:04 +00:00
|
|
|
var GetTargets = function (config, props)
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
|
|
|
var targets = GetValue(config, 'targets', null);
|
|
|
|
|
|
|
|
if (typeof targets === 'function')
|
|
|
|
{
|
|
|
|
targets = targets.call();
|
|
|
|
}
|
|
|
|
|
2017-05-24 00:27:04 +00:00
|
|
|
if (!Array.isArray(targets))
|
|
|
|
{
|
|
|
|
targets = [ targets ];
|
|
|
|
}
|
|
|
|
|
2017-05-18 05:39:47 +00:00
|
|
|
var out = [];
|
|
|
|
|
2017-05-24 00:27:04 +00:00
|
|
|
for (var i = 0; i < targets.length; i++)
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
2017-05-24 00:27:04 +00:00
|
|
|
var keyData = {};
|
|
|
|
|
|
|
|
for (var p = 0; p < props.length; p++)
|
2017-05-18 05:39:47 +00:00
|
|
|
{
|
2017-05-24 00:27:04 +00:00
|
|
|
keyData[props[p].key] = { start: 0, current: 0, end: 0, startCache: null, endCache: null };
|
2017-05-18 05:39:47 +00:00
|
|
|
}
|
2017-05-24 00:27:04 +00:00
|
|
|
|
|
|
|
out.push(TweenTarget(targets[i], keyData));
|
2017-05-17 01:44:04 +00:00
|
|
|
}
|
|
|
|
|
2017-05-18 05:39:47 +00:00
|
|
|
return out;
|
2017-05-17 01:44:04 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
var GetProps = function (config)
|
|
|
|
{
|
|
|
|
var key;
|
|
|
|
var keys = [];
|
|
|
|
|
|
|
|
// First see if we have a props object
|
|
|
|
|
|
|
|
if (config.hasOwnProperty('props'))
|
|
|
|
{
|
|
|
|
for (key in config.props)
|
|
|
|
{
|
|
|
|
keys.push({ key: key, value: config.props[key] });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
for (key in config)
|
|
|
|
{
|
|
|
|
if (RESERVED.indexOf(key) === -1)
|
|
|
|
{
|
|
|
|
keys.push({ key: key, value: config[key] });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return keys;
|
|
|
|
};
|
|
|
|
|
2017-05-18 05:39:47 +00:00
|
|
|
var GetValueOp = function (key, value)
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
|
|
|
var valueCallback;
|
2017-05-23 18:04:15 +00:00
|
|
|
var t = typeof(value);
|
2017-05-17 01:44:04 +00:00
|
|
|
|
2017-05-23 18:04:15 +00:00
|
|
|
if (t === 'number')
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
|
|
|
// props: {
|
|
|
|
// x: 400,
|
|
|
|
// y: 300
|
|
|
|
// }
|
|
|
|
|
2017-05-23 18:04:15 +00:00
|
|
|
valueCallback = function ()
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
|
|
|
return value;
|
|
|
|
};
|
|
|
|
}
|
2017-05-23 18:04:15 +00:00
|
|
|
else if (t === 'string')
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
|
|
|
// props: {
|
2017-05-17 12:19:42 +00:00
|
|
|
// x: '+=400',
|
|
|
|
// y: '-=300',
|
|
|
|
// z: '*=2',
|
|
|
|
// w: '/=2'
|
2017-05-17 01:44:04 +00:00
|
|
|
// }
|
|
|
|
|
|
|
|
var op = value[0];
|
2017-05-17 12:19:42 +00:00
|
|
|
var num = parseFloat(value.substr(2));
|
2017-05-17 01:44:04 +00:00
|
|
|
|
|
|
|
switch (op)
|
|
|
|
{
|
|
|
|
case '+':
|
2017-05-18 05:39:47 +00:00
|
|
|
valueCallback = function (i)
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
2017-05-18 05:39:47 +00:00
|
|
|
return i + num;
|
2017-05-17 01:44:04 +00:00
|
|
|
};
|
|
|
|
break;
|
|
|
|
|
|
|
|
case '-':
|
2017-05-18 05:39:47 +00:00
|
|
|
valueCallback = function (i)
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
2017-05-18 05:39:47 +00:00
|
|
|
return i - num;
|
2017-05-17 01:44:04 +00:00
|
|
|
};
|
|
|
|
break;
|
|
|
|
|
|
|
|
case '*':
|
2017-05-18 05:39:47 +00:00
|
|
|
valueCallback = function (i)
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
2017-05-18 05:39:47 +00:00
|
|
|
return i * num;
|
2017-05-17 01:44:04 +00:00
|
|
|
};
|
|
|
|
break;
|
|
|
|
|
|
|
|
case '/':
|
2017-05-18 05:39:47 +00:00
|
|
|
valueCallback = function (i)
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
2017-05-18 05:39:47 +00:00
|
|
|
return i / num;
|
2017-05-17 01:44:04 +00:00
|
|
|
};
|
|
|
|
break;
|
|
|
|
|
|
|
|
default:
|
2017-05-24 00:27:04 +00:00
|
|
|
valueCallback = function ()
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
|
|
|
return parseFloat(value);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
2017-05-23 18:04:15 +00:00
|
|
|
else if (t === 'function')
|
2017-05-17 01:44:04 +00:00
|
|
|
{
|
|
|
|
// Technically this could return a number, string or object
|
|
|
|
// props: {
|
|
|
|
// x: function () { return Math.random() * 10 },
|
|
|
|
// y: someOtherCallback
|
|
|
|
// }
|
|
|
|
|
2017-05-18 05:39:47 +00:00
|
|
|
valueCallback = GetValueOp(key, value.call());
|
2017-05-17 01:44:04 +00:00
|
|
|
}
|
|
|
|
else if (value.hasOwnProperty('value'))
|
|
|
|
{
|
|
|
|
// Value may still be a string, function or a number
|
|
|
|
// props: {
|
|
|
|
// x: { value: 400, ... },
|
|
|
|
// y: { value: 300, ... }
|
|
|
|
// }
|
|
|
|
|
2017-05-18 05:39:47 +00:00
|
|
|
valueCallback = GetValueOp(key, value.value);
|
2017-05-17 01:44:04 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return valueCallback;
|
|
|
|
};
|
|
|
|
|
|
|
|
var TweenBuilder = function (manager, config)
|
|
|
|
{
|
|
|
|
// Create arrays of the Targets and the Properties
|
|
|
|
var props = GetProps(config);
|
|
|
|
|
2017-05-18 05:39:47 +00:00
|
|
|
// Default Tween values
|
|
|
|
var ease = GetEaseFunction(GetValue(config, 'ease', 'Power0'));
|
|
|
|
var duration = GetAdvancedValue(config, 'duration', 1000);
|
|
|
|
var yoyo = GetValue(config, 'yoyo', false);
|
2017-05-24 00:27:04 +00:00
|
|
|
var yoyoDelay = GetAdvancedValue(config, 'yoyoDelay', 0);
|
2017-05-18 05:39:47 +00:00
|
|
|
var repeat = GetAdvancedValue(config, 'repeat', 0);
|
|
|
|
var repeatDelay = GetAdvancedValue(config, 'repeatDelay', 0);
|
|
|
|
var delay = GetAdvancedValue(config, 'delay', 0);
|
|
|
|
var startAt = GetAdvancedValue(config, 'startAt', null);
|
|
|
|
|
2017-05-24 00:27:04 +00:00
|
|
|
var data = [];
|
|
|
|
|
2017-05-18 05:39:47 +00:00
|
|
|
// Loop through every property defined in the Tween, i.e.: props { x, y, alpha }
|
2017-05-17 01:44:04 +00:00
|
|
|
for (var p = 0; p < props.length; p++)
|
|
|
|
{
|
|
|
|
var key = props[p].key;
|
2017-05-23 18:04:15 +00:00
|
|
|
var value = props[p].value;
|
|
|
|
|
|
|
|
var tweenData = TweenData(
|
|
|
|
key,
|
|
|
|
GetValueOp(key, value),
|
|
|
|
GetEaseFunction(GetValue(value, 'ease', ease)),
|
|
|
|
GetAdvancedValue(value, 'delay', delay),
|
|
|
|
GetAdvancedValue(value, 'duration', duration),
|
2017-05-24 00:27:04 +00:00
|
|
|
GetValue(value, 'yoyo', yoyo),
|
|
|
|
GetAdvancedValue(value, 'yoyoDelay', yoyoDelay),
|
2017-05-23 18:04:15 +00:00
|
|
|
GetAdvancedValue(value, 'repeat', repeat),
|
|
|
|
GetAdvancedValue(value, 'repeatDelay', repeatDelay),
|
2017-05-24 00:27:04 +00:00
|
|
|
GetAdvancedValue(value, 'startAt', startAt)
|
2017-05-23 18:04:15 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
// TODO: Calculate total duration
|
|
|
|
|
2017-05-24 00:27:04 +00:00
|
|
|
data.push(tweenData);
|
2017-05-17 01:44:04 +00:00
|
|
|
}
|
|
|
|
|
2017-05-24 00:27:04 +00:00
|
|
|
var targets = GetTargets(config, props);
|
|
|
|
|
|
|
|
var tween = new Tween(manager, targets, data);
|
|
|
|
|
|
|
|
var stagger = GetAdvancedValue(config, 'stagger', 0);
|
|
|
|
|
|
|
|
tween.useFrames = GetValue(config, 'useFrames', false);
|
|
|
|
tween.loop = GetValue(config, 'loop', false);
|
|
|
|
tween.loopDelay = GetAdvancedValue(config, 'loopDelay', 0);
|
|
|
|
tween.completeDelay = GetAdvancedValue(config, 'completeDelay', 0);
|
|
|
|
tween.startDelay = GetAdvancedValue(config, 'startDelay', 0) + (stagger * targets.length);
|
|
|
|
tween.paused = GetValue(config, 'paused', false);
|
|
|
|
|
2017-05-18 05:39:47 +00:00
|
|
|
return tween;
|
2017-05-17 01:44:04 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = TweenBuilder;
|