如何在Angular 2中执行无限动画? [英] How do I perform infinite animations in Angular 2?

问题描述

基本上，我想利用angular(目前为4)中的web-animations-api polyfill对元素执行无限动画.

Basically, I want to make use of the web-animations-api polyfill in angular (4 currently) to perform infinite animations on elements.

让我们看一个基本的非角度示例:

Let's see a basic non-angular example:

var ball = document.getElementById('ball');

ball.animate([
  { transform: 'scale(0.5)' },
  { transform: 'scale(1)' }
], {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate',
  easing: 'ease-in-out'
});

.container {
  position: relative;
  width: 100%;
  height: 200px;
}

.ball {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #E57373;
  background: #F06292;
  box-shadow: 0px 0px 15px #F06292;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
<div class="container">
  <div class="ball" id="ball"><div>
</div>

如何将其转换为Angular?

How do I translate that into Angular?

这是我到目前为止尝试过的方法，但只能使用一次:

This is what I've tried so far but only works once:

animations: [
  trigger('scale', [
    transition('* <=> *', animate('1s ease-in-out', keyframes([
      style({ transform: 'scale(0.5)' }),
      style({ transform: 'scale(1)' })
    ]))) // How do I specify the iterations, or the direction? 
  ])
]

有没有一种方法可以使用@ angular/animation插件来代替存储ElementRef并按照上面的示例进行操作?还是我误解了此插件的用途?

Is there a way to do that with the @angular/animation plugin instead of storing a ElementRef and doing it as the example above? or maybe I misunderstood what this plugin is intended for?

谢谢.

推荐答案

我正在为我的项目搜索无限动画. angular.io中没有与此有关的文档.所以我尝试了这种方式，并花了我很多时间来实现这一目标.希望它能帮助别人. 首先在class中定义animation.

I was searching infinite animation for my project. There is no documentation for this in angular.io. So i tried this way and cost me many hours to achieve this. Hope it will help others. First define animation in your class.

animations: [
trigger('move', [
  state('in', style({transform: 'translateX(0)'})),
  state('out', style({transform: 'translateX(100%)'})),
  transition('in => out', animate('5s linear')),
  transition('out => in', animate('5s linear'))
]),
]

然后将其插入您的html

<div [@move]="state" (@move.done)="onEnd($event)"></div>

然后设置state = 'in'并在ngAfterViewInit()生命周期挂钩中，使用setTimeout函数更新您的state属性值'out'，并在结束回调函数之后，将您的state属性值更新为'in'并检查您的state属性值，如果in，则通过setTimeout这样的函数更新为out

then set state = 'in' and in ngAfterViewInit() lifecycle hook, update your state property value 'out' with setTimeout function and after end callback function, update your state property value into 'in' and check your state property value, if in then update into out by setTimeout function like this

export class AppComponent implements AfterViewInit {
  state = 'in';
  ngAfterViewInit() {
    setTimeout(() => {
      this.state = 'out';
    }, 0);
  }
  onEnd(event) {
    this.state = 'in';
    if (event.toState === 'in') {
      setTimeout(() => {
        this.state = 'out';
      }, 0);
    }
  }
}

快乐编码:)

这篇关于如何在Angular 2中执行无限动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！