انیمیشن اسکرول در انگولار — از صفر تا صد

1<section fxLayout="row" fxLayoutAlign="center center">
2
3  <div fxFlex="50" wmAnimate="landing" speed="slow" aos>
4
5    <h1 class="mat-display-1"><b>Get your app done right</b></h1>
6
7    <p>Wizdm provides wonders to your singple page application</p>
8
9    <button mat-raised-button color="accent" routerLink="/">Get started</button>
10
11    <p class="mat-small">Join us and become part of the revolution of wizdm</p>
12
13  </div>
14
15  <img fxFlex="50" src="assets/blue-buddha.svg" />
16
17</section>

1@Component({
2 selector: '[wmAnimate]',
3 template: '<ng-content></ng-content>',
4 animations: $animations
5})
6export class AnimateComponent implements OnInit, OnDestroy {
7
8  readonly timings = { slower: '3s', slow: '2s', normal: '1s', fast: '500ms', faster: '300ms' };
9  
10  constructor(private elm: ElementRef, private scroll: ScrollDispatcher, private zone: NgZone) {}
11
12  /** Selects the animation to be played */
13  @Input('wmAnimate') animate: wmAnimations;
14
15  /** Speeds up or slows down the animation */
16  @Input() speed: wmAnimateSpeed = 'normal';
17
18  /** When true, triggers the animation on element scrolling in the viewport */
19  @Input('aos') set enableAOS(value: boolean) { this.aos = coerceBooleanProperty(value); }
20  public aos: boolean = false;
21
22  /** Specifies the amout of visibility triggering AOS */
23  @Input() threshold: number = 0.2;
24
25  ngOnInit() { 
26
27    // Triggers the animation based on the input flags
28    this.animateTrigger(this.elm).subscribe( trigger => {
29      // Triggers the animation to play or to idle
30      this.trigger = trigger ? this.play : this.idle;
31    });
32  }
33...
34}

1export const $animations = [
2
3  trigger('animate', [
4
5    state('idle', style({ opacity: 0 }) ),
6
7    transition('* => landing', [
8      style({
9        transform: 'scale(1.2)',
10        opacity: 0
11      }), 
12      animate('{{timing}} ease', style('*'))
13    ], { params: { timing: '2s'}}),
14
15    transition('* => pulse', [
16      style('*'),
17      animate('{{timing}} ease-in-out', 
18        keyframes([
19          style({ transform: 'scale(1)' }),
20          style({ transform: 'scale(1.05)' }),
21          style({ transform: 'scale(1)' })
22        ])
23      )], { params: { timing: '1s'}}
24    ),
25
26    transition('* => beat', [
27      style('*'),
28      animate('{{timing}} cubic-bezier(.8, -0.6, 0.2, 1.5)', 
29        keyframes([
30          style({ transform: 'scale(0.8)' }),
31          style({ transform: 'scale(1.5)' }),
32          style({ transform: 'scale(1)' })
33        ])
34      )], { params: { timing: '500ms'}}
35    ),
36
37    transition('* => heartBeat', [
38      style('*'),
39      animate('{{timing}} ease-in-out', 
40        keyframes([
41          style({ transform: 'scale(1)', offset: 0 }),
42          style({ transform: 'scale(1.3)', offset: 0.14 }),
43          style({ transform: 'scale(1)', offset: 0.28 }),
44          style({ transform: 'scale(1.3)', offset: 0.42 }),
45          style({ transform: 'scale(1)', offset: 0.70 })
46        ])
47      )], { params: { timing: '1s'}}
48    ),
49
50    transition('* => fadeIn', [
51      style({ opacity: 0 }),
52      animate('{{timing}} ease-in', style('*'))
53    ], { params: { timing: '1s'}}),
54
55    transition('* => fadeInRight', [
56      style({ opacity: 0, transform: 'translateX(-20px)' }),
57      animate('{{timing}} ease-in', style('*'))
58    ], { params: { timing: '1s'}}),
59
60    transition('* => fadeInLeft', [
61      style({ opacity: 0, transform: 'translateX(20px)' }),
62      animate('{{timing}} ease-in', style('*'))
63    ], { params: { timing: '1s'}}),
64
65    transition('* => fadeInUp', [
66      style({ opacity: 0, transform: 'translateY(20px)' }),
67      animate('{{timing}} ease-in', style('*'))
68    ], { params: { timing: '1s'}}),
69
70    transition('* => fadeInDown', [
71      style({ opacity: 0, transform: 'translateY(-20px)' }),
72      animate('{{timing}} ease-in', style('*'))
73    ], { params: { timing: '1s'}}),
74
75    transition('* => zoomIn', 
76      animate('{{timing}} ease-in', 
77        keyframes([
78          style({ opacity: 0, transform: 'scale(0.3)' }),
79          style({ opacity: 1, transform: 'scale(0.65)' }),
80          style({ opacity: 1, transform: 'scale(1)' })
81        ])
82      ), { params: { timing: '1s'}}
83    ),
84    
85    transition('* => bumpIn', [
86      style({ transform: 'scale(0.5)', opacity: 0 }),
87      animate("{{timing}} cubic-bezier(.8, -0.6, 0.2, 1.5)", 
88        style({ transform: 'scale(1)', opacity: 1 }))
89    ], { params: { timing: '500ms'}}),
90
91    transition('fadeOut => void', [
92      animate('{{timing}} ease-in', style({ opacity: 0 }))
93    ]),
94
95    transition('fadeOutRight => void', [
96      animate('{{timing}} ease-in', style({ opacity: 0, transform: 'translateX(20px)' }))
97    ], { params: { timing: '1s'}}),
98
99    transition('fadeOutLeft => void', [
100      animate('{{timing}} ease-in', style({ opacity: 0, transform: 'translateX(-20px)' }))
101    ], { params: { timing: '1s'}}),
102
103    transition('fadeOutDown => void', [
104      animate('{{timing}} ease-in', style({ opacity: 0, transform: 'translateY(20px)' }))
105    ], { params: { timing: '1s'}}),
106
107    transition('fadeOutUp => void', [
108      animate('{{timing}} ease-in', style({ opacity: 0, transform: 'translateY(-20px)' }))
109    ], { params: { timing: '1s'}}),
110
111    transition('zoomOut => void', 
112      animate('{{timing}} ease-in', 
113        keyframes([
114          style({ opacity: 1, transform: 'scale(1)' }),
115          style({ opacity: 0, transform: 'scale(0.3)' }),
116          style({ opacity: 0, transform: 'scale(0.3)' })
117        ])
118      ), { params: { timing: '1s'}}
119    ),
120  ])
121];

