-
Notifications
You must be signed in to change notification settings - Fork 0
WMClock.easing.html
uupaa edited this page Oct 5, 2014
·
1 revision
<!DOCTYPE html><html><head><title>test</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta charset="utf-8"></head><body>
<script src="../node_modules/uupaa.easing.js/lib/Easing.js"></script>
<script src="../node_modules/uupaa.wmbasetime.js/lib/WMBaseTime.js"></script>
<script src="../lib/WMClock.js"></script>
<script src="../lib/WMClock.easing.js"></script>
<script>
var particle = [ _createParticleNode("p1", 0, 0, 100, 100, "rgba(0,0,0,1)") ];
document.body.appendChild(particle[0]);
var ACTIONS = {
A: {
//id [ezfn, v1, v2, t1, t2, option
// node, prop
"p1_x": ["linear", 0, 400, 100, 550, [0, "x"] ],
"p1_y": ["inquad", 0, 400, 100, 550, [0, "y"] ],
"p1_a": ["inquad", 0.8, 0.2, 250, 600, [0, "a"] ]
},
B: {
//id [ezfn, v1, v2, t1, t2, option
// node, prop
"p1_x": ["linear", 400, 0, 1000, 2000, [0, "x"] ],
"p1_y": ["inquad", 400, 0, 1000, 2000, [0, "y"] ],
"p1_a": ["inquad", 0.2, 0.8, 1000, 2000, [0, "a"] ]
}
};
/*
new WMClock({ vsync: true }).easing(ACTION_1, function(time, delta, count, data) {
//console.log(time, delta, count);
for (var id in data) { // id is "p1_x" | "p1_y" | "p1_a"
var ary = id.split("_");
var nid = ary[0];
var prop = ary[1];
switch (prop) {
case "x": particle[nid].style.left = data[id] + "px"; break;
case "y": particle[nid].style.top = data[id] + "px"; break;
case "a": particle[nid].style.backgroundColor = "rgba(0,0,0," + data[id] + ")";
}
}
}, { tax: 5 }).run();
*/
new WMClock({ vsync: true }).easing(ACTIONS.A, _action, { tax: 5 }).run();
function _action(time, // @arg Number
delta, // @arg Number
count, // @arg Integer
source, // @arg Object - ACTIONS.A
values) { // @arg Object - { id: easingFunctionResultValue }
//console.log(time, delta, count);
for (var id in values) { // id is "p1_x" | "p1_y" | "p1_a"
var value = values[id];
var node = particle[source[id][5][0]];
var style = source[id][5][1];
switch (style) {
case "x": node.style.left = value + "px"; break;
case "y": node.style.top = value + "px"; break;
case "a": node.style.backgroundColor = "rgba(0,0,0," + value + ")";
}
}
}
function _createParticleNode(id, x, y, w, h, color) {
var node = document.createElement("div");
node.id = id;
node.style.cssText = "position:absolute;" +
"left:" + x + "px;" +
"top:" + y + "px;" +
"width:" + w + "px;" +
"height:" + h + "px;" +
"background-color:" + color;
return node;
}
</script>
</body></html>