如何在 Angular6 中创建摇动动画？

Question

我们如何使用Angular 6 个动画创建摇动动画？动画应该看起来像 Animate.css

中的 'shake' 动画

Answer 1

这有点棘手，如果您想将动画应用于 Angular 6 中一个组件内的多个元素：

app.component.html:

<p [@shakeit]="this.states['state1']" (click)="shakeMe('state1')" (@shakeit.done)="shakeEnd('state1', $event)">Click me</p>

<p [@shakeit]="this.states['state2']" (click)="shakeMe('state2')" (@shakeit.done)="shakeEnd('state2', $event)">Click me</p>

app.component.ts:

import { Component } from '@angular/core';
import { trigger,state,style,transition,animate,keyframes } from    '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('shakeit', [
        state('shakestart', style({
            transform: 'scale(1)',
        })),
        state('shakeend', style({
            transform: 'scale(1)',
        })),
        transition('shakestart => shakeend', animate('1000ms ease-in',     keyframes([
          style({transform: 'translate3d(-1px, 0, 0)', offset: 0.1}),
          style({transform: 'translate3d(2px, 0, 0)', offset: 0.2}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.3}),
          style({transform: 'translate3d(4px, 0, 0)', offset: 0.4}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.5}),
          style({transform: 'translate3d(4px, 0, 0)', offset: 0.6}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.7}),
          style({transform: 'translate3d(2px, 0, 0)', offset: 0.8}),
          style({transform: 'translate3d(-1px, 0, 0)', offset: 0.9}),
        ]))),
  ])]
})
export class AppComponent  {
  states = {};

  constructor() {
    this.states['state1'] = 'shakestart';
    this.states['state2'] = 'shakestart';
  }

  shakeMe(stateVar: string) {
        this.states[stateVar] = (this.states[stateVar] === 'shakestart' ? 'shakeend' : 'shakestart');
  }

  shakeEnd(stateVar: string, event) {
    this.states[stateVar] = 'shakeend';
  }
}

你看，我使用字典来表示不同 html 元素的动画状态。因此，如果要使用 Angular 6，工作量和开销会稍大一些。 shakeMe 方法启动动画。

但是，我建议只使用 CSS 关键帧，因为它更容易实现多个 html 元素。以下示例执行相同的动画。您只需将正确的 css class 应用于 html 元素。

.shakeit:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

<h2 class="shakeit">Hover me</h2>

Answer 2

这是一个使用 ngx-animate 的简单解决方案。

模板

<p [@shake]="showAnimation">Hello World</p>

打字稿

import { trigger, transition, useAnimation } from '@angular/animations';
import { shake } from 'ngx-animate'; // npm i ngx-animate

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    animations: [
        trigger('shake', [transition('* => *', useAnimation(shake))])
    ],
})
export class AppComponent {
    showAnimation: boolean = false;

    constructor() {
        this.showAnimation = !this.showAnimation;
    }
}

如何在 Angular6 中创建摇动动画？

How to create shake animation in Angular 6?

angular

angular-animations