우리는 영향을받은 게임을 개발하고 있습니다.이 게임을 사용하면 클릭 한대로 엔티티를 '연결'할 수 있습니다. 기본적으로 이것은 네온 광선 효과와 함께 두 점 사이에 선을 그립니다. 여태까지는 그런대로 잘됐다. 이제 '연쇄'연결을 애니메이션으로 만들도록 요청했습니다. 즉, 불, 반짝임 등입니다. 실제 그래픽 애니메이션이 제대로 보이려면 본질적으로 문제가있는 것 같습니다. 엔티티가 서로 거리/각도를 가질 수 있기 때문에 우리는이를위한 최상의 솔루션을 구현하는 방법, 즉 대각선 이미지를 그리는 방법을 고집합니다. 예를 들어 애니메이션을 적용 할 수있는 임의의 두 지점 사이를 대각선으로 그립니다. 이 문제를 해결하는 방법에 대한 모든 의견은 많은 도움이 될 것입니다.HTML5 캔버스에서 두 객체 사이의 경로에 애니메이션 적용
2
A
답변
1
필요한 애니메이션/입자 효과가 포함 된 애니메이션 시트가있는 입자 엔티티를 만들 수 있습니다. 그리고 나서 점 A에서 점 B까지 줄을 따라이 입자들을 그립니다.
화재/반짝임 등을 위해 그것을 움직이기를 원할 때 모든 엔티티에 대한 애니메이션을 실행하십시오. 그 줄에.
0
저는 Prat에 동의하는 경향이 있습니다. 입자 효과가 가장 필요한 것일 수 있습니다. impact.js에서 입자 효과를 생성하는 데 도움이되는 자습서입니다.
http://www.pointofimpactjs.com/snippets/view/24/particle-effects-generation
관련 문제
- 1. HTML5 파선에 애니메이션 적용
- 2. CALayer 그림자 경로에 애니메이션 적용
- 3. 두 UITextviews 사이의 애니메이션
- 4. 캔버스에서 이미지 기울이기 및 애니메이션 적용
- 5. 값을 변경할 때 SVG 경로에 애니메이션 적용
- 6. D3 + 전단지에서 GeoJSON 경로에 애니메이션 적용
- 7. js/jQuery를 사용하여 SVG 경로에 애니메이션 적용
- 8. 두 UIView 사이의 애니메이션
- 9. 두 개의 사각형이 HTML5 캔버스에서 맞았는지 확인합니다.
- 10. HTML5 캔버스에서 그리기를 애니메이션하는 방법
- 11. HTML5 캔버스에서 이미지 그리기
- 12. WPF에서 상태 사이의 여백 값에 애니메이션 적용
- 13. html5 캔버스에서 제거
- 14. 두 UIWebView 사이의 플립 애니메이션
- 15. StaticLayout에 애니메이션 적용
- 16. HTML5 캔버스에서 Rects 그리기
- 17. HTML5 캔버스에서 동영상 정지하기
- 18. HTML5 캔버스에서 strokeRect() 지우기
- 19. 캔버스에서 가로 스크롤. HTML5
- 20. html5 캔버스에서 겹치는 폴리곤
- 21. HTML5 캔버스에서 글꼴 추출
- 22. html5 캔버스에서 "지우기"
- 23. HTML5 캔버스에서 그리기
- 24. html5 캔버스에서 비디오
- 25. HTML5 캔버스에서 트리를 움직이는 방법
- 26. HTML5 캔버스에서 사각형 그리기를 터치하십시오.
- 27. HTML5 캔버스에서 여러 이미지 자르기
- 28. HTML5 캔버스에서 SVG를 사용할 수 있습니까?
- 29. Google지도와 google streetview를 모두 표시하는 경로에 애니메이션 적용
- 30. RaphaelJS 및 GSAP를 사용하여 SVG 경로에 애니메이션 적용