使用 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 动画，所以这可能不是最佳的！

Plunker：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