如何在 Angular 6 中创建抖动动画？答案

【问题标题】：How to create shake animation in Angular 6?如何在 Angular 6 中创建抖动动画？
【发布时间】：2020-09-12 02:45:54
【问题描述】：

我们如何使用 Angular 6 动画制作摇晃动画？动画应该看起来像Animate.css中的“摇晃”动画

【问题讨论】：

【解决方案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 类应用于 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);
    }
}

&lt;h2 class="shakeit"&gt;Hover me&lt;/h2&gt;

【讨论】：

将代码放入snippet 会显着改善此答案。使用 sn-p 也使它更有可能被投票，因为人们可以快速验证您的代码是否正确运行。虽然不应该总是使用 sn-ps，但对于基于 JavaScript/HTML/CSS 的问题和答案，它们可以显着改善问题和解决方案的交流。如果可以使用，sn-p 比在场外的可运行代码示例（例如 JSFiddle）更好。
感谢您的提示。我不知道有 html/css/javascript 可运行的内置代码 sn-ps。我改变了答案。谢谢！

【解决方案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;
    }
}

【讨论】：