离子型GSAP DrawSVGPlugin

在Ionic中使用DrawSVG时(我已经在几个项目上复制并测试了此方法):

1. 将要使用的GSAP文件放在下面 src/assets/javascripts ,并调用脚本文件,就像在 index.html :

   <script src="assets/javascripts/gsap/TweenLite.min.js"></script>
   <script src="assets/javascripts/gsap/plugins/DrawSVGPlugin.min.js"></script>
   

2. 添加您将要使用的GSAP变量

   /*
     Normal imports here..
   */
   import { LoginPage } from "../login/login";
   
   declare var TimelineLite: any;        
   declare var TweenLite: any;
   declare var Power1: any;
   
   @Component({
     selector: 'page-profile',
     templateUrl: 'profile.html',
     providers: [Data, Api, DatePipe]
   })
   
   export class ProfilePage {
   ...
   

3. 像平常一样使用。正如您已经知道的,SVG必须是内联的。

   TweenLite.to("#svg_1", 1, {drawSVG:"40% 60%", ease:Power1.easeInOut});