SVG/GSAP遊戲中的相交點

我設置了一個codepen供參考，問題是我需要找到箭頭和石頭碰撞時的交點（一切都是SVG），碰撞後必須隱藏他們兩人，當我們點擊Trebuchet的旋轉器時，石頭會移動，箭頭應該在頁面加載後自行啓動。SVG/GSAP遊戲中的相交點

箭頭應該沿着淺藍色的路徑走，石頭沿着灰色的細線路徑走。我瘋狂地把腦袋弄碎了，任何建議都會有很大的幫助。 codepen的鏈接是： - Click Here to view Codepen

$("#wheel-moving").click(function() { 

     $('#rope').css('display','none'); 
     TweenMax.to(".rotateFireButton", .85, {x:25, y:140, rotation:180, transformOrigin:"50% 50%", ease: Power1.easeIn}) 

     TweenMax.fromTo(".throwMachineLow", .2 , {x:2 , y:79.1 }, {x:2, y:79.1, delay:.3, rotation:57, transformOrigin:"84% 0%", ease: Power1.easeIn}) 
     TweenMax.fromTo("#heavy-block", .2 , {x:182.7 , y:71.5 }, {x:160, y:100, delay:.3, transformOrigin:"84% 0%", ease: Power1.easeIn}) 
     TweenMax.to(".throwMachineLow", .5 , {x:2, y:79.1, delay:.95, rotation:0, transformOrigin:"84% 0%", ease: Power1.easeIn}) 
     TweenMax.to("#heavy-block", .5 , {x:182.7 , y:71.5, delay:.95, transformOrigin:"84% 0%", ease: Power1.easeIn}) 
     TweenMax.to(".rotateFireButton", .85, {x:25, y:140, delay:.95, rotation:-180, transformOrigin:"50% 50%", ease: Power1.easeIn}) 
     setTimeout(function(){ 
      $('#rope').css('display','initial'); 

     } , 1500); 
     var stonePath = MorphSVGPlugin.pathDataToBezier("#stoneRunner",{align:"#stone",offsetX:-310,offsetY:-240}); 

     TweenMax.to(
      $("#stone"), 3, 
      { 
       delay:.27, 
       autoAlpha: 1, 
       visibility:'visible', 
       bezier: {values:stonePath, type:"cubic"}, 
       transformOrigin:"100% 100%" 
      }); 
     fire(); 
    }); 

function fire(){ 
     $('#wheel-moving').css('pointer-events','none');  
     setTimeout(function() { 
      $('#wheel-moving').css('pointer-events','auto'); 
     }, 2000); 
    }

來源

2016-07-27 Abhilash Bhargava

這不是一個簡單的任務，以數學方式做這件事。 Google交集貝塞爾曲線。但是，通過將貝塞爾曲線分解爲直線段並執行確定哪些線段彼此相交的更簡單的任務，可以獲得足夠好的逼近（對於遊戲）。 –

我已經完成了這個草圖的整個svg，然後將它合併到HTML中，所以我得到了一系列使用標尺的座標，但它只是未能檢測到碰撞，所以無法弄清楚我究竟在哪裏出錯。 –

我得到了解決，這是很容易使雙方的箭頭，石遵循使用GSAP的路徑，在那之後找到交叉點，先找到長度的路徑可以在此鏈接的底部獲得https://css-tricks.com/svg-line-animation-works/然後在stroke-dashoffset中使用此值並使用hit-n-trial，您可以找到它們相交的值，只需將值從0更改爲pathLength即可獲得該主意，這實際上是棘手的，但它是值得的時間！我也會更新codepen。

來源

2016-07-29 08:43:10

SVG/GSAP遊戲中的相交點

回答

相關問題