Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to achieve svg animation", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve svg animation" this article.

1. Animation of SVG

SVG animation has five elements, which control different types of animation, which are:

Set

Animate

AnimateColor

AnimateTransform

AnimateMotion

Set sets delays for the animation element, which is the simplest animation element in SVG, but it has no animation effect.

Use syntax:

AttributeName: is the name of the element attribute to be changed.

AttributeType: is a list of values that indicate the attributeName attribute, and supports three fixed parameters CSS/XML/auto, such as XMagol y and transform belonging to XML,opacity belonging to CSS. Auto means that the browser automatically discriminates, and it is also the default value. If you don't know which one to choose, fill in auto, and the browser will judge for itself.

To: the attribute value at the end of the animation.

Begin: animation delay time.

Eg: draw a circle with a radius of 200. after 4 seconds, the radius changes to 50.

?

Is the basic animation element to achieve the transition effect of a single attribute.

Use syntax:

From: the property start value of the transition effect.

To: the property end value of the transition effect.

Begin: the start time of the animation.

Dur: animation transition time, control animation speed.

RepeatCount: the number of times the animation is repeated.

Eg: draw a circle with a radius of 200. after 4 seconds, the radius gradually changes from 200 to 50 in 2 seconds.

?

Control color animation, animate can also achieve this effect, so this attribute has been discarded.

Realize the animation effect of transform transform, similar to css3's transform transform. To achieve translation, rotation, scaling and other effects.

Use syntax:

RepeatCount: repeat the number of times. Set to indefinite to indicate an infinite loop and execute all the time.

Type: add a transform transform type.

Eg: draw a circle with a radius of 200. after 4 seconds, it starts zooming out, zooming out from 1.5 to 0 times in 2 seconds.

You can define animation paths that allow SVG shapes to move along a specified path.

Use syntax:

Path: defines the path, using syntax consistent with the d attribute of "HTML5 (8)-- path detailed explanation of SVG" path.

Begin: delay time.

Dur: animation execution time.

Eg: draw a circle with a radius of 10, with a delay of 4 seconds from the upper left corner to the lower right corner.

?

When actually making animation, the animation is too single and uncool. When you need to change multiple attributes at the same time, the above four elements can be combined with each other, and the same type of animation can also be combined. Although these elements can be animated, they cannot add events dynamically, so let's take a look at how js animates.

2. JavaScript control

In the last article, we introduced that js can manipulate path as well as SVG's built-in shape elements, and you can add events to any element.

The method of adding an event to a SVG element is the same as a normal element, which can be added only with the name of the on+ event or addEventListener.

Eg: use SVG to draw a line and change x1 when you click on the line to achieve the rotation effect.

_ window.onload=function () {

Var line=document.getElementById ("line")

Line.onclick=function () {

Let start=parseInt (line.getAttribute ("x1"))

End=400,dis=start-end

RequestAnimationFrame (next)

Let count=0

Function next () {

Count++

Let axicountbind 200 century curving Math.abs (start+ dis*a)

Line.setAttribute ('x1jewelry cur)

If (count-from fast to slow

Ease-in-out | easeInOut |-slow to fast and then to slow

Back-in | backIn-bounce back at the beginning

Back-out | backOut-bounce back at the end

Elastic-rubber band

Bounce-bounce

Eg: click on the rectangle, and the rectangle slowly becomes larger.

Var paper=Raphael ("box", 800500)

Let rect=paper.rect (100100150100)

Rect.attr ({'fill':'red','stroke':'blue','stroke-width':'10'})

Rect.attr ('fill','pink')

Rect.click (function () {

Rect.animate ({

"width": 300

"height": 300

}, 1000, "bounce")

})

?

Copy the above code and run it in various browsers and lower versions of IE browsers respectively, and find that all work properly. There are many animation libraries in SVG. We introduced Raphael. Interested friends can find other libraries on their own.

The above is all the contents of the article "how to achieve svg Animation". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.