Javascript DrawSVG按钮：如何实现下载

我使用DrawSVG、CustomEasy和TweenMax为我的域提供了一个华丽的下载按钮。然而，我似乎不知道如何触发下载

单击该按钮可打开动画。最终，打开的文本出现在动画的末尾，等待用户单击。我怎样才能最好地实现开放式下载onclick？我已经尝试了许多on.click事件和其他实现，但无法使其正常工作。我永远感谢你的帮助

设tl，downloading=false，points=[]， btn=document.querySelector'.btn'， 点=document.querySelector'.dot'， text=document.querySelector'.text'， mainCirc=document.querySelector'.maincirle'， subCirc=document.querySelector'.subCircle'， mainCircleFill=document.querySelector'.mainCircleFill'， arrow=document.querySelector'.arrow'， rect=document.querySelector'.rect'； TweenLite.setrect，{transformOrigin:'50%50%'，旋转：45}； btn.addEventListener“点击”，动画； 函数动画{ 如果下载返回； 下载=！下载； 让downloadTime=Math.random*.5+.7； tl=新的TimeLineite{onComplete:restart}； tl.restart.play .toarrow.35，{y:2.5，ease:CustomEase.创建“自定义”，“M0,0，C0.042,0.14,0.374,1,0.5,1,0.64,1,0.964,0.11,1,0'}，'单击' .totext.3，{svgOrigin:'55%35%'，比例：.77，易用性：CustomEase.create'custom'，'M0,0,0.042,0.14,0.374,1,0.5,1,0.64,1,0.964,0.11,1,0'}，单击+=.05' .setsubCirc，{fillOpacity:1，strokeOpacity:1}，'squence-=.3' .tosubCirc，.35，{fillOpacity:0，ease:Power1.easeInOut}，'squence-=.3' .tosubCirc，.45，{attr:{r:13}，strokeOpacity:0，类名：'+=strokeW'，ease:Power0.easeNone}，'squence-=.3' tobtn，.7，{attr:{d:'M50,25h0a10,100a10,100a10,1001-10,10s0,00a10,100a10,1001-10，-10a10,100h0,11010'}，ease:Sine.easeOut，'squence' .to[mainCirc，mainCircFill，rect，arrow]，.7，{x:30，ease:Sine.easeOut}，'挤压' .torect.7，{fill:'303030'，旋转：270，ease:Sine.easeOut}，'挤压' .totext.3，{autoAlpha:0，y:7，onComplete:changeText}，“挤压” .toarrow，.7，{attr:{d:{M20,39l3.5，-3.5l-3.5，-3.5m20,39l-3.5，-3.5l3.5，-3.5m20,39l0,0'}，transformOrigin:'50%50'，旋转：225，易度：正弦。易度}，'Squence' .todot.4，{attr:{r:1.5}，ease:Back.easeOut.config7} .setsubCirc，{drawSVG:0，strokeOpacity:1，transformOrigin:'50%50%'，x:30，旋转：-90，属性：{r:9.07} .tosubCirc，downloadTime，{drawSVG:'102%'，ease:Power2.easeIn}，'fill+=.02' .todot，downloadTime，{bezier:{type:'cubic'，value:points}，attr:{r:2.7}，ease:Power2.easeIn}，'fill' .to'.gradient'，下载时间，{attr:{offset:'0%}，ease:Power2.easeIn}，'fill' .todot，.44，{fill:'f78c3a'，y:-22，ease:Power1.easeOut}，'stretch-=.01' .todot.27，{transformOrigin:'50%50%'，scaleX:.5，ease:SlowMo.ease.config0.1,2，true}，'stretch+=0.04' .todot.3，{scaleY.6，ease:SlowMo.ease.config0.1,2，true}，'stretch+=0.31' .todot，.44，{scaleX:.4，y:22，ease:Power2.easeIn}，'stretch+=.45' .to[mainCirc，subCirc，arrow，rect，mainCircFill]，.33，{opacity:0，ease:Power2.easeOut}，'stretch+=.2' .tobtn，.4，{attr:{d:'M50,25H20A10,100100,110A10,1000,1-10,10S-20,0-40,0A10,1001-10，-10A10,10010,11010，-10H20'}，ease:Power1.easeOut}，'stretch+=0.2' .setdot，{opacity:0}，'stretch+=0.875' .tobtn.01，{stroke:'f78c3a'，ease:Power2.easeIn}，'stretch+=.87' .tobtn，.3，{attr:{d:'M50,25 h20 a10,10,10,10 a12,12 0,1-10,10.5 s-20,6-40,0 a12,12 0,1-10，-10.5 a10,10 0,10-10 h20'}， ease:CustomEase.创建“custom”，“M0,0 C0.046,0.062 0.018,1 0.286,1 0.532,1 0.489，-0.206 0.734，-0.206 0.784，-0.206 0.832，-0.174 1,0'}，“stretch+=0.869” .totext.45，{autoAlpha:1，y:0，ease:Back.easeOut.config2.5}，'stretch+=.855'； }; 功能重启{ 设置超时=>{ tl.seek0.pause； text.textContent='mindeaffect Technology'； TweenLite.settext，{x:0}； 下载=假； }, 2000; }; 函数changeText{ text.textContent='OPEN'； TweenLite.settext，{x:-5}； }; 作用{ 设data=Snap.path.toCubic'M0,0 a9,9 0,1 0,18 a9,9 0,1 0，-18'， dataLen=data.length； 对于设i=0；i

function changeText() {
  text.textContent = 'OPEN';
  btn.removeEventListener('click', animation);
  btn.addEventListener('click', function() { alert('hey!'); });
  TweenLite.set(text, {x: -5});
};

---

但是，然后问问你自己：你真的想让用户再次点击吗？

目前，按钮的“onComplete”回调设置为“restart”

tl=新的TimeLineite{onComplete:restart}

您可以传递一个添加单击处理程序的函数，而不是重新启动动画

tl=新的时间线岩{onComplete:allowOpen}

并定义添加单击处理程序的函数：

function allowOpen(){
  btn.removeEventListener('click',animation');
  btn.addEventListener('click',open);
}

function open () {
  alert('opened!');
}

---

我修改了您的示例，使其能够在同一页面中使用多个按钮

首先，我们需要如下设置SVG文档：

<svg viewBox='0 0 100 50' width='620' height='310' fill='none' class="svg-button" download-url="https://static.pexels.com/photos/784927/pexels-photo-784927.jpeg">
    ...
</svg>

接下来，我们将创建一个单击事件侦听器，用于在时间线结束时打开URL，使用如下所示的onComplete回调：

tl = new TimelineLite({ 
  onComplete: function(){
    target.addEventListener("click", function(){
      Object.assign(document.createElement('a'), { 
        target: '_blank', 
        href: target.getAttribute("download-url") }).click();
    })
  }
});

我们设置指针事件：无；对于.svg按钮中的所有元素，如下所示，以便事件不会传播到内部元素：

.svg-button {
  margin-bottom: 80px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;  
  * {
    pointer-events: none; 
  } 
}

---

谢谢，这确实有效。现在，当我点击按钮时，我可以下载Javascript中给出的文件。你也知道我怎样做才能让不同的按钮下载不同的文件吗？

.svg-button {
  margin-bottom: 80px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;  
  * {
    pointer-events: none; 
  } 
}