Skip to content

Commit de2d51e

Browse files
filipowsfilipows
committed
feat(): add support for multiple concurrent animations when used Ivy renderer
1 parent 9e9e486 commit de2d51e

File tree

80 files changed

+1361
-1270
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+1361
-1270
lines changed

‎lib/attention-seekers/bounce.animation.ts

+19-18
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,23 @@ import {
1515

1616
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

18-
const bounce = animation([
19-
animate(
20-
'{{duration}}ms {{delay}}ms',
21-
keyframes([
22-
style({ visibility: AUTO_STYLE, transform: 'translate3d(0, 0, 0)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0 }),
23-
style({ transform: 'translate3d(0, 0, 0)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.2 }),
24-
style({ transform: 'translate3d(0, -30px, 0)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.4 }),
25-
style({ transform: 'translate3d(0, -30px, 0)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', offset: 0.43 }),
26-
style({ transform: 'translate3d(0, 0, 0)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', offset: 0.53 }),
27-
style({ transform: 'translate3d(0, -15px, 0)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.7 }),
28-
style({ transform: 'translate3d(0, 0, 0)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', offset: 0.8 }),
29-
style({ transform: 'translate3d(0, -4px, 0)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.9 }),
30-
style({ transform: 'translate3d(0, 0, 0)', easing: 'ease', offset: 1 })
31-
])
32-
)
33-
]);
18+
const bounce = () =>
19+
animation([
20+
animate(
21+
'{{duration}}ms {{delay}}ms',
22+
keyframes([
23+
style({ visibility: AUTO_STYLE, transform: 'translate3d(0, 0, 0)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0 }),
24+
style({ transform: 'translate3d(0, 0, 0)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.2 }),
25+
style({ transform: 'translate3d(0, -30px, 0)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.4 }),
26+
style({ transform: 'translate3d(0, -30px, 0)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', offset: 0.43 }),
27+
style({ transform: 'translate3d(0, 0, 0)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', offset: 0.53 }),
28+
style({ transform: 'translate3d(0, -15px, 0)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.7 }),
29+
style({ transform: 'translate3d(0, 0, 0)', easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', offset: 0.8 }),
30+
style({ transform: 'translate3d(0, -4px, 0)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)', offset: 0.9 }),
31+
style({ transform: 'translate3d(0, 0, 0)', easing: 'ease', offset: 1 })
32+
])
33+
)
34+
]);
3435

3536
const DEFAULT_DURATION = 1000;
3637

@@ -42,7 +43,7 @@ export function bounceAnimation(options?: IAttentionSeekerAnimationOptions): Ani
4243
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4344
group([
4445
style({ 'transform-origin': 'center bottom' }),
45-
useAnimation(bounce),
46+
useAnimation(bounce()),
4647
...(!options || !options.animateChildren || options.animateChildren === 'together'
4748
? [query('@*', animateChild(), { optional: true })]
4849
: [])
@@ -68,7 +69,7 @@ export function bounceOnEnterAnimation(options?: IAnimationOptions): AnimationTr
6869
style({ visibility: 'hidden' }),
6970
group([
7071
style({ 'transform-origin': 'center bottom' }),
71-
useAnimation(bounce),
72+
useAnimation(bounce()),
7273
...(!options || !options.animateChildren || options.animateChildren === 'together'
7374
? [query('@*', animateChild(), { optional: true })]
7475
: [])

‎lib/attention-seekers/flash.animation.ts

+15-14
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,19 @@ import {
1515

1616
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

18-
const flash = animation([
19-
animate(
20-
'{{duration}}ms {{delay}}ms',
21-
keyframes([
22-
style({ visibility: AUTO_STYLE, opacity: 1, easing: 'ease', offset: 0 }),
23-
style({ opacity: 0, easing: 'ease', offset: 0.25 }),
24-
style({ opacity: 1, easing: 'ease', offset: 0.5 }),
25-
style({ opacity: 0, easing: 'ease', offset: 0.75 }),
26-
style({ opacity: 1, easing: 'ease', offset: 1 })
27-
])
28-
)
29-
]);
18+
const flash = () =>
19+
animation([
20+
animate(
21+
'{{duration}}ms {{delay}}ms',
22+
keyframes([
23+
style({ visibility: AUTO_STYLE, opacity: 1, easing: 'ease', offset: 0 }),
24+
style({ opacity: 0, easing: 'ease', offset: 0.25 }),
25+
style({ opacity: 1, easing: 'ease', offset: 0.5 }),
26+
style({ opacity: 0, easing: 'ease', offset: 0.75 }),
27+
style({ opacity: 1, easing: 'ease', offset: 1 })
28+
])
29+
)
30+
]);
3031

3132
const DEFAULT_DURATION = 1000;
3233

@@ -37,7 +38,7 @@ export function flashAnimation(options?: IAttentionSeekerAnimationOptions): Anim
3738
[
3839
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
3940
group([
40-
useAnimation(flash),
41+
useAnimation(flash()),
4142
...(!options || !options.animateChildren || options.animateChildren === 'together'
4243
? [query('@*', animateChild(), { optional: true })]
4344
: [])
@@ -62,7 +63,7 @@ export function flashOnEnterAnimation(options?: IAnimationOptions): AnimationTri
6263
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
6364
style({ visibility: 'hidden' }),
6465
group([
65-
useAnimation(flash),
66+
useAnimation(flash()),
6667
...(!options || !options.animateChildren || options.animateChildren === 'together'
6768
? [query('@*', animateChild(), { optional: true })]
6869
: [])

‎lib/attention-seekers/head-shake.animation.ts

+16-15
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,20 @@ import {
1515

1616
import { IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

18-
const headShake = animation([
19-
animate(
20-
'{{duration}}ms {{delay}}ms',
21-
keyframes([
22-
style({ visibility: AUTO_STYLE, transform: 'translateX(0)', easing: 'ease-in-out', offset: 0 }),
23-
style({ transform: 'translateX(-6px) rotateY(-9deg)', easing: 'ease-in-out', offset: 0.065 }),
24-
style({ transform: 'translateX(5px) rotateY(7deg)', easing: 'ease-in-out', offset: 0.185 }),
25-
style({ transform: 'translateX(-3px) rotateY(-5deg)', easing: 'ease-in-out', offset: 0.315 }),
26-
style({ transform: 'translateX(2px) rotateY(3deg)', easing: 'ease-in-out', offset: 0.435 }),
27-
style({ transform: 'translateX(0)', easing: 'ease-in-out', offset: 0.5 })
28-
])
29-
)
30-
]);
18+
const headShake = () =>
19+
animation([
20+
animate(
21+
'{{duration}}ms {{delay}}ms',
22+
keyframes([
23+
style({ visibility: AUTO_STYLE, transform: 'translateX(0)', easing: 'ease-in-out', offset: 0 }),
24+
style({ transform: 'translateX(-6px) rotateY(-9deg)', easing: 'ease-in-out', offset: 0.065 }),
25+
style({ transform: 'translateX(5px) rotateY(7deg)', easing: 'ease-in-out', offset: 0.185 }),
26+
style({ transform: 'translateX(-3px) rotateY(-5deg)', easing: 'ease-in-out', offset: 0.315 }),
27+
style({ transform: 'translateX(2px) rotateY(3deg)', easing: 'ease-in-out', offset: 0.435 }),
28+
style({ transform: 'translateX(0)', easing: 'ease-in-out', offset: 0.5 })
29+
])
30+
)
31+
]);
3132

3233
const DEFAULT_DURATION = 1000;
3334

@@ -38,7 +39,7 @@ export function headShakeAnimation(options?: IAttentionSeekerAnimationOptions):
3839
[
3940
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4041
group([
41-
useAnimation(headShake),
42+
useAnimation(headShake()),
4243
...(!options || !options.animateChildren || options.animateChildren === 'together'
4344
? [query('@*', animateChild(), { optional: true })]
4445
: [])
@@ -63,7 +64,7 @@ export function headShakeOnEnterAnimation(options?: IAttentionSeekerAnimationOpt
6364
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
6465
style({ visibility: 'hidden' }),
6566
group([
66-
useAnimation(headShake),
67+
useAnimation(headShake()),
6768
...(!options || !options.animateChildren || options.animateChildren === 'together'
6869
? [query('@*', animateChild(), { optional: true })]
6970
: [])

‎lib/attention-seekers/heart-beat.animation.ts

+15-14
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,19 @@ export interface IHeartBeatAnimationOptions extends IAttentionSeekerAnimationOpt
2424
scale?: number;
2525
}
2626

27-
const heartBeat = animation([
28-
animate(
29-
'{{duration}}ms {{delay}}ms',
30-
keyframes([
31-
style({ visibility: AUTO_STYLE, transform: 'scale(1)', easing: 'ease-in-out', offset: 0 }),
32-
style({ transform: 'scale({{scale}})', easing: 'ease-in-out', offset: 0.14 }),
33-
style({ transform: 'scale(1)', easing: 'ease-in-out', offset: 0.28 }),
34-
style({ transform: 'scale({{scale}})', easing: 'ease-in-out', offset: 0.42 }),
35-
style({ transform: 'scale(1)', easing: 'ease-in-out', offset: 0.7 })
36-
])
37-
)
38-
]);
27+
const heartBeat = () =>
28+
animation([
29+
animate(
30+
'{{duration}}ms {{delay}}ms',
31+
keyframes([
32+
style({ visibility: AUTO_STYLE, transform: 'scale(1)', easing: 'ease-in-out', offset: 0 }),
33+
style({ transform: 'scale({{scale}})', easing: 'ease-in-out', offset: 0.14 }),
34+
style({ transform: 'scale(1)', easing: 'ease-in-out', offset: 0.28 }),
35+
style({ transform: 'scale({{scale}})', easing: 'ease-in-out', offset: 0.42 }),
36+
style({ transform: 'scale(1)', easing: 'ease-in-out', offset: 0.7 })
37+
])
38+
)
39+
]);
3940

4041
const DEFAULT_DURATION = 1300;
4142
const DEFAULT_SCALE = 1.3;
@@ -47,7 +48,7 @@ export function heartBeatAnimation(options?: IHeartBeatAnimationOptions): Animat
4748
[
4849
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4950
group([
50-
useAnimation(heartBeat),
51+
useAnimation(heartBeat()),
5152
...(!options || !options.animateChildren || options.animateChildren === 'together'
5253
? [query('@*', animateChild(), { optional: true })]
5354
: [])
@@ -73,7 +74,7 @@ export function heartBeatOnEnterAnimation(options?: IHeartBeatAnimationOptions):
7374
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
7475
style({ visibility: 'hidden' }),
7576
group([
76-
useAnimation(heartBeat),
77+
useAnimation(heartBeat()),
7778
...(!options || !options.animateChildren || options.animateChildren === 'together'
7879
? [query('@*', animateChild(), { optional: true })]
7980
: [])

‎lib/attention-seekers/jello.animation.ts

+20-19
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,24 @@ import {
1515

1616
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

18-
const jello = animation([
19-
animate(
20-
'{{duration}}ms {{delay}}ms',
21-
keyframes([
22-
style({ visibility: AUTO_STYLE, transform: 'translate3d(0, 0, 0)', easing: 'ease', offset: 0 }),
23-
style({ transform: 'translate3d(0, 0, 0)', easing: 'ease', offset: 0.111 }),
24-
style({ transform: 'skewX(-12.5deg) skewY(-12.5deg)', easing: 'ease', offset: 0.222 }),
25-
style({ transform: 'skewX(6.25deg) skewY(6.25deg)', easing: 'ease', offset: 0.333 }),
26-
style({ transform: 'skewX(-3.125deg) skewY(-3.125deg)', easing: 'ease', offset: 0.444 }),
27-
style({ transform: 'skewX(1.5625deg) skewY(1.5625deg)', easing: 'ease', offset: 0.555 }),
28-
style({ transform: 'skewX(-0.78125deg) skewY(-0.78125deg)', easing: 'ease', offset: 0.666 }),
29-
style({ transform: 'skewX(0.390625deg) skewY(0.390625deg)', easing: 'ease', offset: 0.777 }),
30-
style({ transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)', easing: 'ease', offset: 0.888 }),
31-
style({ transform: 'skewX(0deg) skewY(0deg)', easing: 'ease', offset: 1 })
32-
])
33-
)
34-
]);
18+
const jello = () =>
19+
animation([
20+
animate(
21+
'{{duration}}ms {{delay}}ms',
22+
keyframes([
23+
style({ visibility: AUTO_STYLE, transform: 'translate3d(0, 0, 0)', easing: 'ease', offset: 0 }),
24+
style({ transform: 'translate3d(0, 0, 0)', easing: 'ease', offset: 0.111 }),
25+
style({ transform: 'skewX(-12.5deg) skewY(-12.5deg)', easing: 'ease', offset: 0.222 }),
26+
style({ transform: 'skewX(6.25deg) skewY(6.25deg)', easing: 'ease', offset: 0.333 }),
27+
style({ transform: 'skewX(-3.125deg) skewY(-3.125deg)', easing: 'ease', offset: 0.444 }),
28+
style({ transform: 'skewX(1.5625deg) skewY(1.5625deg)', easing: 'ease', offset: 0.555 }),
29+
style({ transform: 'skewX(-0.78125deg) skewY(-0.78125deg)', easing: 'ease', offset: 0.666 }),
30+
style({ transform: 'skewX(0.390625deg) skewY(0.390625deg)', easing: 'ease', offset: 0.777 }),
31+
style({ transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)', easing: 'ease', offset: 0.888 }),
32+
style({ transform: 'skewX(0deg) skewY(0deg)', easing: 'ease', offset: 1 })
33+
])
34+
)
35+
]);
3536

3637
const DEFAULT_DURATION = 1000;
3738

@@ -43,7 +44,7 @@ export function jelloAnimation(options?: IAttentionSeekerAnimationOptions): Anim
4344
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4445
group([
4546
style({ 'transform-origin': 'center' }),
46-
useAnimation(jello),
47+
useAnimation(jello()),
4748
...(!options || !options.animateChildren || options.animateChildren === 'together'
4849
? [query('@*', animateChild(), { optional: true })]
4950
: [])
@@ -69,7 +70,7 @@ export function jelloOnEnterAnimation(options?: IAnimationOptions): AnimationTri
6970
style({ visibility: 'hidden' }),
7071
group([
7172
style({ 'transform-origin': 'center' }),
72-
useAnimation(jello),
73+
useAnimation(jello()),
7374
...(!options || !options.animateChildren || options.animateChildren === 'together'
7475
? [query('@*', animateChild(), { optional: true })]
7576
: [])

‎lib/attention-seekers/pulse.animation.ts

+13-12
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,17 @@ export interface IPulseAnimationOptions extends IAttentionSeekerAnimationOptions
2424
scale?: number;
2525
}
2626

27-
const pulse = animation([
28-
animate(
29-
'{{duration}}ms {{delay}}ms',
30-
keyframes([
31-
style({ visibility: AUTO_STYLE, transform: 'scale3d(1, 1, 1)', easing: 'ease', offset: 0 }),
32-
style({ transform: 'scale3d({{scale}}, {{scale}}, {{scale}})', easing: 'ease', offset: 0.5 }),
33-
style({ transform: 'scale3d(1, 1, 1)', easing: 'ease', offset: 1 })
34-
])
35-
)
36-
]);
27+
const pulse = () =>
28+
animation([
29+
animate(
30+
'{{duration}}ms {{delay}}ms',
31+
keyframes([
32+
style({ visibility: AUTO_STYLE, transform: 'scale3d(1, 1, 1)', easing: 'ease', offset: 0 }),
33+
style({ transform: 'scale3d({{scale}}, {{scale}}, {{scale}})', easing: 'ease', offset: 0.5 }),
34+
style({ transform: 'scale3d(1, 1, 1)', easing: 'ease', offset: 1 })
35+
])
36+
)
37+
]);
3738

3839
const DEFAULT_DURATION = 1000;
3940

@@ -44,7 +45,7 @@ export function pulseAnimation(options?: IPulseAnimationOptions): AnimationTrigg
4445
[
4546
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4647
group([
47-
useAnimation(pulse),
48+
useAnimation(pulse()),
4849
...(!options || !options.animateChildren || options.animateChildren === 'together'
4950
? [query('@*', animateChild(), { optional: true })]
5051
: [])
@@ -70,7 +71,7 @@ export function pulseOnEnterAnimation(options?: IPulseAnimationOptions): Animati
7071
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
7172
style({ visibility: 'hidden' }),
7273
group([
73-
useAnimation(pulse),
74+
useAnimation(pulse()),
7475
...(!options || !options.animateChildren || options.animateChildren === 'together'
7576
? [query('@*', animateChild(), { optional: true })]
7677
: [])

‎lib/attention-seekers/rubber-band.animation.ts

+17-16
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,21 @@ import {
1515

1616
import { IAnimationOptions, IAttentionSeekerAnimationOptions } from '../common/interfaces';
1717

18-
const rubberBand = animation([
19-
animate(
20-
'{{duration}}ms {{delay}}ms',
21-
keyframes([
22-
style({ visibility: AUTO_STYLE, transform: 'scale3d(1, 1, 1)', easing: 'ease', offset: 0 }),
23-
style({ transform: 'scale3d(1.25, 0.75, 1)', easing: 'ease', offset: 0.3 }),
24-
style({ transform: 'scale3d(0.75, 1.25, 1)', easing: 'ease', offset: 0.4 }),
25-
style({ transform: 'scale3d(1.15, 0.85, 1)', easing: 'ease', offset: 0.5 }),
26-
style({ transform: 'scale3d(0.95, 1.05, 1)', easing: 'ease', offset: 0.65 }),
27-
style({ transform: 'scale3d(1.05, 0.95, 1)', easing: 'ease', offset: 0.75 }),
28-
style({ transform: 'scale3d(1, 1, 1)', easing: 'ease', offset: 1 })
29-
])
30-
)
31-
]);
18+
const rubberBand = () =>
19+
animation([
20+
animate(
21+
'{{duration}}ms {{delay}}ms',
22+
keyframes([
23+
style({ visibility: AUTO_STYLE, transform: 'scale3d(1, 1, 1)', easing: 'ease', offset: 0 }),
24+
style({ transform: 'scale3d(1.25, 0.75, 1)', easing: 'ease', offset: 0.3 }),
25+
style({ transform: 'scale3d(0.75, 1.25, 1)', easing: 'ease', offset: 0.4 }),
26+
style({ transform: 'scale3d(1.15, 0.85, 1)', easing: 'ease', offset: 0.5 }),
27+
style({ transform: 'scale3d(0.95, 1.05, 1)', easing: 'ease', offset: 0.65 }),
28+
style({ transform: 'scale3d(1.05, 0.95, 1)', easing: 'ease', offset: 0.75 }),
29+
style({ transform: 'scale3d(1, 1, 1)', easing: 'ease', offset: 1 })
30+
])
31+
)
32+
]);
3233

3334
const DEFAULT_DURATION = 1000;
3435

@@ -39,7 +40,7 @@ export function rubberBandAnimation(options?: IAttentionSeekerAnimationOptions):
3940
[
4041
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
4142
group([
42-
useAnimation(rubberBand),
43+
useAnimation(rubberBand()),
4344
...(!options || !options.animateChildren || options.animateChildren === 'together'
4445
? [query('@*', animateChild(), { optional: true })]
4546
: [])
@@ -64,7 +65,7 @@ export function rubberBandOnEnterAnimation(options?: IAnimationOptions): Animati
6465
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
6566
style({ visibility: 'hidden' }),
6667
group([
67-
useAnimation(rubberBand),
68+
useAnimation(rubberBand()),
6869
...(!options || !options.animateChildren || options.animateChildren === 'together'
6970
? [query('@*', animateChild(), { optional: true })]
7071
: [])

0 commit comments

Comments
 (0)