如何在 Angular 2 中执行无限动画？

Posted 2023-03-06

【中文标题】如何在 Angular 2 中执行无限动画？

【英文标题】：How do I perform infinite animations in Angular 2?

【发布时间】：2017-11-16 00:50:59

【问题描述】：

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

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

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？

这是我迄今为止尝试过的，但只能工作一次：

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 并按照上面的示例进行操作？或者我误解了这个插件的用途？

提前致谢。

【问题讨论】：

这有帮助吗？ ***.com/questions/42963315/…

【参考方案1】：

您可以尝试 WebComponents 以声明方式使用 Web Animations API（使用组件为任何 html 元素设置动画）：

<!-- Add Web Animations Polyfill :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script>

<script type="module" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.js"></script>

<animatable-component
  autoplay
  easing="ease-in-out"
  duration="800"
  delay="300"
  animation="zoomIn"
  iterations="Infinity"
  direction="alternate"
  style="display: flex;align-self: center;"
>
  <h1>Hello World</h1>
</animatable-component>

有很多已定义的动画，但您也可以使用关键帧创建自定义动画。

选中此处以将其与 Angular、React、VueJS 等一起使用：https://github.com/proyecto26/animatable-component#framework-integrations

【参考方案2】：

可以在 Angular 中实现无限动画，但在这方面并不多，但这对我来说效果很好 onenter 和 onleave 动画。

当“mouseenter”动画循环播放时，它会在“mouseleave”处停止。

我正在使用 Angular 6。

Angular CLI：6.0.8 节点：8.9.3 操作系统：linux x64 角度：6.1.4 ... 动画、常见、编译器、编译器-cli、核心、表单 ... http、语言服务、平台浏览器 ...平台-浏览器-动态，路由器

rxjs 6.2.2 打字稿 2.7.2 webpack 4.8.3

---

import 
  trigger,
  state,
  style,
  animate,
  transition
 from '@angular/animations';

@Component(
  selector: 'hot-spot',
  templateUrl: './myComp.component.html',
  styleUrls: ['./myComp.component.css'],
  animations: [
    trigger('compState', [
      state('small', style(
        opacity: '0.5',
        transform: 'scale(0.8)'
      )),
      state('large', style(
        opacity: '1',
        transform: 'scale(1.2)'
      )),
      transition('small => large', animate('0.6s 100ms ease-in')),
      transition('large => small', animate('0.7s 100ms ease-out'))
    ]),
  ]
)
export class MyComponent 

  state: string = 'none';
  isEnter: boolean = false;


  onMouseEnter(evt: MouseEvent) 
    console.log('onMouseEnter()');
    this.state = 'small';
    this.isEnter = true;
  

  onMouseLeave(evt: MouseEvent) 
    console.log('onMouseLeave()');
    this.state = 'large';
    this.isEnter = false;
  

  onEnd(event) 
    if (this.isEnter) 
      if (event.toState === 'small') 
        this.state = 'large';
      
      else 
        this.state = 'small';
      
    
  

还有 HTML

<div
  (mouseenter)="onMouseEnter($event)"
  (mouseleave)="onMouseLeave($event)">

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

      <button
        (click)="onSceneClick($event,data.sceneId)"
        type="button"
        class="btn btn-link" >
        <i class="fa fa-angle-double-up" style="font-size:16pt;color:red">
          <br><span style="font-size:12pt">data.text</span>
        </i>

      </button>
    </div>
  </div>

【参考方案3】：

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

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 函数更新您的'out' 属性值setTimeout 并在结束回调函数之后，将您的state 属性值更新为'in' 并检查你的state 属性值，如果in 然后通过setTimeout 像这样的函数更新为out

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);
    
  

编码愉快:)

【讨论】：

嘿，Eliyas，你为什么要做这些超时等？我用这个东西做了无限动画： onEnd(event) if (this.currentState==="up") this.currentState="down" else this.currentState="up"

我的意思是根据实际状态onEnd需要反向更改变量，就是这样