1ngOnInit() { 
2  // Triggers the animation based on the input flags
3  this.animateTrigger(this.elm).subscribe( trigger => {
4    // Triggers the animation to play or to idle
5    this.trigger = trigger ? this.play : this.idle;
6  });
7}
8
9// Triggers the animation
10private animateTrigger(elm: ElementRef<HTMLElement>): Observable<boolean> {
11
12  return this.animateReplay().pipe( flatMap( trigger => this.aos ? this.animateOnScroll(elm) : of(trigger)) );
13}
14  
15// Triggers the animation deferred
16private animateReplay(): Observable<boolean> {
17
18  return this.replay$.pipe( takeUntil(this.dispose$), delay(0), startWith(!this.paused) );
19}
20
21// Triggers the animation on scroll
22private animateOnScroll(elm: ElementRef<HTMLElement>): Observable<boolean> {
23...
24}

1// Triggers the animation on scroll
2private animateOnScroll(elm: ElementRef<HTMLElement>): Observable<boolean> {
3
4  // Returns an AOS observable
5  return this.scroll.ancestorScrolled(elm, 100).pipe(
6    // Makes sure to dispose on destroy
7    takeUntil(this.dispose$),
8    // Starts with initial element visibility 
9    startWith(!this.paused  && this.visibility >= this.threshold),
10    // Maps the scrolling to the element visibility value
11    map(() => this.visibility),
12    // Applies an hysteresys, so, to trigger the animation on based on the treshold while off on full invisibility
13    scan<number,boolean>((result, visiblility) => (visiblility >= this.threshold || (result ? visiblility > 0 : false))),
14    // Distincts the resulting triggers 
15    distinctUntilChanged(),
16    // Stop taking the first on trigger when aosOnce is set
17    takeWhile(trigger => !trigger || !this.once, true),
18    // Run NEXT within the angular zone to trigger change detection back on
19    flatMap(trigger => new Observable<boolean>(observer => this.zone.run(() => observer.next(trigger))))
20  );
21}