Animation de SVG avec Angular 4, transition et requête

Je voudrais animer un svg à l'intérieur d'un composant dans Angular, mais j'ai du mal à spécifier des étapes dans l'animation.Animation de SVG avec Angular 4, transition et requête

Je veux animer les étapes suivantes:

1) cercle commence offscreen avec opacité 0

2) cercle se déplace sur l'écran du haut et devient plus opaque comme il va, se terminant l'opacité 1

3) cercle se déplace vers la droite, se terminant offscreen

je ne peux même pas commencer à offscreen, mais il me semble aussi avoir aucun contrôle sur les éléments déclencheurs d'animation. Je voudrais qu'il déclenche 1s après le chargement de la page.

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

}

Mon environnement de dev est un cli angulaire Construction standard avec les ajouts suivants à app.module.ts:

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

et dans @NgModule dans app.module.ts:

BrowserModule, 
BrowserAnimationsModule,

Source

2017-08-03 Davtho1983

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

J'ai essayé et j'ai essayé de modifier la Plunk pour inclure mon svg - cela ne semble pas fonctionner – Davtho1983

Ne supposez pas que vous avez fourchu le plunk afin que vous puissiez le lier ... – JGFMK

Le plunker auquel vous êtes lié, les autres règles d'animation bloquent. On dirait que vous avez supprimé un balisage (?) Et donc il essaie d'exécuter des animations non-facultatives qui échouent. Supprimé ceux-ci et ajouté ceci:

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

Qui a fait entrer le cercle par le côté. Jamais fait des animations angulaires4 alors ce n'est probablement pas optimal!

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

EDIT!

a réussi à mettre ce délai de 1 sec sur l'utilisation des images clés:

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

J'ai aussi ajouté dans certains extras effrontés à la fin de la démonstration d'un peu comment ils fonctionnent. Pratique. Cela fait une animation de deux secondes, ce qui implique de ne rien faire pendant 1 sec, puis de rouler pendant 1/2 seconde, puis rien, puis une bête idiote.

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

Source

2017-08-03 21:45:38 bjrhodes

Animation de SVG avec Angular 4, transition et requête

Répondre

Questions connexes