Question

我正试图paths svg circles两个scale左右paths。我的目标是paths CSS位于中心位置，好像它们在搏动一样。我已经查看了stackoverflow上的每个答案，以找出如何实现这一目标。 The closest solution我发现没有炒锅。

这是我目前所拥有的jsfiddle。正如您所看到的，javascript正在缩小/朝向原点。如果无法通过Velocity.js实现此目标，是否可以使用<div class="wrapper"> <svg version="1.1" viewBox="20 20 60 60" > <g class="icon-sun"> <path class="icon-sun-beam" d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/> <path class="icon-sun-beam" d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/> <path class="icon-sun-beam" d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"/> <path class="icon-sun-beam" d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"/> <path class="icon-sun-beam" d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"/> <path class="icon-sun-beam" d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"/> <path class="icon-sun-beam" d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"/> <path class="icon-sun-beam" d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"/> <circle class="icon-sun-outline" cx="50.034" cy="50" r="11.999"/> <circle class="icon-sun-fill" fill="#FFFFFF" cx="50.034" cy="50" r="7.999"/> </g> </svg> </div>这样的.wrapper { width: 100px; text-align: center; } .icon-sun-beam { animation-name: scale; animation-duration: 3s; animation-iteration-count: infinite; transform-origin: 50px 50px; animation-timing-function: linear; animation-fill-mode: both; animation-direction: alternate; } .icon-sun-beam:nth-child(even) { animation-delay: 4.5s, 4.5s; } .icon-sun { animation-name: rotate; animation-iteration-count: infinite; animation-duration: 18s; animation-timing-function: linear; transform-origin: 50px 50px; } svg { shape-rendering: geometricPrecision; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes scale { 0% { transform: scale(0.85, 0.85); } 100% { transform: scale(1.35, 1.35); } }框架实现此目标？

这是SVG：

name

这是CSS：

@Column(unique = true)

Answer 1

有一个简单的解决方案，即跨浏览器。

只要给你的每个阳光都有自己的绝对transform-origin。

＆＃13;

    .wrapper {
      width: 100px;
      text-align: center;
    }
    .icon-sun-beam {
      animation-name: scale;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-direction: alternate;
      
    }
    
    .icon-sun-beam:nth-child(even) {
      animation-delay: 4.5s, 4.5s;
    }
    
    .icon-sun {
      animation-name: rotate;
      animation-iteration-count: infinite;
      animation-duration: 18s;
      animation-timing-function: linear;
      transform-origin: 50px 50px;
    }
    
    svg {
      shape-rendering: geometricPrecision;
    }
    
    @keyframes rotate {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    @keyframes scale {
      0% {
        transform: scale(0.85, 0.85);
      }
      100% {
        transform: scale(1.35, 1.35);
      }
    }

＆＃13;

<div class="wrapper">
              <svg version="1.1" viewBox="20 20 60 60" >
              <g class="icon-sun">
                  <path class="icon-sun-beam" style="transform-origin: 70.0px 50.0px;"
                        d="M72.03,51.999 
                        h-3.998 
                        c-1.105,0-2-0.896-2-1.999 
                        s0.895-2,2-2h3.998
                        c1.104,0,2,0.896,2,2
                        S73.136,51.999,72.03,51.999z"/>
                  <path class="icon-sun-beam" style="transform-origin: 64.2px 35.9px;"
                        d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/>
                  <path class="icon-sun-beam" style="transform-origin: 50.0px 30.0px;"
                        d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"/>
                  <path class="icon-sun-beam" style="transform-origin: 35.9px 35.9px;"
                        d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"/>
                  <path class="icon-sun-beam" style="transform-origin: 30.0px 50.0px;"
                        d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"/>
                  <path class="icon-sun-beam" style="transform-origin: 35.9px 64.1px;"
                        d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"/>
                  <path class="icon-sun-beam" style="transform-origin: 50.0px 70.0px;"
                        d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"/>
                  <path class="icon-sun-beam" style="transform-origin: 64.2px 64.1px;"
                        d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"/>
                  <circle class="icon-sun-outline"
                          cx="50.034"
                          cy="50"
                          r="11.999"/>
                  <circle class="icon-sun-fill"
                          fill="#FFFFFF"
                          cx="50.034"
                          cy="50"
                          r="7.999"/>
                </g>
          </svg>
    </div>

＆＃13;

Answer 2

我最终使用GSAP库来动画SVG。我选择这样做是因为没有解决方案可以在Chrome或Firefox上破坏动画。这是我测试过的可用于IE 11，Firefox和Chrome的代码。我使用了Jquery和TweenMax个库。

$(document).ready(function() {
    var sun = $(".icon-sun");
    var sunBeamEven = $(".icon-sun-beam:even");
    var sunBeamOdd = $(".icon-sun-beam:odd");
    function animateSun(){
    TweenMax.to(sun, 12, {rotation:"+=360", svgOrigin:"50 50", smoothOrigin:true, repeat:-1, ease:Linear.easeNone});
    TweenMax.to(sunBeamEven, 4, {scale:0.5, transformOrigin:"50% 50%", repeat:-1, yoyo:true, ease:Linear.easeNone});
    TweenMax.to(sunBeamOdd, 4, {scale:0.5, transformOrigin:"50% 50%", repeat:-1, yoyo:true, ease:Linear.easeNone, delay:3});
  }
animateSun();

中心点的Svg刻度路径（脉动）

2 个答案: