2017-05-17 01:44:04 +00:00
|
|
|
var GetAdvancedValue = require('../utils/object/GetAdvancedValue');
|
|
|
|
var GetEaseFunction = require('./GetEaseFunction');
|
2017-08-07 16:14:39 +00:00
|
|
|
var GetValue = require('../utils/object/GetValue');
|
|
|
|
var RESERVED = require('./ReservedProps');
|
|
|
|
var Tween = require('./Tween');
|
2017-05-17 13:39:49 +00:00
|
|
|
var TweenData = require('./TweenData');
|
2017-05-17 01:44:04 +00:00
|
|
|
|
2017-05-24 02:29:31 +00:00
|
|
|
var GetTargets = function (config)
|
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-24 02:29:31 +00:00
|
|
|
return targets;
|
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
|
|
|
{
|
|
|
|
// props: {
|
2017-05-24 02:29:31 +00:00
|
|
|
// x: function (startValue, target, index, totalTargets) { return startValue + (index * 50); },
|
2017-05-17 01:44:04 +00:00
|
|
|
// }
|
|
|
|
|
2017-05-24 02:29:31 +00:00
|
|
|
valueCallback = function (startValue, target, index, total)
|
|
|
|
{
|
|
|
|
return value(startValue, target, index, total);
|
|
|
|
};
|
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;
|
|
|
|
};
|
|
|
|
|
2017-05-24 02:29:31 +00:00
|
|
|
var GetBoolean = function (source, key, defaultValue)
|
|
|
|
{
|
|
|
|
if (!source)
|
|
|
|
{
|
|
|
|
return defaultValue;
|
|
|
|
}
|
|
|
|
else if (source.hasOwnProperty(key))
|
|
|
|
{
|
|
|
|
return source[key];
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
return defaultValue;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
var GetNewValue = function (source, key, defaultValue)
|
|
|
|
{
|
|
|
|
var valueCallback;
|
|
|
|
|
|
|
|
if (source.hasOwnProperty(key))
|
|
|
|
{
|
|
|
|
var t = typeof(source[key]);
|
|
|
|
|
|
|
|
if (t === 'function')
|
|
|
|
{
|
|
|
|
valueCallback = function (index, totalTargets, target)
|
|
|
|
{
|
|
|
|
return source[key](index, totalTargets, target);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
valueCallback = function ()
|
|
|
|
{
|
|
|
|
return source[key];
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else if (typeof defaultValue === 'function')
|
|
|
|
{
|
|
|
|
valueCallback = defaultValue;
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
valueCallback = function ()
|
|
|
|
{
|
|
|
|
return defaultValue;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return valueCallback;
|
|
|
|
};
|
|
|
|
|
2017-05-17 01:44:04 +00:00
|
|
|
var TweenBuilder = function (manager, config)
|
|
|
|
{
|
|
|
|
// Create arrays of the Targets and the Properties
|
2017-05-24 02:29:31 +00:00
|
|
|
var targets = GetTargets(config);
|
2017-05-17 01:44:04 +00:00
|
|
|
var props = GetProps(config);
|
|
|
|
|
2017-05-18 05:39:47 +00:00
|
|
|
// Default Tween values
|
2017-08-11 03:08:21 +00:00
|
|
|
var delay = GetNewValue(config, 'delay', 0);
|
2017-05-24 02:29:31 +00:00
|
|
|
var duration = GetNewValue(config, 'duration', 1000);
|
2017-08-11 03:08:21 +00:00
|
|
|
var ease = GetEaseFunction(GetValue(config, 'ease', 'Power0'), easeParams);
|
|
|
|
var easeParams = GetValue(config, 'easeParams', null);
|
2017-05-24 04:24:20 +00:00
|
|
|
var hold = GetNewValue(config, 'hold', 0);
|
2017-05-24 02:29:31 +00:00
|
|
|
var repeat = GetNewValue(config, 'repeat', 0);
|
|
|
|
var repeatDelay = GetNewValue(config, 'repeatDelay', 0);
|
|
|
|
var startAt = GetNewValue(config, 'startAt', null);
|
2017-08-11 03:08:21 +00:00
|
|
|
var yoyo = GetBoolean(config, 'yoyo', false);
|
2017-05-18 05:39:47 +00:00
|
|
|
|
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;
|
|
|
|
|
2017-08-07 16:14:39 +00:00
|
|
|
// console.log(key, value);
|
|
|
|
|
2017-05-24 02:29:31 +00:00
|
|
|
for (var t = 0; t < targets.length; t++)
|
|
|
|
{
|
|
|
|
// Swap for faster getters, if they want Advanced Value style things, they can do it via their own functions
|
|
|
|
var tweenData = TweenData(
|
|
|
|
targets[t],
|
|
|
|
key,
|
|
|
|
GetValueOp(key, value),
|
2017-05-24 03:38:17 +00:00
|
|
|
GetEaseFunction(GetValue(value, 'ease', ease), easeParams),
|
2017-05-24 02:29:31 +00:00
|
|
|
GetNewValue(value, 'delay', delay),
|
|
|
|
GetNewValue(value, 'duration', duration),
|
|
|
|
GetBoolean(value, 'yoyo', yoyo),
|
2017-05-24 04:24:20 +00:00
|
|
|
GetNewValue(value, 'hold', hold),
|
2017-05-24 02:29:31 +00:00
|
|
|
GetNewValue(value, 'repeat', repeat),
|
|
|
|
GetNewValue(value, 'repeatDelay', repeatDelay),
|
|
|
|
GetNewValue(value, 'startAt', startAt)
|
|
|
|
);
|
|
|
|
|
|
|
|
// TODO: Calculate total duration
|
|
|
|
|
|
|
|
data.push(tweenData);
|
|
|
|
}
|
2017-05-17 01:44:04 +00:00
|
|
|
}
|
|
|
|
|
2017-05-24 02:29:31 +00:00
|
|
|
var tween = new Tween(manager, data);
|
2017-05-24 00:27:04 +00:00
|
|
|
|
2017-05-24 02:29:31 +00:00
|
|
|
tween.totalTargets = targets.length;
|
2017-08-11 03:08:21 +00:00
|
|
|
|
|
|
|
tween.completeDelay = GetAdvancedValue(config, 'completeDelay', 0);
|
2017-08-09 16:23:39 +00:00
|
|
|
tween.loop = GetAdvancedValue(config, 'loop', 0);
|
2017-05-24 00:27:04 +00:00
|
|
|
tween.loopDelay = GetAdvancedValue(config, 'loopDelay', 0);
|
2017-05-24 02:29:31 +00:00
|
|
|
tween.paused = GetBoolean(config, 'paused', false);
|
2017-08-11 03:08:21 +00:00
|
|
|
tween.useFrames = GetBoolean(config, 'useFrames', false);
|
|
|
|
|
|
|
|
// Callbacks
|
|
|
|
|
|
|
|
var scope = GetValue(config, 'callbackScope', tween);
|
|
|
|
|
|
|
|
var onStart = GetValue(config, 'onStart', false);
|
|
|
|
|
|
|
|
// The Start of the Tween
|
|
|
|
if (onStart)
|
|
|
|
{
|
|
|
|
var onStartScope = GetValue(config, 'onStartScope', scope);
|
|
|
|
var onStartParams = GetValue(config, 'onStartParams', []);
|
|
|
|
|
|
|
|
tween.setEventCallback('onStart', onStart, [tween].concat(onStartParams), onStartScope);
|
|
|
|
}
|
|
|
|
|
|
|
|
var onUpdate = GetValue(config, 'onUpdate', false);
|
|
|
|
|
|
|
|
// Every time the tween updates (regardless which TweenDatas are running)
|
|
|
|
if (onUpdate)
|
|
|
|
{
|
|
|
|
var onUpdateScope = GetValue(config, 'onUpdateScope', scope);
|
|
|
|
var onUpdateParams = GetValue(config, 'onUpdateParams', []);
|
|
|
|
|
|
|
|
tween.setEventCallback('onUpdate', onUpdate, [tween].concat(onUpdateParams), onUpdateScope);
|
|
|
|
}
|
|
|
|
|
|
|
|
var onRepeat = GetValue(config, 'onRepeat', false);
|
|
|
|
|
|
|
|
// When a TweenData repeats
|
|
|
|
if (onRepeat)
|
|
|
|
{
|
|
|
|
var onRepeatScope = GetValue(config, 'onRepeatScope', scope);
|
|
|
|
var onRepeatParams = GetValue(config, 'onRepeatParams', []);
|
|
|
|
|
|
|
|
tween.setEventCallback('onRepeat', onRepeat, [tween].concat(onRepeatParams), onRepeatScope);
|
|
|
|
}
|
|
|
|
|
|
|
|
var onLoop = GetValue(config, 'onLoop', false);
|
|
|
|
|
|
|
|
// Called when the whole Tween loops
|
|
|
|
if (onLoop)
|
|
|
|
{
|
|
|
|
var onLoopScope = GetValue(config, 'onLoopScope', scope);
|
|
|
|
var onLoopParams = GetValue(config, 'onLoopParams', []);
|
|
|
|
|
|
|
|
tween.setEventCallback('onLoop', onLoop, [tween].concat(onLoopParams), onLoopScope);
|
|
|
|
}
|
|
|
|
|
|
|
|
var onYoyo = GetValue(config, 'onYoyo', false);
|
|
|
|
|
|
|
|
// Called when a TweenData yoyos
|
|
|
|
if (onYoyo)
|
|
|
|
{
|
|
|
|
var onYoyoScope = GetValue(config, 'onYoyoScope', scope);
|
|
|
|
var onYoyoParams = GetValue(config, 'onYoyoParams', []);
|
|
|
|
|
|
|
|
tween.setEventCallback('onYoyo', onYoyo, [tween].concat(onYoyoParams), onYoyoScope);
|
|
|
|
}
|
|
|
|
|
|
|
|
var onComplete = GetValue(config, 'onComplete', false);
|
|
|
|
|
|
|
|
// Called when the Tween completes, after the completeDelay, etc.
|
|
|
|
if (onComplete)
|
|
|
|
{
|
|
|
|
var onCompleteScope = GetValue(config, 'onCompleteScope', scope);
|
|
|
|
var onCompleteParams = GetValue(config, 'onCompleteParams', []);
|
|
|
|
|
|
|
|
tween.setEventCallback('onComplete', onComplete, [tween].concat(onCompleteParams), onCompleteScope);
|
|
|
|
}
|
2017-05-24 00:27:04 +00:00
|
|
|
|
2017-05-18 05:39:47 +00:00
|
|
|
return tween;
|
2017-05-17 01:44:04 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = TweenBuilder;
|