forked from pubnub/javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
/
animate.js
86 lines (75 loc) · 2.43 KB
/
animate.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
(function(){
/* =-=====================================================================-= */
/* =-=====================================================================-= */
/* =-========================== ANIMATE ==========================-= */
/* =-=====================================================================-= */
/* =-=====================================================================-= */
/*
animate( PUBNUB.$('m'), [
{ 'd' : 2, 'r' : 360, 'background' : 'orange' },
{ 'd' : 2, 's' : 2, 'r' : 30, 'background' : 'green' }
] );
*/
var tranfaobigi = {
'r' : 'rotate',
'rz' : 'rotateZ',
'rx' : 'rotateX',
'ry' : 'rotateY',
'p' : 'perspective',
's' : 'scale',
'm' : 'matrix',
'tx' : 'translateX',
'ty' : 'translateY'
}, tranfaobigi_unit = {
'r' : 'deg',
'rz' : 'deg',
'rx' : 'deg',
'ry' : 'deg',
'tx' : 'px',
'ty' : 'px'
}
, each = PUBNUB.each
, attr = PUBNUB.attr
, animate = window['animate'] = function( node, keyframes, callback ) {
var keyframe = keyframes.shift()
, duration = (keyframe && keyframe['d'] || 1) * 1010
, callback = callback || function(){};
if (keyframe) transform( node, keyframe );
else return callback();
// ready for next keyframe
setTimeout( function(){
animate( node, keyframes, callback )
}, duration );
};
function transform( node, keyframe ) {
var tranbuff = []
, trans = ''
, stylebuff = []
, style = ''
, duration = (keyframe['d'] || 1) + 's';
delete keyframe['d'];
// Transformation CSS3
each( keyframe, function( k, v ) {
var what = tranfaobigi[k]
, unit = tranfaobigi_unit[k] || '';
if (!what) return;
delete keyframe[k];
tranbuff.push( what + '(' + v + unit + ')' );
} );
trans = tranbuff.join(' ') || '';
stylebuff.push(
'-o-transition:all ' + duration,
'-moz-transition:all ' + duration,
'-webkit-transition:all ' + duration,
'transition:all ' + duration,
'-o-transform:' + trans,
'-moz-transform:' + trans,
'-webkit-transform:' + trans,
'transform:' + trans
);
// CSS2
each( keyframe, function( k, v ) { stylebuff.push( k + ':' + v ) } );
style = stylebuff.join(';') || '';
try { attr( node, 'style', style ) } catch(e) {}
}
})();