angular里面使用TweenMax与flex-layout

第一步

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

第二步

引入

import { TweenMax,Cubic } from 'gsap';

app.module.ts

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

demo

cardss.component.html

<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

svg{ display:block; max-width:300px; margin:0 auto; }

.left,.shield{ fill:#DD0031; }

.right{ fill:#C3002F; }

.a{ fill:#FFFFFF; }

cardss.component.ts

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
    });
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!