Question

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

我想动画以下步骤：

1）圆圈从不透明度0开始在屏幕外

2）圆圈从顶部移动到屏幕上，随着它变得越来越不透明，以不透明度1结束

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

我甚至无法让它从屏幕外开始，但我似乎无法控制动画何时触发。我想在页面加载后触发1秒。

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

EDIT！

管理将使用关键帧延迟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秒，然后什么也没有，然后是一个愚蠢的boop。

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

使用Angular 4，转换和查询动画SVG

1 个答案: