Animieren von SVG mit Angular 4, Übergang und Abfrage

Ich möchte eine Svg innerhalb einer Komponente in Angular animieren, aber ich finde es schwierig, Schritte in der Animation anzugeben.Animieren von SVG mit Angular 4, Übergang und Abfrage

Ich möchte die folgenden Schritte animieren:

1) Kreis beginnt außerhalb des Bildschirms mit einer Undurchsichtigkeit 0

2) Kreis bewegt sich auf dem Bildschirm von oben und wird undurchsichtiger, wie es geht, auf Opazität endet 1

3) Kreis bewegt sich nach rechts, endend offscreen

kann ich nicht einmal bekommen es außerhalb des Bildschirms zu starten, aber ich scheine auch keine Kontrolle darüber, wann die Animation Auslöser zu haben. Ich möchte, dass es 1s nach dem Laden der Seite auslöst.

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() { 
    } 

}

Meine dev Umgebung ist ein Standard-Winkel-cli bauen mit den folgenden Ergänzungen zu app.module.ts:

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

und innerhalb von @NgModule in app.module.ts:

BrowserModule, 
BrowserAnimationsModule,

Quelle

2017-08-03 Davtho1983

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

ich versucht, und ich versuchte, das zu verändern Plunk, um meine Svg - es scheint nicht zu arbeiten – Davtho1983

Nehmen Sie nicht gegabelte die Plunk, so können Sie es verknüpfen ... – JGFMK

Der Plocker, mit dem Sie verbunden sind, blockieren die anderen Animationsregeln. Sieht so aus, als hättest du etwas Markup (?) Entfernt und versuchst so, nicht-optionale Animationen auszuführen, die fehlschlagen. Löschte diese und fügte dann Folgendes hinzu:

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

Welcher Kreis bewegte sich von der Seite. Never done angled4 Animationen, also ist das wahrscheinlich nicht optimal!

Plunker: https://plnkr.co/edit/pdFK4CQ4AJyBhyP7IoGq?p=preview

EDIT!

, dass 1 Sekunde Verzögerung über die Verwendung von Keyframes setzen Managed:

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 }), 
     ])) 
     ])), 
    ])) 
    ]) 
],

ich auch in einigen frechen Extras am Ende ein wenig Demo hinzugefügt, wie sie funktionieren. Praktisch. Dies führt eine zwei Sekunden dauernde Animation aus, bei der man für 1 Sekunde nichts tut, dann 1/2 Sekunde einrollt, dann nichts, dann ein alberner Boop.

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

Quelle

2017-08-03 21:45:38 bjrhodes

Animieren von SVG mit Angular 4, Übergang und Abfrage

Antwort

Verwandte Themen