I need to do a simple (in terms of duration - 1 minute) svg-animation (2D). Objects - elementary: rectangles, lines, circles. Can move.

I went through a lot of js libraries, but have not yet stumbled upon one that I could implement: Object 1 is moving. → Movement completed. → Object 2 is moving. → Movement completed ... etc.

So far I have stopped at anime.js and the idea: to implement a chain of functions, and after completing the necessary movement, call a trace. function.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" style="border:1px solid gray;" > <g> <circle id="crc1" cx="40" cy="50" r="20" fill="crimson" > <animate attributeName="cx" values="40;300" dur="4s" fill="freeze" /> </circle> <circle id="crc2" cx="40" cy="150" r="20" fill="gold" > <animate attributeName="cx" values="40;300" dur="4s" fill="freeze" /> </circle> <circle id="crc3" cx="40" cy="250" r="20" fill="greenyellow" > <animate attributeName="cx" values="40;300" dur="4s" fill="freeze" /> </circle> </g> <g id="gO1" transform="translate(100,260)"> <rect x="45" y="85" height="24" width="60" rx="5" fill="green" /> <text x="60" y="102" font-size="18" fill="gold">Start</text> </g> </svg>

  • 2
    I think I need to rephrase the question, because it will not have a definite answer. - Zicrael
  • And why svg animation? - Frog Frogov
  • one
    In svg, you can run the next animation upon completion of the current one. And from the libraries, greensock seems good for such animations. - Artem Gorlachev
  • The question is too general. - Air
  • @Look_at_meow Please add your attempt code. Let it be a non-working code, but it will be a starting point to resolve the issue. Your question is interesting, surely there will be an answer and after your editing, I hope the question will be opened - Alexandr_TT

3 answers 3

For simple animations, and if with fantasy well, then for medium ones, you can use animations that are available in ccs3. Google ccs3 animation.

  • one
    apparently, you're not welcome here either. Catch +1 from me, otherwise you will think that some animals live here and are waiting for when it will be possible to kill someone :) - Pavel
  • 2
    I do not know why they may not be happy. css3 is enough to realize what the author of the question wants - Vladimir Myakota
  • 2
    @Pavel, just the answer is more like a comment ... But in fact, here the question itself is - they have already closed it. - Qwertiy ♦

Anime.js is an excellent library, it's not for nothing that you stopped at it. It has everything you need to fulfill your task. It is very convenient to work with svg with both whole objects and their parts.

For your task, I would use anime.timeline () instead of a chain of functions, controlling the animation sequence in absolute or relative offset to achieve the desired result.

Personally, I would choose one of 2 libraries: Anime.js or GreenSock.

  • one
    Pavel, I do not advise you to answer such questions ... As a result, a lot of discussions with zero efficiency will be released .... - Air
  • The man chose the tool and wants to use it through the cocks, I corrected it, I do not see anything wrong with that. It is because of such comments as to the question, as well as the backing track, SO has a reputation as an unfriendly community ru.meta.stackoverflow.com/questions/7219/… . - Pavel
  • The fact is that in the next. since I not only will not answer, I will be too lazy to even watch most of the questions. - Pavel
  • Search for all sorts of libraries and the like, banned on the site ... - Air
  • Read the question again. Variants of creating animation, in this case, I advise you to use a specific and correct method, in terms of solving the problem. - Pavel

Like svg animations? But do not know which side to approach them?

So look for libraries that implement SVG animations. Yes, this is a solution, but it is very difficult not to understand the basics of SVG animation, immediately use the library. Any error in the SVG source code will prevent the library from triggering.

Therefore, you need to understand a bit about pure SVG and smil before using libraries.

The implementation of this scenario:

Object 1 is moving. → Movement completed. → Object 2 is moving. → Movement completed ... etc.

Take an example from a question and implement a chain of sequential animations using the begin attribute

  1. begin="start.click" - the animation will start after clicking on the 'start' button
  2. begin="an_crc1.end" - the second animation will begin after the end of the first animation an_crc1
  3. begin="an_crc2.end" - the third animation will begin after the end of the second animation an_crc2

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" style="border:1px solid gray;" > <g> <circle id="crc1" cx="40" cy="50" r="20" fill="crimson" > <animate id="an_crc1" attributeName="cx" values="40;350" begin="start.click" dur="1s" fill="freeze" /> </circle> <circle id="crc2" cx="40" cy="150" r="20" fill="gold" > <animate id="an_crc2" attributeName="cx" values="40;350" begin="an_crc1.end" dur="1s" fill="freeze" /> </circle> <circle id="crc3" cx="40" cy="250" r="20" fill="greenyellow" > <animate id="an_crc3" attributeName="cx" values="40;350" begin="an_crc2.end" dur="1s" fill="freeze" /> </circle> </g> <g id="start" transform="translate(100,-80)"> <rect x="45" y="85" height="24" width="60" rx="5" fill="green" /> <text x="60" y="102" font-size="18" fill="gold">Start</text> </g> </svg>

By changing the attribute parameters you can get different scenarios. For example, the first lap starts, after a delay of 1 second, two other rounds start simultaneously

  1. begin="start.click" - the animation will start after clicking on the 'start' button
  2. begin="start.click+1s" - the second animation will start after the start of the first animation with a delay of 1s
  3. begin="start.click+1s" - the third animation will start after the start of the first animation with a delay of 1s

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" style="border:1px solid gray;" > <g> <circle id="crc1" cx="40" cy="50" r="20" fill="crimson" > <animate id="an_crc1" attributeName="cx" values="40;350;40" begin="start.click" dur="2s" fill="freeze" /> </circle> <circle id="crc2" cx="40" cy="150" r="20" fill="gold" > <animate id="an_crc2" attributeName="cx" values="40;350;40" begin="start.click+1s" dur="2s" fill="freeze" /> </circle> <circle id="crc3" cx="40" cy="250" r="20" fill="greenyellow" > <animate id="an_crc3" attributeName="cx" values="40;350;40" begin="start.click+1s" dur="2s" fill="freeze" /> </circle> </g> <g id="start" transform="translate(100,-80)"> <rect x="45" y="85" height="24" width="60" rx="5" fill="green" /> <text x="60" y="102" font-size="18" fill="gold">Start</text> </g> </svg>

Looping animation

After the end of the last (third) animation, the first animation should start.

begin="start.click;an_crc3.end"

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" style="border:1px solid gray;" > <g> <circle id="crc1" cx="40" cy="50" r="20" fill="crimson" > <animate id="an_crc1" attributeName="cx" values="40;350;40" begin="start.click;an_crc3.end" dur="2s" fill="freeze" /> </circle> <circle id="crc2" cx="40" cy="150" r="20" fill="gold" > <animate id="an_crc2" attributeName="cx" values="40;350;40" begin="an_crc1.end" dur="2s" fill="freeze" /> </circle> <circle id="crc3" cx="40" cy="250" r="20" fill="greenyellow" > <animate id="an_crc3" attributeName="cx" values="40;350;40" begin="an_crc2.end" dur="2s" fill="freeze" /> </circle> </g> <g id="start" transform="translate(100,-80)"> <rect x="45" y="85" height="24" width="60" rx="5" fill="green" /> <text x="60" y="102" font-size="18" fill="gold">Start</text> </g> </svg>