Ionic 中的 GSAP DrawSVGPlugin

Question

我想在 Ionic3 中实现这个插件。据我所知，npm 包没有来自俱乐部的插件，也没有@types/gsap。我将 DrawSVGPlugin.js 添加到 node_modules/gsap 中，然后重新创建了一个 android 平台。在作为导入的 .ts 文件中，我尝试了：

import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

作为调用插件：

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

我的 html svg 来源：

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" preserveAspectRatio="none">
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="45.78805" x2="87.36405" y1="45.24458" x1="8.28813" stroke-width="12.5" stroke="#000" fill="none"/>
</svg>

谁能告诉我我做错了什么？或者有不同的方法吗？

Answer 1

在 Ionic 中使用 DrawSVG 时（我已经在多个项目中复制并测试了此方法）：

将您要使用的 GSAP 文件放在 src/assets/javascripts 下，然后像在 index.html 中的 HTML 中调用脚本文件：

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

添加您将使用的 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 {
...

正常使用。如您所知，SVG 必须内联。

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

Ionic 中的 GSAP DrawSVGPlugin

GSAP DrawSVGPlugin in Ionic

svg

typescript

ionic-framework

gsap