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游戏中的相交点

回答

相关问题