8000 Refactor animation classes · inter-coder/snabbt.js@ce2f3f5 · GitHub
[go: up one dir, main page]
Skip to content

Commit ce2f3f5

Browse files
author
daniel-lundin
committed
Refactor animation classes
1 parent 50c6c7f commit ce2f3f5

File tree

10 files changed

+285
-187
lines changed

10 files changed

+285
-187
lines changed

‎Gruntfile.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ module.exports = function(grunt) {
1212
dest: 'dist/jquery.snabbt.min.js'
1313
},
1414
standalone: {
15-
src: ['src/animations.js', 'src/easing.js', 'src/main.js', 'src/mat.js', 'src/state.js', 'src/utils.js'],
15+
src: ['src/animations.js', 'src/easing.js', 'src/tween.js', 'src/main.js', 'src/mat.js', 'src/state.js', 'src/utils.js'],
1616
dest: 'dist/snabbt.min.js'
1717
}
1818
},
@@ -25,7 +25,7 @@ module.exports = function(grunt) {
2525
dest: 'dist/jquery.snabbt.js',
2626
},
2727
dist: {
28-
src: ['src/animations.js', 'src/easing.js', 'src/main.js', 'src/mat.js', 'src/state.js', 'src/utils.js'],
28+
src: ['src/animations.js', 'src/easing.js', 'src/tween.js', 'src/main.js', 'src/mat.js', 'src/state.js', 'src/utils.js'],
2929
dest: 'dist/snabbt.js'
3030
},
3131
},

‎dist/jquery.snabbt.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/snabbt.min.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/animations.js

Lines changed: 113 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,19 @@
11
var snabbtjs = snabbtjs || {};
22

3-
snabbtjs.AnimationType = {};
4-
snabbtjs.AnimationType.TIME = 1;
5-
snabbtjs.AnimationType.MANUAL = 2;
6-
snabbtjs.AnimationType.SPRING = 3;
3+
// ------------------------------
4+
// Time animation
5+
// ------------------------------
76

87
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;
1510
this.offset = options.offset;
1611
this.duration = options.duration || 500;
1712
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();
3317
if(options.offset) {
3418
this._current_state.offset_x = this.offset[0];
3519
this._current_state.offset_y = this.offset[1];
@@ -38,6 +22,10 @@ snabbtjs.Animation.prototype.assign = function(options) {
3822
this._end_state.offset_y = this.offset[1];
3923
this._end_state.offset_z = this.offset[2];
4024
}
25+
26+
this.start_time = 0;
27+
this.current_time = 0;
28+
this._stopped = false;
4129
};
4230

4331
snabbtjs.Animation.prototype.stop = function() {
@@ -49,127 +37,117 @@ snabbtjs.Animation.prototype.stopped = function() {
4937
};
5038

5139
snabbtjs.Animation.prototype.tick = function(time) {
52-
// If first tick, set start_time
5340
if(this._stopped)
5441
return;
5542

56-
if(!this.start_time) {
43+
// If first tick, set start_time
44+
if(!this.start_time)
5745
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;
7848

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();
8253
};
8354

8455
snabbtjs.Animation.prototype.current_state = function() {
85-
if(!this._stopped)
86-
this.update_current_transition();
8756
return this._current_state;
8857
};
8958

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+
9064
snabbtjs.Animation.prototype.completed = function() {
9165
if(this._stopped)
9266
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) {
10168
return false;
10269
}
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;
103102
};
104103

105-
snabbtjs.Animation.prototype.start_state = function() {
106-
return this._start_state;
104+
snabbtjs.ValueFeededAnimation.prototype.stop = function() {
105+
this._stopped = true;
107106
};
108107

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(time) {
110113
if(this._stopped)
111-
return this.current_state();
114+
return;
112115

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();
118127
};
119128

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+
};
130132

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();
171142
};
172143

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+
// ------------------------------
173151

174152
// ---------------------- \\
175153
// -- ScrollAnimation -- \\
@@ -220,6 +198,7 @@ snabbtjs.AttentionAnimation = function(options) {
220198
this.movement = options.movement;
221199
this.current_movement = new snabbtjs.State({});
222200
options.initial_velocity = 0.1;
201+
options.equilibrium_position = 0;
223202
this.spring = new snabbtjs.SpringEasing(options);
224203
this._stopped = false;
225204
};
@@ -254,10 +233,25 @@ snabbtjs.AttentionAnimation.prototype.update_movement = function() {
254233
this.current_movement.bz = this.movement.bz * this.spring.position;
255234
};
256235

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+
257243
snabbtjs.AttentionAnimation.prototype.current_state = function() {
258244
return this.current_movement;
259245
};
260246

261247
snabbtjs.AttentionAnimation.prototype.completed = function() {
262248
return this.spring.equilibrium || this._stopped;
263249
};
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+
};

‎src/easing.js

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ snabbtjs.sinc = function(curr, max) {
7777

7878
snabbtjs.SpringEasing = function(options) {
7979
this.position = snabbtjs.option_or_default(options.start_position, 0);
80-
this.equilibrium_position = snabbtjs.option_or_default(options.equilibrium_position, 0);
80+
this.equilibrium_position = snabbtjs.option_or_default(options.equilibrium_position, 1);
8181
this.velocity = snabbtjs.option_or_default(options.initial_velocity, 0);
8282
this.spring_constant = snabbtjs.option_or_default(options.spring_constant, 0.8);
8383
this.deacceleration = snabbtjs.option_or_default(options.deacceleration, 0.9);
@@ -106,6 +106,14 @@ snabbtjs.SpringEasing.prototype.tick = function() {
106106
}
107107
};
108108

109+
snabbtjs.SpringEasing.prototype.value = function() {
110+
return this.position;
111+
};
112+
113+
snabbtjs.SpringEasing.prototype.completed = function() {
114+
return this.equilibrium;
115+
};
116+
109117
snabbtjs.EASING_FUNCS = {
110118
'linear': snabbtjs.linear_easing,
111119
'cubic': snabbtjs.cubic_easing,
@@ -118,3 +126,29 @@ snabbtjs.EASING_FUNCS = {
118126
'superman': snabbtjs.superman_easing,
119127
'sinc': snabbtjs.sinc,
120128
};
129+
130+
snabbtjs.Easer = function(easer) {
131+
this.easer = easer;
132+
this._value = 0;
133+
};
134+
135+
snabbtjs.Easer.prototype.tick = function(curr, max) {
136+
this._value = this.easer(curr, max);
137+
this.last_value = curr/max;
138+
};
139+
140+
snabbtjs.Easer.prototype.value = function() {
141+
return this._value;
142+
};
143+
144+
snabbtjs.Easer.prototype.completed = function() {
145+
return this.last_value >= 1;
146+
};
147+
148+
snabbtjs.create_easer = function(easer_name, options) {
149+
if(easer_name == 'spring') {
150+
return new snabbtjs.SpringEasing(options);
151+
}
152+
var ease_func = snabbtjs.EASING_FUNCS[easer_name];
153+
return new snabbtjs.Easer(ease_func);
154+
};

0 commit comments

Comments
 (0)
0