Animation33 svg pattern : animation snow_1 snow_1 2023. 12. 24. svg animation; mutation path로 사각형을 그린다. 모서리 부분은 둥글게 하면서, 이를 위해 svg 에서는 arc 를 그리는 명령어 A,a 를 사용한다. 직선을 그리는 L,ㅣ 명령어와 함께 사용함으로써,다음 그림과 같이 표현된다. path이므로 애니메이션으로 변형을 자유롭게 할 수 있다. 네모서리가 터지는 그림을 보자. 이렇게 쉽게 변이가 가능하다. 회전하는 그림은 클릭으로 정지 가능하다. 2023. 11. 8. svg rounded rectangle ; animation 사각형을 그리는 것은 쉽다. 그러나 모서리 부분을 둥글게 하는 것은 어떻게 할까? 이를 위해 svg 에서는 arc 를 그리는 명령어 A,a 가 존재한다. 직선을 그리는 L,ㅣ 명령어와 함께 사용함으로써,다음 그림과 같이 표현된다. 애니메이션을 이용하여, 변형도 자유롭게 할 수 있다. 이것이 svg의 장점이다. 회전하는 그림은 클릭으로 정지 가능하다. 2023. 11. 8. svg animation : bee animation using javascript 가로 세로 200,200 인 사각형 속에 원으로 중심을 표현하고,한마리의 벌을 붙혀 회전을 시켜보자. 시계방향으로 ,반시계반향으로... 자바스크립트로 애니메이션 객체를 생성,속성을 적당히 부여하여 그룹화된 객체들의 형제로 등록시켜서 애니메이션을 한다. 그룹에 클릭이벤트를 등록하여,"active" className을 제거,또는 추가를 하여 애니메이션을 정지 또는 실행한다. 2023. 11. 7. 이전 1 2 3 4 5 6 7 8 9 다음
