如何使用兩個按鈕開始和停止執行JavaScript腳本？-有解無憂

我正在為 SVG 中的一個元素設定影片，使其圍繞圓形軌道運行。它圍繞軌道運行 3 圈并停止。我正在使用GSAP MotionPath 插件來制作影片。我想用開始和停止按鈕控制運動。停止按鈕可以暫停運動或完全停止運動并使元素回傳其位置 - 以更簡單的方法為準。

我設法通過單擊“開始”按鈕開始影片。但是我無法通過單擊“停止”按鈕來停止它。

我用開始按鈕顯示在影片下方。

function myFunction(){
     gsap.registerPlugin(MotionPathPlugin);
     gsap.to("#comet-horizontal", {
        duration: 5, 
        repeat: 2,
        repeatDelay: 0,
        yoyo: false,
        ease: "none",
        motionPath:{
             path: "#racetrack",
             align: "#racetrack",
             autoRotate: true,
             alignOrigin: [0.5, 0.5]
        }
     });
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  /*background-color: black;*/
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
svg {
  overflow: visible;
  height: 100%;
  background-color: orange;
  /* Fix Safari rendering bug */
  transform: translateZ(0);
}
circle {
  fill: pink;
}
#button{
 width: 60px;
 height: 30px; 
 background-color: orange;
 position: relative;
margin-top: 5px;
margin-bottom:  5px;
}
#button2{
 width: 60px;
 height: 30px; 
 background-color: yellow; 
 position: relative;
margin-top: 5px;
margin-bottom:  5px;
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/MotionPathPlugin.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="snap.svg-min.js"></script>
</head>
<body>
<button id="button" onclick="myFunction()">START</button>
<button id="button2">STOP</button>
<svg
   width="100%"
   height="100%"
   viewBox="0 0 338.66667 190.5">
    <path
       id="racetrack"
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffaaaa;stroke-width:2.32673;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke;stop-color:#000000;stop-opacity:1"
       d="M 184.04496,79.375006 A 51.753304,51.753307 0 0 1 132.29166,131.1283 51.753304,51.753307 0 0 1 80.538365,79.375006 51.753304,51.753307 0 0 1 132.29166,27.621698 a 51.753304,51.753307 0 0 1 51.7533,51.753308 z" />   
    <path
       id="comet-horizontal"
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#00d3ff;fill-opacity:1;fill-rule:evenodd;stroke-width:2.82278;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
       d="m 241.75652,61.794127 v 2.645839 l -13.22916,-0.661459 v -0.66146 -0.66146 z"
       sodipodi:nodetypes="cccccc" />
</svg>
</body>

我瀏覽了 StackOverflow，但找不到答案。例如，如何控制 javascript 函式的執行？與我的問題類似，但提問者希望在第一個功能停止后啟動一個新功能。

我不能使用典型的影片功能，例如animation-play-state因為影片使用的是 GreenSock 腳本。

我還嘗試了How to stop a function during its execution - JavaScript 中的最佳解決方案，但它對我不起作用（可能是因為我錯誤地實作了它）。當單擊“停止”按鈕時，我無法撰寫“if”條件。我試過if(document.getElementById('button').clicked == true)了，但沒有用。

以下是上面最后一個鏈接中提到的解決方案。

function foo1(){
  console.log("Foo started...");
  if(prompt("Type 1 to terminate right now or anything else to continue...") == "1"){
    return;  // Function will terminate here if this is encountered
  }
  console.log("Foo ending...");  // This will only be run if something other than 1 was entered
}

foo1();

如果可能的話，我寧愿堅持使用 vanilla JS 解決方案而不是 JQuery，因為我不熟悉 JQuery，但如果 JQuery 解決方案是最簡單的方法，我愿意接受。

這是實施失敗的“foo1”解決方案的嘗試：

     function myFunction(){
     gsap.registerPlugin(MotionPathPlugin);
     gsap.to("#comet-horizontal", {
        duration: 5, 
        repeat: 2,
        repeatDelay: 0,
        yoyo: false,
        ease: "none",
        motionPath:{
             path: "#racetrack",
             align: "#racetrack",
             autoRotate: true,
             alignOrigin: [0.5, 0.5]
        }
     });
    if (document.getElementById("button2").clicked == true)
            return;
}
myFunction();

uj5u.com熱心網友回復：

該gsap.to方法回傳一個Tween 物件，您可以使用它來控制影片。它有pause、resume和restart其他幾個有用的方法。

在這里，我改編了您的腳本：

用更有說服力的名字重命名了 HTML 按鈕。
在代碼中附加點擊處理程式，而不是通過 HTML 屬性
添加了一個全域變數以允許每個事件處理程式訪問上述物件
添加了暫停和恢復影片的邏輯
repeat: 2將引數更改為repeat: -1，使影片沒有結束。

let tween; // global so both handlers can access it

document.getElementById("buttonStart").addEventListener("click", function () {
    if (tween) { // Not first time:
        tween.resume(); // Continue from where it was paused
        return;
    }
    gsap.registerPlugin(MotionPathPlugin);
    tween = gsap.to("#comet-horizontal", {
        duration: 5, 
        repeat: -1,
        repeatDelay: 0,
        yoyo: false,
        ease: "none",
        motionPath:{
             path: "#racetrack",
             align: "#racetrack",
             autoRotate: true,
             alignOrigin: [0.5, 0.5]
        }
    });
});

document.getElementById("buttonStop").addEventListener("click", function () {
    tween?.pause();
});

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  /*background-color: black;*/
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
svg {
  overflow: visible;
  height: 100%;
  background-color: orange;
  /* Fix Safari rendering bug */
  transform: translateZ(0);
}
circle {
  fill: pink;
}
#button{
 width: 60px;
 height: 30px; 
 background-color: orange;
 position: relative;
margin-top: 5px;
margin-bottom:  5px;
}
#button2{
 width: 60px;
 height: 30px; 
 background-color: yellow; 
 position: relative;
margin-top: 5px;
margin-bottom:  5px;
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/MotionPathPlugin.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="snap.svg-min.js"></script>
</head>
<body>
<button id="buttonStart">START</button>
<button id="buttonStop">STOP</button>
<svg
   width="100%"
   height="100%"
   viewBox="0 0 338.66667 190.5">
    <path
       id="racetrack"
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffaaaa;stroke-width:2.32673;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke;stop-color:#000000;stop-opacity:1"
       d="M 184.04496,79.375006 A 51.753304,51.753307 0 0 1 132.29166,131.1283 51.753304,51.753307 0 0 1 80.538365,79.375006 51.753304,51.753307 0 0 1 132.29166,27.621698 a 51.753304,51.753307 0 0 1 51.7533,51.753308 z" />   
    <path
       id="comet-horizontal"
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#00d3ff;fill-opacity:1;fill-rule:evenodd;stroke-width:2.82278;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
       d="m 241.75652,61.794127 v 2.645839 l -13.22916,-0.661459 v -0.66146 -0.66146 z"
       sodipodi:nodetypes="cccccc" />
</svg>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485750.html

標籤：javascript html gsap

上一篇：如何創建打字文字效果

下一篇：比較文本輸入的值和默認值并檢查更改是否只有空格