Angular Animation 구름 둥둥 효과

export const bounce = [
  trigger('bounce', [
    state('true', style({ transform: 'translateY(0px)' })),
    state('false', style({ transform: 'translateY(-20px)' })),
    transition('* <=> *', [animate('{{ duration }}ms')], {
      params: { duration: '2000' },
    }),
  ]),
];

1. trasition : <=> 무한 반복을 위해 사용합니다. 어떤 상태값으로 이동하던 발동되도록 설정

2. duration 파라미터를 사용하며 기본 값 2000ms 설정

import { bounce } from '../../animations/scroll-animation/intro.animations';


animations: [bounce]


bounceState = true;

3. 상태를 활용한 반복이므로 boolean 타입을 활용하겠습니다.

    <img
      [@bounce]="{value: bounceState, params: {duration: '1500'} }"
      (@bounce.done)=" bounceState = !bounceState"
      [src]="setCloudImage()"
      class="animation-item"
    />

4. [@bounce] 애니메이션 선언

5. (@bouce.done) 애니메이션 발동 = "조건"