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로 통합 했으므로 통치자를 사용하여 일련의 좌표를 얻었으나 충돌을 감지하지 못하므로 정확히 어디에서 잘못 될지 알 수는 없다 . –

I받은 솔루션, 그 교차점을 찾을 후 화살표와 돌 모두가 처음 길이를 찾아, GSAP를 사용하여 경로를 따라 할 수 있도록 쉽게 경로의이 링크의 하단에 얻을 수 https://css-tricks.com/svg-line-animation-works/ 다음 스트로크 - 대시 오프셋 에서이 값을 사용하고 hit-n-trial을 사용하면 교차하는 값을 찾을 수 있습니다. 0에서 pathLength까지 값을 변경하면 아이디어를 얻을 수 있습니다. , 그것은 실제로 까다 롭습니다 그러나 그것은 시간의 가치가있었습니다! 나는 또한 codepen을 업데이트 할 것이다.

출처

2016-07-29 08:43:10

SVG/GSAP 게임의 교차점

답변

관련 문제