반응형
무지개애니메이션
-
JavaScript 입문 : Canvas Animation VII - 입자를 추가하여 둘 사이 거리를 선으로 이어주는 효과로 애니메이션 완성카테고리 없음 2022. 11. 13. 19:30
이제 Canvas를 통한 Animation 기본 시간이 끝나갑니다. Canvas를 공부하면서 기본적인 속성에 대해 알아가는 시간이었던 것 같습니다. 물론 훨씬 복잡하고 어려운 코드가 많으나 최초 목적인 기초 단계의 Canvas 속성을 아는 것만으로도 성과가 있을 것으로 보여집니다. 이제 조금 더 들어가서 현재는 100개의 입자를 생성하여 애니메이션 효과를 보았는데 이중반복을 통해 두입자 사이의 거리를 계산하고 그 거리를 선으로 잇는 효과를 적용한다면 상당히 아름다운 효과를 표현할 수 있을겁니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 1. 입자 사이 거리 계산식 추론 입자를 하나 더 만들어 입자사이를 계..