Angular floating animation example / 앵귤러 구름 둥둥 애니메이션 앵귤러 애니메이션 파라미터 / angular animation parameter param

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 타입을 활용하겠습니다.

 

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

4. 템플릿에 적용한 모습

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

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