SVG only (no JS) - line/path animation

问题: I can't think my way through this one... I can't really add mark-up in a project, only CSS (for many boring reasons with who I'm collaborating remotely with). The end cli...

问题:

I can't think my way through this one... I can't really add mark-up in a project, only CSS (for many boring reasons with who I'm collaborating remotely with).

The end client wants a loading animation of their logo path being drawn but not linear, more ease-in-out (slow-fast-slow) sort of thing. To illustrate what I mean, see jsfiddle I've done: https://jsfiddle.net/tobzzzz/djf7oth2/ (their logo is a bit like a speech mark, I've done a circle for ease for the demo).

The logo will sit on top of an image background, not a white/solid colour background, so my fiddle solution won't work of two circles layered. I added light grey background to demonstrate how it doesn't work.

The IDEAL solution would be SVG only (using SVG animation not CSS animation), I'd then convert it into data and put it as a background-image.

If it can't be done with SVG animation only, I'd like to know if it can be done with SVG and CSS combo. But it absolutely 100% cannot be JS.

Any good ideas?

body {
  background: #eee
}

.black {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: dash 4s linear infinite;
}

.white {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: dash2 4s ease-in-out infinite;
}

@keyframes dash {
  80% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash2 {
  100% {
    stroke-dashoffset: 0;
  }
}
<svg class="path" width="84" height="84" xmlns="http://www.w3.org/2000/svg">
      <path class="black" fill="none" stroke="#000000" stroke-width="4" d="M 80.889194,41.80541 C 80.889194,63.45198 63.341174,81 41.694594,81 20.048024,81 2.5,63.45198 2.5,41.80541 2.5,20.158827 20.048024,2.61081 41.694594,2.61081 c 21.64658,0 39.1946,17.548017 39.1946,39.1946 z"/>
      <path class="white" fill="none" stroke="white" stroke-width="5" d="M 80.889194,41.80541 C 80.889194,63.45198 63.341174,81 41.694594,81 20.048024,81 2.5,63.45198 2.5,41.80541 2.5,20.158827 20.048024,2.61081 41.694594,2.61081 c 21.64658,0 39.1946,17.548017 39.1946,39.1946 z"/>
    </svg>


回答1:

You need to animate the stroke-dasharray, not only the stroke-dashoffset. You can add multiple numbers to the value of the dasharray, defining alternating lengths of dashes and gaps. So, if you circle with r="40" has a circumference of 251,4,

  • 0 251.4 is a stroke of 0 length and a gap around the whole circumference
  • 125.7 125.7 is a half-circle stroke and a half-circle gap
  • and then reduce the stroke length again

At the same time, move the start of the stroke around the circle by animating the offset.

There is a lot of finetuning you can do with other intermediate values, by distributing the keyTimes differently and with easing functions. Here is a basic variant with linear animations:

<svg width="84" height="84">
    <circle r="40" cx="42" cy="42" style="fill: none;stroke: black;stroke-width: 4;">
        <animate attributeName="stroke-dasharray" dur="3s" repeatCount="indefinite"
                 keyTimes="0;0.5;1" values="0 251.4;125.7 125.7;0 251.4" />
        <animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite"
                 keyTimes="0;0.5;1" values="0;-100;-251.4" />
    </circle>
</svg>


回答2:

have you looked at this?

https://maxwellito.github.io/vivus-instant/

You can drag in any SVG and it has limited animation capabilities automatically.

  • 发表于 2018-07-07 16:08
  • 阅读 ( 325 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除