第一步

@H_502_2@cnpm install gsap @types/greensock --save cnpm install @angular/flex-layout --save

第二步

引入

@H_502_2@import { TweenMax,Cubic } from 'gsap';

app.module.ts

@H_502_2@import { FlexLayoutModule } from '@angular/flex-layout'; // other imports @NgModule({ imports: [FlexLayoutModule],... })

demo

cardss.component.html

@H_502_2@<svg style="width:150px; height:300px" viewBox="0 0 250 250"> <polygon class="left" #left points="125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 203.9,186.3 218.1,63.2" /> <polygon class="right" #right points="125,52.2 125,52.1 125,153.4 125,63.2 125,30" /> <path class="a" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1 L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/> </svg>

cardss.component.scss

@H_502_2@svg{ display:block; max-width:300px; margin:0 auto; } .left,.shield{ fill:#DD0031; } .right{ fill:#C3002F; } .a{ fill:#FFFFFF; }

cardss.component.ts

@H_502_2@import { Component,OnInit,ViewChild,ElementRef } from '@angular/core'; import { TweenMax,Cubic } from 'gsap'; @Component({ selector : 'fuse-cards-docss',templateUrl: './cardss.component.html',styleUrls : ['./cardss.component.scss'] }) export class FuseCardssDocsComponent implements OnInit { constructor() { } @ViewChild('left') left: ElementRef; @ViewChild('right') right: ElementRef; ngOnInit() { TweenMax.to(this.left.nativeElement,1,{ attr: { points: '125,63.2' },repeat: -1,yoyo: true,ease: Cubic.easeInOut }); TweenMax.to(this.right.nativeElement,230 218.1,30' },ease: Cubic.easeInOut }); } } 原文链接：https://www.f2er.com/angularjs/145077.html