代码之家 › 专栏 › 技术社区 › Davtho1983

使用Angular 4、transition和query设置SVG动画

angular-animations svg angular

Davtho1983 · 技术社区 · 7 年前

我想为以下步骤设置动画:

3) 圆圈向右移动,结束于屏幕外

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中的@NgModule内。ts:

BrowserModule,
BrowserAnimationsModule,

1 回复 | 直到 7 年前

bjrhodes 7 年前

链接到的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)' }))  
    ])),

普朗克: https://plnkr.co/edit/pdFK4CQ4AJyBhyP7IoGq?p=preview

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