旋转动画svg

最新推荐文章于 2025-03-23 21:54:02 发布

包晗

最新推荐文章于 2025-03-23 21:54:02 发布

阅读量1.4k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_43127990/article/details/128028912

版权

需求
1.实现元素沿椭圆轨迹均匀旋转
2.鼠标点击事件、移入暂停运动
3.元素由远到近逐渐增大
在这里插入图片描述

旋转动画的实现思路：
1.path指定椭圆轨迹路径，stroke="lightgrey"可以设置轨迹颜色，在测试时添加颜色方便修改路径。

<path d="M10 130 
        A 120 80, 0, 0, 1, 360 130 
        A 120 60, 0, 0, 1, 10 130" stroke-width="2" fill="none" id="theMotionPath" />

2.animateMotion元素可以让SVG图形沿着指定的path路径运动，实现多个元素均匀旋转，控制好dur和begin时间。

<animateMotion dur="16s" begin="0s" fill="freeze" repeatCount="indefinite">
     <mpath xlink:href="#theMotionPath" />
</animateMotion>

3.实现由远到近元素的大小缩放，values值表示缩放的比例。

<animateTransform attributeName="transform" begin="0s" dur="16s" type="scale" values="0.9;0.5;0.7;0.9;1;0.9" repeatCount="indefinite" />
完整代码如下：

<body>
  <div class="container">
    <svg width="100%" height="100%" id="svg_an">
      <g id="layer0">
        <path d="M10 130 
        A 120 80, 0, 0, 1, 360 130 
        A 120 60, 0, 0, 1, 10 130" stroke-width="2" fill="none" id="theMotionPath" />
      </g>
      <g id="layer1" cursor="pointer" onmouseover="pauseAn()" onmouseout="unpauseAn()">
        <image xlink:href="img/ball.jpg" id="item1" width="70" height="70">
        </image>
        <animateMotion dur="16s" begin="0s" fill="freeze" repeatCount="indefinite">
          <mpath xlink:href="#theMotionPath" />
        </animateMotion>
        <animateTransform attributeName="transform" begin="0s" dur="16s" type="scale" values="0.9;0.5;0.7;0.9;1;0.9"
          repeatCount="indefinite" />
        <text>1</text>
      </g>
      <g id="layer2" cursor="pointer" onmouseover="pauseAn()" onmouseout="unpauseAn()">
        <image xlink:href="img/ball.jpg" id="item2" width="70" height="70">
        </image>
        <animateMotion repeatCount="indefinite" dur="16s" begin="-2s">
          <mpath xlink:href="#theMotionPath" />
        </animateMotion>
        <animateTransform attributeName="transform" begin="-2s" dur="16s" type="scale" values="0.9;0.5;0.7;0.9;1;0.9"
          repeatCount="indefinite" />
        <text>2</text>
      </g>
      <g id="layer3" cursor="pointer" onmouseover="pauseAn()" onmouseout="unpauseAn()">
        <image xlink:href="img/ball.jpg" id="item3" width="70" height="70">
        </image>
        <animateMotion dur="16s" repeatCount="indefinite" begin="-4s">
          <mpath xlink:href="#theMotionPath" />
        </animateMotion>
        <animateTransform attributeName="transform" begin="-4s" dur="16s" type="scale" values="0.9;0.5;0.7;0.9;1;0.9"
          repeatCount="indefinite" />
        <text>3</text>
      </g>
      <g id="layer4" cursor="pointer" onmouseover="pauseAn()" onmouseout="unpauseAn()">
        <image xlink:href="img/ball.jpg" id="item4" width="70" height="70">
        </image>
        <animateMotion dur="16s" repeatCount="indefinite" begin="-6s">
          <mpath xlink:href="#theMotionPath" />
        </animateMotion>
        <animateTransform attributeName="transform" begin="-6s" dur="16s" type="scale" values="0.9;0.5;0.7;0.9;1;0.9"
          repeatCount="indefinite" />
        <text>4</text>
      </g>
      <g id="layer5" cursor="pointer" onmouseover="pauseAn()" onmouseout="unpauseAn()">
        <image xlink:href="img/ball.jpg" id="item5" width="70" height="70">
        </image>
        <animateMotion dur="16s" repeatCount="indefinite" begin="-8s">
          <mpath xlink:href="#theMotionPath" />
        </animateMotion>
        <animateTransform attributeName="transform" begin="-8s" dur="16s" type="scale" values="0.9;0.5;0.7;0.9;1;0.9"
          repeatCount="indefinite" />
        <text>5</text>
      </g>
      <g id="layer6" cursor="pointer" onmouseover="pauseAn()" onmouseout="unpauseAn()">
        <image xlink:href="img/ball.jpg" id="item6" width="70" height="70">
        </image>
        <animateMotion dur="16s" repeatCount="indefinite" begin="-10s">
          <mpath xlink:href="#theMotionPath" />
        </animateMotion>
        <animateTransform attributeName="transform" begin="-10s" dur="16s" type="scale" values="0.9;0.5;0.7;0.9;1;0.9"
          repeatCount="indefinite" />
        <text>6</text>
      </g>
      <g id="layer7" cursor="pointer" onmouseover="pauseAn()" onmouseout="unpauseAn()">
        <image xlink:href="img/ball.jpg" id="item7" width="70" height="70">
        </image>
        <animateMotion dur="16s" repeatCount="indefinite" begin="-12s">
          <mpath xlink:href="#theMotionPath" />
        </animateMotion>
        <animateTransform attributeName="transform" begin="-12s" dur="16s" type="scale" values="0.9;0.5;0.7;0.9;1;0.9"
          repeatCount="indefinite" />
        <text>7</text>
      </g>
      <g id="layer8" cursor="pointer" onmouseover="pauseAn()" onmouseout="unpauseAn()">
        <image xlink:href="img/ball.jpg" id="item8" width="70" height="70">
        </image>
        <animateMotion dur="16s" repeatCount="indefinite" begin="-14s">
          <mpath xlink:href="#theMotionPath" />
        </animateMotion>
        <animateTransform attributeName="transform" begin="-14s" dur="16s" type="scale" values="0.9;0.5;0.7;0.9;1;0.9"
          repeatCount="indefinite" />
        <text>8</text>
      </g>
    </svg>
  </div>
  <script src="js/snap.svg.js" type="text/javascript"></script>
  <script src="js/index.js" type="text/javascript"></script>
</body>
//动画的暂停与开始
var svg1 = document.getElementById("svg_an");
function pauseAn() {
  svg1.pauseAnimations();
}
function unpauseAn() {
  svg1.unpauseAnimations();
}

//鼠标滑入元素缩放及点击事件
var svg = Snap("#svg_an")
for (var i = 1; i <= 8; i++) {
  svg.select("#item" + i).mouseover(function () {
    this.transform("s" + [1.2, 1.2])
  })
  svg.select("#item" + i).mouseout(function () {
    this.transform("s" + [1, 1])
  })
  svg.select("#item" + i).click(function () {
    console.log(this)
    //console.log(this.node.href.baseVal)
  })
}