Skip to content

Commit 33615fc

Browse files
author
daniel-lundin
committed
Add perspective option and add some easing functions
1 parent c1f877b commit 33615fc

File tree

6 files changed

+38
-57
lines changed

6 files changed

+38
-57
lines changed

‎README.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,17 @@ The following easing function are present:
6161

6262
- 'linear'
6363
- 'cos'
64-
- 'cubic'
64+
- 'cos'
6565
- 'atan'
6666
- 'sinc_wobbler'
67+
- 'linear'
68+
- 'square'
69+
- 'sqrt'
70+
- 'cos'
71+
- 'exp_cos_bounce'
72+
- 'exp_cos'
73+
- 'sinc_wobbler'
74+
6775

6876
Under the hood
6977
--------------

‎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: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/animations.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ snabbtjs.Animation = function(options) {
1111
this.duration = options.duration || 500;
1212
this.delay = options.delay || 0;
1313
this.easing = snabbtjs.create_easer('linear');
14+
this.perspective = options.perspective;
1415
if(options.easing)
1516
this.easing = snabbtjs.create_easer(options.easing, options);
1617
this._current_state = this._start_state.clone();
@@ -46,7 +47,8 @@ snabbtjs.Animation.prototype.tick = function(time) {
4647
if(time - this.start_time > this.delay)
4748
this.current_time = time - this.delay;
4849

49-
var curr = Math.min(Math.max(0.001, this.current_time - this.start_time), this.duration);
50+
var curr = Math.min(Math.max(0.0, this.current_time - this.start_time), this.duration);
51+
//var curr = Math.max(this.current_time - this.start_time, this.duration);
5052
var max = this.duration;
5153
this.easing.tick(curr, max);
5254
this.update_current_transform();
@@ -73,7 +75,7 @@ snabbtjs.Animation.prototype.completed = function() {
7375
snabbtjs.Animation.prototype.update_element = function(element) {
7476
var matrix = this._current_state.as_matrix();
7577
var properties = this._current_state.properties();
76-
snabbtjs.update_element_transform(element, matrix);
78+
snabbtjs.update_element_transform(element, matrix, this.perspective);
7779
snabbtjs.update_element_properties(element, properties);
7880
};
7981

@@ -89,6 +91,7 @@ snabbtjs.ValueFeededAnimation = function(options) {
8991
this.value_feeder = options.value_feeder;
9092
this.duration = options.duration || 500;
9193
this.delay = options.delay || 0;
94+
this.perspective = options.perspective;
9295

9396
this.easing = snabbtjs.create_easer('linear');
9497
if(options.easing)
@@ -142,7 +145,7 @@ snabbtjs.ValueFeededAnimation.prototype.completed = function() {
142145
};
143146

144147
snabbtjs.ValueFeededAnimation.prototype.update_element = function(element) {
145-
snabbtjs.update_element_transform(element, this.current_matrix);
148+
snabbtjs.update_element_transform(element, this.current_matrix, this.perspective);
146149
};
147150

148151
// ------------------------------

‎src/easing.js

Lines changed: 9 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -16,65 +16,32 @@ snabbtjs.cos_easing = function(curr, max) {
1616
return (Math.cos((curr/max)*Math.PI + Math.PI) + 1)/2;
1717
};
1818

19-
snabbtjs.create_cubic_bezier_easing = function(p0x, p0y, p1x, p1y) {
20-
return function(curr, max) {
21-
var t = curr/max;
22-
return 3*Math.pow(1-t, 2)*t*(p0x + p0y) + 3*(1-t)*Math.pow(t, 2)*(p1x + p1y) + Math.pow(t, 3);
23-
//return 3*Math.pow(1-t, 2)*t*(p0y) + 3*(1-t)*Math.pow(t, 2)*(p1y) + Math.pow(t, 3);
24-
};
25-
};
26-
27-
snabbtjs.cubic_easing = function(curr, max) {
28-
var t = curr/max;
29-
return (Math.pow(2*t - 1, 3)+1)/2;
30-
};
31-
3219
snabbtjs.sqrt_easing = function(curr, max) {
3320
var t = curr/max;
3421
return (Math.pow(t, 0.5));
3522
};
3623

37-
snabbtjs.cos_wooble_easing = function (curr, max) {
38-
var t = curr/max;
39-
return t*Math.cos(4*Math.PI*t);
40-
};
41-
42-
snabbtjs.atan_easing = function (curr, max) {
43-
var t = curr/max;
44-
return (Math.atan(Math.PI*t - Math.PI/2) + 1)/2;
45-
};
46-
4724
snabbtjs.sinc_wobbler_easing = function (curr, max) {
4825
var t = curr/max;
4926
var k = 5;
5027
return (-Math.sin(k*Math.PI*t)/(k*t) + Math.PI)/Math.PI;
5128
};
5229

53-
snabbtjs.sinc2_wobbler_easing = function (curr, max) {
54-
var t = curr/max;
55-
var k = 4*Math.PI*Math.pow(t, 2);
56-
return (1 - Math.sin(k)/k);
57-
};
58-
5930
snabbtjs.sinc2 = function(curr, max) {
6031
var t = curr/max;
6132
return 1 - Math.sin(20*Math.PI*t)/(20*Math.PI*t);
6233
};
6334

64-
snabbtjs.superman_easing = function(curr, max) {
35+
snabbtjs.exp_cos = function(curr, max) {
6536
var t = curr/max;
66-
var x = 10*Math.PI*(t-0.5);
67-
return t + 0.1*(Math.sin(x)/x);
37+
return 1 + Math.exp(-5*t) * Math.cos(4*Math.PI*t);
6838
};
6939

70-
snabbtjs.sinc = function(curr, max) {
40+
snabbtjs.exp_cos_bounce = function(curr, max) {
7141
var t = curr/max;
72-
var x = 20*Math.PI*(t);
73-
return (Math.sin(x)/x);
42+
return 1 - Math.abs(Math.exp(-5*t) * Math.cos(4*Math.PI*t));
7443
};
7544

76-
77-
7845
snabbtjs.SpringEasing = function(options) {
7946
this.position = snabbtjs.option_or_default(options.start_position, 0);
8047
this.equilibrium_position = snabbtjs.option_or_default(options.equilibrium_position, 1);
@@ -86,7 +53,9 @@ snabbtjs.SpringEasing = function(options) {
8653
this.equilibrium = false;
8754
};
8855

89-
snabbtjs.SpringEasing.prototype.tick = function() {
56+
snabbtjs.SpringEasing.prototype.tick = function(curr, max) {
57+
if(curr === 0.0)
58+
return;
9059
if(this.equilibrium)
9160
return;
9261
var spring_force = -(this.position - this.equilibrium_position) * this.spring_constant;
@@ -116,15 +85,12 @@ snabbtjs.SpringEasing.prototype.completed = function() {
11685

11786
snabbtjs.EASING_FUNCS = {
11887
'linear': snabbtjs.linear_easing,
119-
'cubic': snabbtjs.cubic_easing,
12088
'square': snabbtjs.pow2_easing,
12189
'sqrt': snabbtjs.sqrt_easing,
122-
'atan': snabbtjs.atan_easing,
12390
'cos': snabbtjs.cos_easing,
91+
'exp_cos_bounce': snabbtjs.exp_cos_bounce,
92+
'exp_cos': snabbtjs.exp_cos,
12493
'sinc_wobbler': snabbtjs.sinc_wobbler_easing,
125-
'sinc2_wobbler': snabbtjs.sinc2_wobbler_easing,
126-
'superman': snabbtjs.superman_easing,
127-
'sinc': snabbtjs.sinc,
12894
};
12995

13096
snabbtjs.Easer = function(easer) {

‎src/utils.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,22 @@ snabbtjs.option_or_default = function(option, def) {
77
return option;
88
};
99

10-
snabbtjs._update_element_transform = function(element, matrix) {
11-
element.style.webkitTransform = snabbtjs.mat_to_css(matrix);
12-
element.style.transform = snabbtjs.mat_to_css(matrix);
10+
snabbtjs._update_element_transform = function(element, matrix, perspective) {
11+
var css_perspective = '';
12+
if(perspective) {
13+
css_perspective = 'perspective(' + perspective + 'px) ';
14+
}
15+
element.style.webkitTransform = css_perspective + snabbtjs.mat_to_css(matrix);
16+
element.style.transform = css_perspective + snabbtjs.mat_to_css(matrix);
1317
};
1418

15-
snabbtjs.update_element_transform = function(element, matrix) {
19+
snabbtjs.update_element_transform = function(element, matrix, perspective) {
1620
if(element.hasOwnProperty('length')) {
1721
for(var i=0;i<element.length;++i) {
18-
snabbtjs._update_element_transform(element[i], matrix);
22+
snabbtjs._update_element_transform(element[i], matrix, perspective);
1923
}
2024
} else {
21-
snabbtjs._update_element_transform(element, matrix);
25+
snabbtjs._update_element_transform(element, matrix, perspective);
2226
}
2327
};
2428

0 commit comments

Comments
 (0)