Question

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

import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

和调用插件：

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

我的hv 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时（我已在多个项目中复制并测试了此方法）：

放置您将在src/assets/javascripts下使用的GSAP文件，并像在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

1 个答案: