使用 Angular 4、转换和查询对 SVG 进行动画处理

Question

我想在 Angular 中的组件内制作 svg 动画，但我发现很难在动画中指定步骤。

我想为以下步骤制作动画：

1) 圆从屏幕外开始，不透明度为 0

2) 圆圈从顶部移动到屏幕上并随着移动变得更不透明，以不透明度 1 结束

3) 圆圈向右移动，在屏幕外结束

我什至无法让它在屏幕外启动，但我似乎也无法控制动画何时触发。我希望它在页面加载后触发 1s。

HTML:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

TS:

import { Component, OnInit, HostBinding } from '@angular/core';
import { style, animate, animation, animateChild, useAnimation, group, sequence, transition, state, trigger, query, stagger } from '@angular/animations';


@Component({
  selector: 'app-svg-viewer',
  templateUrl: './svg-viewer.component.html',
  styleUrls: ['./svg-viewer.component.css'],

  animations: [
    trigger('myAwesomeAnimation', [

      transition(':enter', group([

        query('circle', stagger('0ms', [
          animate('200ms 250ms ease-in', style({ opacity: 0, transform: 'translateY(-400%)' }))
        ])),
      ])),



    ])
  ],

})


export class SvgViewerComponent implements OnInit {

  @HostBinding('@myAwesomeAnimation')
  public animateProfile = true;

  constructor() { }

  ngOnInit() {
  }

}

我的开发环境是一个标准的 angular-cli 构建，在 app.module.ts 中添加了以下内容：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

并且在 app.module.ts 中的@NgModule 内：

BrowserModule,
BrowserAnimationsModule,

Answer 1

您链接的plunker，其他动画规则正在阻塞。看起来你删除了一些标记（？）所以它试图运行失败的非可选动画。删除了那些然后添加了这个：

    query('circle', style({transform: 'translateX(-200%)'})),
    query('circle', group([
       animate('300ms cubic-bezier(0.68, 0, 0.68, 0.19)', style({ transform: 'translateX(0)' }))  
    ])),

这让圆圈从侧面移动。虽然从未做过 angular4 动画，所以这可能不是最优的！

笨蛋：https://plnkr.co/edit/pdFK4CQ4AJyBhyP7IoGq?p=preview

编辑！

设法在使用关键帧时延迟 1 秒：

animations: [
  trigger('profileAnimation', [
    transition(':enter', group([
      query('circle', style({transform: 'translateX(-200%)'})),
      query('circle', group([
       animate('2000ms ease-in', keyframes([
          style({ transform: 'translateX(-200%)', offset:  0.5 }),
          style({ transform: 'translateX(0)', offset:  0.75 }),
          style({ transform: 'translateX(0)', offset:  0.95 }),
          style({ transform: 'translateX(50%)', offset:  0.98 }),
          style({ transform: 'translateX(0)', offset:  1 }),
        ]))  
      ])),
    ]))
  ])
],

我还在最后添加了一些厚颜无耻的额外内容来演示一下它们是如何工作的。便利。这个运行是一个两秒的动画，包括 1 秒什么都不做，然后滚动 1/2 秒，然后什么都不做，然后是一个愚蠢的嘘声。

https://plnkr.co/edit/gspBK24mI1oWYmDX6t5E?p=preview

使用 Angular 4、转换和查询对 SVG 进行动画处理

Animating SVG with Angular 4, transition and query

angular

svg

angular-animations