使用Angular 4動畫SVG，轉換和查詢

我想在Angular中的組件中爲動畫製作一個svg，但我發現很難指定動畫中的步驟。使用Angular 4動畫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() { 
    } 

}

我開發環境是一個標準的角-CLI並有以下補充建立到app.module.ts：

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

並在app.module.ts中的@NgModule中：

BrowserModule, 
BrowserAnimationsModule,

來源

2017-08-03 Davtho1983

https://blog.thoughtram.io/angular/2017/07/26/a-web-animations-deep-dive-with-angular.html – JGFMK

我試過了，我試圖改變大量包括我的svg - 它似乎沒有工作 – Davtho1983

不要假設你分叉，所以你可以鏈接它... – JGFMK

您鏈接到的鏈接器，其他動畫規則被阻止。看起來你剝去了一些標記（？），所以它試圖運行失敗的非可選動畫。刪除那些，然後添加這個：

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

來源

2017-08-03 21:45:38 bjrhodes

使用Angular 4動畫SVG，轉換和查詢

回答

相關問題