1
1
var snabbtjs = snabbtjs || { } ;
2
2
3
- snabbtjs . AnimationType = { } ;
4
- snabbtjs . AnimationType . TIME = 1 ;
5
- snabbtjs . AnimationType . MANUAL = 2 ;
6
- snabbtjs . AnimationType . SPRING = 3 ;
3
+ // ------------------------------
4
+ // Time animation
5
+ // ------------------------------
7
6
8
7
snabbtjs . Animation = function ( options ) {
9
- this . assign ( options ) ;
10
- } ;
11
-
12
- snabbtjs . Animation . prototype . assign = function ( options ) {
13
- this . _start_state = options . start_state || new snabbtjs . State ( { } ) ;
14
- this . _end_state = options . end_state || new snabbtjs . State ( { } ) ;
8
+ this . _start_state = options . start_state ;
9
+ this . _end_state = options . end_state ;
15
10
this . offset = options . offset ;
16
11
this . duration = options . duration || 500 ;
17
12
this . delay = options . delay || 0 ;
18
- this . easing = options . easing || snabbtjs . linear_easing ;
19
- this . mode = options . mode || snabbtjs . AnimationType . TIME ;
20
-
21
- this . start_time = 0 ;
22
- this . current_time = 0 ;
23
- this . _stopped = false ;
24
- // Manual related, should probably be subclassed
25
- this . value = 0 ;
26
-
27
- if ( this . mode === snabbtjs . AnimationType . SPRING ) {
28
- options . equilibrium_position = 1 ;
29
- this . spring = new snabbtjs . SpringEasing ( options ) ;
30
- }
31
-
32
- this . _current_state = new snabbtjs . State ( { } ) ;
13
+ this . easing = snabbtjs . create_easer ( 'linear' ) ;
14
+ if ( options . easing )
15
+ this . easing = snabbtjs . create_easer ( options . easing , options ) ;
16
+ this . _current_state = this . _start_state . clone ( ) ;
33
17
if ( options . offset ) {
34
18
this . _current_state . offset_x = this . offset [ 0 ] ;
35
19
this . _current_state . offset_y = this . offset [ 1 ] ;
@@ -38,6 +22,10 @@ snabbtjs.Animation.prototype.assign = function(options) {
38
22
this . _end_state . offset_y = this . offset [ 1 ] ;
39
23
this . _end_state . offset_z = this . offset [ 2 ] ;
40
24
}
25
+
26
+ this . start_time = 0 ;
27
+ this . current_time = 0 ;
28
+ this . _stopped = false ;
41
29
} ;
42
30
43
31
snabbtjs . Animation . prototype . stop = function ( ) {
@@ -49,127 +37,117 @@ snabbtjs.Animation.prototype.stopped = function() {
49
37
} ;
50
38
51
39
snabbtjs . Animation . prototype . tick = function ( time ) {
52
- // If first tick, set start_time
53
40
if ( this . _stopped )
54
41
return ;
55
42
56
- if ( ! this . start_time ) {
43
+ // If first tick, set start_time
44
+ if ( ! this . start_time )
57
45
this . start_time = time ;
58
- }
59
- if ( this . mode == snabbtjs . AnimationType . TIME ) {
60
- if ( time - this . start_time > this . delay )
61
- this . current_time = time - this . delay ;
62
- } else if ( this . mode == snabbtjs . AnimationType . SPRING ) {
63
- if ( time - this . start_time > this . delay )
64
- this . spring . tick ( ) ;
65
- }
66
- } ;
67
-
68
- snabbtjs . Animation . prototype . stop_manual = function ( complete ) {
69
- // Start a TIME based animation from current state
70
- // to end_state or start_state depending on complete
71
- if ( ! complete ) {
72
- this . _end_state . assign ( this . _start_state ) ;
73
- this . delay = - this . delay ;
74
- }
75
- this . _start_state . assign ( this . _current_state ) ;
76
- this . mode = snabbtjs . AnimationType . TIME ;
77
- } ;
46
+ if ( time - this . start_time > this . delay )
47
+ this . current_time = time - this . delay ;
78
48
79
- snabbtjs . Animation . prototype . set_value = function ( value ) {
80
- var delay = this . delay / this . duration ;
81
- this . value = Math . max ( 0 , Math . min ( value - delay , 1 ) ) ;
49
+ var curr = Math . min ( Math . max ( 0.001 , this . current_time - this . start_time ) , this . duration ) ;
50
+ var max = this . duration ;
51
+ this . easing . tick ( curr , max ) ;
52
+ this . update_current_transform ( ) ;
82
53
} ;
83
54
84
55
snabbtjs . Animation . prototype . current_state = function ( ) {
85
- if ( ! this . _stopped )
86
- this . update_current_transition ( ) ;
87
56
return this . _current_state ;
88
57
} ;
89
58
59
+ snabbtjs . Animation . prototype . update_current_transform = function ( ) {
60
+ var tween_value = this . easing . value ( ) ;
61
+ snabbtjs . TweenStates ( this . _start_state , this . _end_state , this . _current_state , tween_value ) ;
62
+ } ;
63
+
90
64
snabbtjs . Animation . prototype . completed = function ( ) {
91
65
if ( this . _stopped )
92
66
return true ;
93
- if ( this . mode == snabbtjs . AnimationType . TIME ) {
94
- if ( this . start_time === 0 ) {
95
- return false ;
96
- }
97
- return this . current_time - this . start_time > this . duration ;
98
- } else if ( this . mode == snabbtjs . AnimationType . SPRING ) {
99
- return this . spring . equilibrium ;
100
- } else {
67
+ if ( this . start_time === 0 ) {
101
68
return false ;
102
69
}
70
+ return this . easing . completed ( ) ;
71
+ } ;
72
+
73
+ snabbtjs . Animation . prototype . update_element = function ( element ) {
74
+ var matrix = this . _current_state . as_matrix ( ) ;
75
+ var properties = this . _current_state . properties ( ) ;
76
+ snabbtjs . update_element_transform ( element , matrix ) ;
77
+ snabbtjs . update_element_properties ( element , properties ) ;
78
+ } ;
79
+
80
+ // ------------------------------
81
+ // End Time animation
82
+ // ------------------------------
83
+
84
+ // ------------------------------
85
+ // Value feeded animation
86
+ // ------------------------------
87
+
88
+ snabbtjs . ValueFeededAnimation = function ( options ) {
89
+ this . value_feeder = options . value_feeder ;
90
+ this . duration = options . duration || 500 ;
91
+ this . delay = options . delay || 0 ;
92
+
93
+ this . easing = snabbtjs . create_easer ( 'linear' ) ;
94
+ if ( options . easing )
95
+ this . easing = snabbtjs . create_easer ( options . easing , options ) ;
96
+ this . _current_state = new snabbtjs . State ( { } ) ;
97
+ this . current_matrix = this . value_feeder ( 0 ) ;
98
+
99
+ this . start_time = 0 ;
100
+ this . current_time = 0 ;
101
+ this . _stopped = false ;
103
102
} ;
104
103
105
- snabbtjs . Animation . prototype . start_state = function ( ) {
106
- return this . _start_state ;
104
+ snabbtjs . ValueFeededAnimation . prototype . stop = function ( ) {
105
+ this . _stopped = true ;
107
106
} ;
108
107
109
- snabbtjs . Animation . prototype . end_state = function ( ) {
108
+ snabbtjs . ValueFeededAnimation . prototype . stopped = function ( ) {
109
+ return this . _stopped ;
110
+ } ;
111
+
112
+ snabbtjs . ValueFeededAnimation . prototype . tick = function <
10000
span class=pl-kos>(time ) {
110
113
if ( this . _stopped )
111
- return this . current_state ( ) ;
114
+ return ;
112
115
113
- if ( this . mode == snabbtjs . AnimationType . TIME || this . mode == snabbtjs . AnimationType . SPRING ) {
114
- return this . _end_state ;
115
- } else {
116
- return this . current_state ( ) ;
117
- }
116
+ // If first tick, set start_time
117
+ if ( ! this . start_time )
118
+ this . start_time = time ;
119
+ if ( time - this . start_time > this . delay )
120
+ this . current_time = time - this . delay ;
121
+
122
+ var curr = Math . min ( Math . max ( 0.001 , this . current_time - this . start_time ) , this . duration ) ;
123
+ var max = this . duration ;
124
+ this . easing . tick ( curr , max ) ;
125
+
126
+ this . update_current_transform ( ) ;
118
127
} ;
119
128
120
- snabbtjs . Animation . prototype . update_current_transition = function ( ) {
121
- var curr = 0 ;
122
- var max = 0 ;
123
- if ( this . mode == snabbtjs . AnimationType . TIME ) {
124
- curr = Math . min ( Math . max ( 0.001 , this . current_time - this . start_time ) , this . duration ) ;
125
- max = this . duration ;
126
- }
127
- if ( this . mode == snabbtjs . AnimationType . SPRING ) {
128
- curr = this . spring . position ;
129
- }
129
+ snabbtjs . ValueFeededAnimation . prototype . current_state = function ( ) {
130
+ return this . _current_state ;
131
+ } ;
130
132
131
- var dx = ( this . _end_state . x - this . _start_state . x ) ;
132
- var dy = ( this . _end_state . y - this . _start_state . y ) ;
133
- var dz = ( this . _end_state . z - this . _start_state . z ) ;
134
- var dax = ( this . _end_state . ax - this . _start_state . ax ) ;
135
- var day = ( this . _end_state . ay - this . _start_state . ay ) ;
136
- var daz = ( this . _end_state . az - this . _start_state . az ) ;
137
- var dbx = ( this . _end_state . bx - this . _start_state . bx ) ;
138
- var dby = ( this . _end_state . by - this . _start_state . by ) ;
139
- var dbz = ( this . _end_state . bz - this . _start_state . bz ) ;
140
- var dsx = ( this . _end_state . sx - this . _start_state . sx ) ;
141
- var dsy = ( this . _end_state . sy - this . _start_state . sy ) ;
142
- var dwidth = ( this . _end_state . width - this . _start_state . width ) ;
143
- var dheight = ( this . _end_state . height - this . _start_state . height ) ;
144
- var dopacity = ( this . _end_state . opacity - this . _start_state . opacity ) ;
145
-
146
- var s = 0 ;
147
- if ( this . mode == snabbtjs . AnimationType . TIME ) {
148
- s = this . easing ( curr , max ) ;
149
- } else if ( this . mode == snabbtjs . AnimationType . SPRING ) {
150
- s = curr ;
151
- } else {
152
- s = this . value ;
153
- }
154
- this . _current_state . ax = this . _start_state . ax + s * dax ;
155
- this . _current_state . ay = this . _start_state . ay + s * day ;
156
- this . _current_state . az = this . _start_state . az + s * daz ;
157
- this . _current_state . x = this . _start_state . x + s * dx ;
158
- this . _current_state . y = this . _start_state . y + s * dy ;
159
- this . _current_state . z = this . _start_state . z + s * dz ;
160
- this . _current_state . bx = this . _start_state . bx + s * dbx ;
161
- this . _current_state . by = this . _start_state . by + s * dby ;
162
- this . _current_state . bz = this . _start_state . bz + s * dbz ;
163
- this . _current_state . sx = this . _start_state . sx + s * dsx ;
164
- this . _current_state . sy = this . _start_state . sy + s * dsy ;
165
- if ( this . _end_state . width !== undefined )
166
- this . _current_state . width = this . _start_state . width + s * dwidth ;
167
- if ( this . _end_state . height !== undefined )
168
- this . _current_state . height = this . _start_state . height + s * dheight ;
169
- if ( this . _end_state . opacity !== undefined )
170
- this . _current_state . opacity = this . _start_state . opacity + s * dopacity ;
133
+ snabbtjs . ValueFeededAnimation . prototype . update_current_transform = function ( ) {
134
+ var tween_value = this . easing . value ( ) ;
135
+ this . current_matrix = this . value_feeder ( tween_value ) ;
136
+ } ;
137
+
138
+ snabbtjs . ValueFeededAnimation . prototype . completed = function ( ) {
139
+ if ( this . _stopped )
140
+ return true ;
141
+ return this . easing . completed ( ) ;
171
142
} ;
172
143
144
+ snabbtjs . ValueFeededAnimation . prototype . update_element = function ( element ) {
145
+ snabbtjs . update_element_transform ( element , this . current_matrix ) ;
146
+ } ;
147
+
148
+ // ------------------------------
149
+ // End value feeded animation
150
+ // ------------------------------
173
151
174
152
// ---------------------- \\
175
153
// -- ScrollAnimation -- \\
@@ -220,6 +198,7 @@ snabbtjs.AttentionAnimation = function(options) {
220
198
this . movement = options . movement ;
221
199
this . current_movement = new snabbtjs . State ( { } ) ;
222
200
options . initial_velocity = 0.1 ;
201
+ options . equilibrium_position = 0 ;
223
202
this . spring = new snabbtjs . SpringEasing ( options ) ;
224
203
this . _stopped = false ;
225
204
} ;
@@ -254,10 +233,25 @@ snabbtjs.AttentionAnimation.prototype.update_movement = function() {
254
233
this . current_movement . bz = this . movement . bz * this . spring . position ;
255
234
} ;
256
235
236
+ snabbtjs . AttentionAnimation . prototype . update_element = function ( element ) {
237
+ var matrix = this . current_movement . as_matrix ( ) ;
238
+ var properties = this . current_movement . properties ( ) ;
239
+ snabbtjs . update_element_transform ( element , matrix ) ;
240
+ snabbtjs . update_element_properties ( element , properties ) ;
241
+ } ;
242
+
257
243
snabbtjs . AttentionAnimation . prototype . current_state = function ( ) {
258
244
return this . current_movement ;
259
245
} ;
260
246
261
247
snabbtjs . AttentionAnimation . prototype . completed = function ( ) {
262
248
return this . spring . equilibrium || this . _stopped ;
263
249
} ;
250
+
251
+
252
+ // Returns animation constructors based on options
253
+ snabbtjs . create_animation = function ( options ) {
254
+ if ( options . value_feeder )
255
+ return new snabbtjs . ValueFeededAnimation ( options ) ;
256
+ return new snabbtjs . Animation ( options ) ;
257
+ } ;
0 commit comments