본문 바로가기
CSS/SVG

[SVG] svg scale 애니메이션 효과 적용하는 방법

by 알찬 퍼블리셔 2019. 8. 1.
728x90
반응형

처음에 작은 원이 여러개가 커지면서 배경을 채우는 효과를 내고 싶어서 

 

시도했는데 

 

뭔가 생각처럼 효과가 나타나지 않았다...

 

 

제자리에서 크기가 커지는걸 원했는데 왜 위치가 바뀌는 것인가....

              <animateTransform 
              			attributeName="transform" 
                        type="scale"
                        from="0 0" to="1 1" 
                        begin="0s" 
                        dur="2.5s" 
                        repeatCount="indefinite">
              </animateTransform>

 

 

 

 

그래서 찾다보니  아래와 같은 원을 발견해서 

 

 

 

 

여러개의 svg 를 넣어 구현했다..

 

 

 

 

 

뭔가 석연찮았는데 괜찮은걸 발견해서 다시 구현했다.

스크립트로 하나의 svg 안에 여러개의 원을 추가하는 형태. 

 

d3 스크립트를 이용해 스크립트로 원을 추가하고 transition을 이용해 효과를 넣는다.

svg.insert("circle", "rect")
         .attr("cx", position[i][0])
         .attr("cy", position[i][1])
         .attr("r", 5) // 1e-6
         .style("fill", d3.hsl(100, .1, .6))
         .transition()
         .duration(2000)
         .ease(Math.sqrt)
         .attr("r", 200)
           .remove();
        }

 

 

 

 

 

 

참고한 코드 

https://codepen.io/jscottsmith/pen/ZGGapQ

 

SVG Particles

Trying d3.js. Mouseover to create SVG circle particles. Started from: http://bl.ocks.org/mbostock/1062544...

codepen.io

 

 

728x90
반응형

댓글