Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🛠 clamp easeInOut 0 -> 1
+38
-40
+1
-1
demo/castle/castle.js
+1
-1
demo/castle/castle.js
···
250
250
function animate() {
251
251
// update
252
252
if ( isRotating ) {
253
-
var easeT = Zdog.easeInOut( t, 4 );
253
+
var easeT = Zdog.easeInOut( t % 1, 4 );
254
254
var turnLimit = keyframes.length - 1;
255
255
var turn = Math.floor( t % turnLimit );
256
256
var keyframeA = keyframes[ turn ];
+1
-1
demo/codepen-logo/codepen-logo.js
+1
-1
demo/codepen-logo/codepen-logo.js
+1
-1
demo/cones/cones.js
+1
-1
demo/cones/cones.js
···
141
141
t = t % 1;
142
142
var isFirstHalf = t < 0.5;
143
143
var halfT = isFirstHalf ? t : t - 0.5;
144
-
var doubleEaseT = Zdog.easeInOut( halfT * 2, 3 ) / 2;
144
+
var doubleEaseT = Zdog.easeInOut( halfT*2 % 1, 3 ) / 2;
145
145
doubleEaseT += isFirstHalf ? 0 : 0.5;
146
146
illo.rotate.y = doubleEaseT * TAU;
147
147
illo.rotate.x = Math.cos( doubleEaseT * TAU ) * TAU/12;
+1
-1
demo/cylinders/cylinders.js
+1
-1
demo/cylinders/cylinders.js
···
105
105
t = t % 1;
106
106
var isFirstHalf = t < 0.5;
107
107
var halfT = isFirstHalf ? t : t - 0.5;
108
-
var doubleEaseT = Zdog.easeInOut( halfT * 2, 3 ) / 2;
108
+
var doubleEaseT = Zdog.easeInOut( halfT*2 % 1, 3 ) / 2;
109
109
doubleEaseT += isFirstHalf ? 0 : 0.5;
110
110
illo.rotate.y = doubleEaseT * TAU;
111
111
illo.rotate.x = Math.cos( doubleEaseT * TAU ) * TAU/12;
+1
-1
demo/davey-nippu/davey-nippu.js
+1
-1
demo/davey-nippu/davey-nippu.js
+1
-1
demo/fizzy-bear/fizzy-bear.js
+1
-1
demo/fizzy-bear/fizzy-bear.js
+1
-1
demo/happy-town/happy-town.js
+1
-1
demo/happy-town/happy-town.js
+1
-1
demo/hemisphere-ball/hemisphere-ball.js
+1
-1
demo/hemisphere-ball/hemisphere-ball.js
···
92
92
t = t % 1;
93
93
var isFirstHalf = t < 0.5;
94
94
var halfT = isFirstHalf ? t : t - 0.5;
95
-
var doubleEaseT = Zdog.easeInOut( halfT * 2, 3 ) / 2;
95
+
var doubleEaseT = Zdog.easeInOut( halfT*2 % 1, 3 ) / 2;
96
96
doubleEaseT += isFirstHalf ? 0 : 0.5;
97
97
illo.rotate.y = doubleEaseT * TAU;
98
98
illo.rotate.x = Math.cos( doubleEaseT * TAU ) * TAU/12;
+1
-1
demo/hemisphere-cone-ball/hemisphere-cone-ball.js
+1
-1
demo/hemisphere-cone-ball/hemisphere-cone-ball.js
···
97
97
t = t % 1;
98
98
var isFirstHalf = t < 0.5;
99
99
var halfT = isFirstHalf ? t : t - 0.5;
100
-
var doubleEaseT = Zdog.easeInOut( halfT * 2, 3 ) / 2;
100
+
var doubleEaseT = Zdog.easeInOut( halfT*2 % 1, 3 ) / 2;
101
101
doubleEaseT += isFirstHalf ? 0 : 0.5;
102
102
illo.rotate.y = doubleEaseT * TAU;
103
103
illo.rotate.x = Math.cos( doubleEaseT * TAU ) * TAU/12;
+1
-1
demo/little-forest/little-forest.js
+1
-1
demo/little-forest/little-forest.js
···
739
739
// update
740
740
if ( isRotating ) {
741
741
t += tSpeed;
742
-
var theta = Zdog.easeInOut( t ) * TAU;
742
+
var theta = Zdog.easeInOut( t % 1 ) * TAU;
743
743
var delta = TAU * -3/64;
744
744
illo.rotate.y = Math.sin( theta ) * delta;
745
745
illo.rotate.x = ( Math.cos( theta ) * -0.5 + 0.5 ) * delta;
+1
-1
demo/sauropod/sauropod.js
+1
-1
demo/sauropod/sauropod.js
···
196
196
function animate() {
197
197
// update
198
198
if ( isRotating ) {
199
-
var easeT = Zdog.easeInOut( t, 3 );
199
+
var easeT = Zdog.easeInOut( t % 1, 3 );
200
200
illo.rotate.y = easeT*-TAU + TAU/8;
201
201
illo.rotate.x = ( Math.cos( easeT * TAU ) * 0.5 + -0.5 ) * TAU/12;
202
202
t += 1/210;
+1
-1
demo/shade-and-shades-simple/shade-and-shades-simple.js
+1
-1
demo/shade-and-shades-simple/shade-and-shades-simple.js
+1
-1
demo/solid-shifter/shifter.js
+1
-1
demo/solid-shifter/shifter.js
+1
-1
demo/solids/solids.js
+1
-1
demo/solids/solids.js
···
403
403
404
404
if ( isRotating ) {
405
405
t += tSpeed;
406
-
var theta = Zdog.easeInOut( t ) * TAU;
406
+
var theta = Zdog.easeInOut( t % 1 ) * TAU;
407
407
var everyOtherCycle = t % 2 < 1;
408
408
viewRotation.y = everyOtherCycle ? theta : 0;
409
409
viewRotation.x = everyOtherCycle ? 0 : -theta;
+3
-2
demo/strutter-tutorial/strutter-tutorial.js
+3
-2
demo/strutter-tutorial/strutter-tutorial.js
···
6
6
var garnet = '#C25';
7
7
var eggplant = '#636';
8
8
var TAU = Zdog.TAU;
9
+
var initalRotate = { y: -TAU/8 };
9
10
10
11
var illo = new Zdog.Illustration({
11
12
element: '.illo',
12
13
zoom: 5,
13
-
rotate: { y: -TAU/8 },
14
+
rotate: initalRotate,
14
15
dragRotate: true,
15
16
onDragStart: function() {
16
17
isRotating = false;
···
151
152
152
153
function animate() {
153
154
if ( isRotating ) {
154
-
illo.rotate.y = Zdog.easeInOut( t, 4 ) * TAU - TAU/8;
155
+
illo.rotate.y = Zdog.easeInOut( t % 1, 4 ) * TAU + initalRotate.y;
155
156
t += 1/150;
156
157
}
157
158
illo.updateRenderGraph();
+1
-1
demo/strutter/strutter.js
+1
-1
demo/strutter/strutter.js
+1
-1
demo/tri-prism/tri-prism.js
+1
-1
demo/tri-prism/tri-prism.js
+1
-4
demo/unpkg-explode/unpkg-explode.js
+1
-4
demo/unpkg-explode/unpkg-explode.js
···
101
101
102
102
animateFrame = function() {
103
103
var ellasped = now() - start;
104
-
// HACK, should be 1
105
-
var t = Math.min( ellasped / duration, 0.999 ); // 0 -> 1;
104
+
var t = ellasped / duration;
106
105
onFrame( t );
107
106
if ( ellasped < duration ) {
108
107
requestAnimationFrame( animateFrame );
···
118
117
119
118
function startAnimation() {
120
119
animation( 2000, function( t ) {
121
-
// var negT = 1 - t;
122
-
// var easeT = 1 - negT * negT * negT;
123
120
var easeT = Zdog.easeInOut( t, 3 );
124
121
panelAnchors.forEach( function( panelAnchor ) {
125
122
panelAnchor.translate.z = Zdog.lerp( -8, -11, easeT );
+4
-3
demo/zdog-logo/zdog-logo.js
+4
-3
demo/zdog-logo/zdog-logo.js
···
240
240
// update
241
241
if ( isRotating ) {
242
242
var turn = Math.floor( t % 2 );
243
+
var easeT = Zdog.easeInOut( t % 1, 4 );
243
244
if ( turn == 0 ) {
244
-
illo.rotate.y = Zdog.easeInOut( t, 4 ) * TAU + initRotate.y;
245
+
illo.rotate.y = easeT * TAU + initRotate.y;
245
246
} else if ( turn == 1 ) {
246
-
illo.rotate.z = Zdog.easeInOut( t, 4 ) * TAU;
247
-
// scene.rotate.x = Zdog.easeInOut( t, 4 ) * TAU + initRotate.x;
247
+
illo.rotate.z = easeT * TAU;
248
+
// scene.rotate.x = easeT * TAU + initRotate.x;
248
249
}
249
250
t += tSpeed;
250
251
}
+14
-15
js/utils.js
+14
-15
js/utils.js
···
38
38
};
39
39
40
40
var powerMultipliers = {
41
-
2: function( i ) {
42
-
return i * i;
41
+
2: function( a ) {
42
+
return a * a;
43
43
},
44
-
3: function( i ) {
45
-
return i * i * i;
44
+
3: function( a ) {
45
+
return a * a * a;
46
46
},
47
-
4: function( i ) {
48
-
return i * i * i * i;
47
+
4: function( a ) {
48
+
return a * a * a * a;
49
49
},
50
-
5: function( i ) {
51
-
return i * i * i * i * i;
50
+
5: function( a ) {
51
+
return a * a * a * a * a;
52
52
}
53
53
};
54
54
55
-
Zdog.easeInOut = function( i, power ) {
55
+
Zdog.easeInOut = function( alpha, power ) {
56
56
if ( power == 1 ) {
57
-
return i;
57
+
return alpha;
58
58
}
59
-
var powerMultiplier = powerMultipliers[ power ] || powerMultipliers[2];
60
-
61
-
i = i % 1;
62
-
var isFirstHalf = i < 0.5;
63
-
var slope = isFirstHalf ? i : 1 - i;
59
+
alpha = Math.max( 0, Math.min( 1, alpha ) );
60
+
var isFirstHalf = alpha < 0.5;
61
+
var slope = isFirstHalf ? alpha : 1 - alpha;
64
62
slope = slope / 0.5;
65
63
// make easing steeper with more multiples
64
+
var powerMultiplier = powerMultipliers[ power ] || powerMultipliers[2];
66
65
var curve = powerMultiplier( slope );
67
66
curve = curve / 2;
68
67
return isFirstHalf ? curve : 1 - curve;