TIL

animation

animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용합니다. animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state의 단축 속성입니다.

canvas

Canvas API는 JavaScript와 HTML <canvas> 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.

Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 <canvas> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.

오늘은...

새벽에 힘을내서 2번 불꽃놀이 버전을 대략적으로 완성했다. 뭐 부족하지만 나름 완성이라 하겠다. 첫번 째와 다른점은 그냥 이건 하나씩 쏴주기만 한다는점 대신 화려하게 보이기위해 개체수를 늘렸다. 그리고 움직임에 중력적인 효과를 부여하였다. 해서 최초 투사물도 포물선으로 움직이고 뿌려지는 불곷도 포물선의 곡선을 보인다. 그리고 구성은 구형으로 퍼지는것을 기본으로 하여 2차원만 나타내었다. 그리서 것으로 보여지는것은 밀도있는 구성을 보여준다. 이 부분은 첫번째 버전에서는 구현치 못한부분이다. 하지만 여전히 아쉬운 것은 유저에의한 반응적 구현까지 하기에는 이해가 부족하다는것 정확히는 그러헥 해서 안정적으로 동작할지를 알 수가 없다. 해서 그부분은 배제 이러한 에니메이션을 구현하는데에는 현재사용한 transform 외에도 animation 이나 canvas가 있어서 자고 일어나서는 이부분을 사용하기 위해 찾아보았으나 우선 첫번째 animation은 확정적인 움직임에는 유용해 보이나 그걸 제어하면서 구현할 방법을 잘모르겠다. 두번째 canvas는 말그대로 그림을 그릴 준비를 해야해서 우선 도구부터 익숙해져야겠다싶다. 현재로서는 화면크기도 겨우겨우 맞추는 형편이니. 즉 활용에는 아직 시간이 필요하다.
불꽃놀이 버전 2