The following code animates the img along the specific #pat path.
<switch>
<g i:extraneous="self">
<path id="pat" style="stroke:url(#grad);" class="mypath" d="
M144.668,123.467c0,0-13.001-133.999-143.668-121.665"/>
</g>
</switch>
<image xlink:href="http://m.kaon.com/icon/17001.png" width="30" height="30" x="-15" y="-15">
<animateMotion rotate="auto" dur="3s" repeatCount="indefinite">
<mpath xlink:href="#pat"/>
</animateMotion>
</image>
Is there any way to loop the animation indefinitely, but to have a delay inbetween. Like animate 0->1, wait 5s, animate 0-1.
Using this resource: http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement.
You could add another fake/pause element to link the begin/end...first one is just a pause that doesn't really do anything (so it doesn't vanish when its not on the path).
<animateTransform begin="myanim.end" id="pause" dur="3s" type="translate" attributeType="XML" attributeName="transform"/>
<animateMotion id="myanim" dur="6s" begin="0; pause.end" fill="freeze">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
Example fiddle
Related
Why my animation doesn't start from the top to the bottom ? How to reverse it correctly ? I don't know what I should change. (I tried keyPoints="1;0" keyTimes="0;1" which didn't work)
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="0 0 500 350"><path d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28" stroke="#000" stroke-miterlimit="10" fill="none" id="motionPath"></path><rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="50"></rect><animateMotion xlink:href="#circle" from="50" to="450" dur="5s" begin="0s" repeatCount="1" rotate="auto" fill="freeze"><mpath xlink:href="#motionPath"></mpath></animateMotion></svg>
It is necessary to remove from =" 50 " to =" 450 " since the length of the path of movement is determined by the length of the path mpath
The direction of movement of an object along a path depends on two parameters
keyPoints="1;0" - movement from start to finish
keyTimes="0;1"
keyPoints="0;1" - movement from end to start
keyTimes="0;1"
In the example below, JS is used only to handle the event of pressing the control buttons: forward and back
var animation1 = document.getElementById("forward")
function forwardSVG(){
animation1.beginElement();
}
var animation2 = document.getElementById("back")
function backSVG(){
animation2.beginElement();
}
<div id="pathContainer4">
<button id="btn1" onclick="forwardSVG()">forward</button />
<button id="btn2" onclick="backSVG()">Back</button />
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="50 0 500 350">
<path id="motionPath" d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28" stroke="#000" stroke-miterlimit="10" fill="none" >
</path>
<rect id="circle" x="0" y="-25" rx="15" ry="15" width="50" height="50"></rect>
<!-- Forward motion animation -->
<animateMotion id="forward"
xlink:href="#circle"
dur="5s"
begin="indefinite"
rotate="auto"
fill="freeze"
repeatCount="1"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear">
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
<!-- Backward motion animation -->
<animateMotion id="back"
xlink:href="#circle"
dur="5s"
begin="indefinite"
rotate="auto"
fill="freeze"
repeatCount="1"
keyPoints="0;1"
keyTimes="0;1"
calcMode="linear">
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
</svg>
Here is the reverse you want.
I modified the shape a little but you can modify it back again.
Hope that this is the solution to your problem.
you can make it freeze too if you want.
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="350" viewBox="0 0 500 350">
<g>
<path stroke="#000" stroke-miterlimit="10" fill="none" id="motionPath"
d="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28"/>
<rect id="circle" x="-25" y="-25" rx="15" ry="15" width="50" height="60" fill="black"
stroke="black" stroke-width="1" transform="translate(-25,-10)">
<animateMotion path="M404.88 470.22V79.69c-.2-19-14.21-33-17.52-36.19s-16.77-15.19-34.7-15.45h-1.11c-28.65.35-59.55-.12-319.52 0H28"
begin= "0s" dur="5s" repeatCount="1" rotate="auto" fill="freeze"
keyPoints="1;0" keyTimes="0;1" calcMode="linear"/>
</rect>
</g>
</svg>
Hope I am explaining this correctly.
I have two pulse animations that are running along two different paths. I have played with the duration of the animations but I can seem to get them to "sync" at the point where they join so that only one circle goes to the top.
Is this possible?
Here is my code :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="300"
height="300"
viewBox="0 0 120 120"
version="1.1"
id="svg11"
sodipodi:docname="testAn.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
<metadata
id="metadata17">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs15" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="837"
id="namedview13"
showgrid="false"
inkscape:zoom="2.4857496"
inkscape:cx="201.80878"
inkscape:cy="187.12268"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg11" />
<g
id="g140"
transform="translate(35.662173,31.252367)">
<path
id="theMotionPath-sa"
d="M 10,10 V 40 H 52"
inkscape:connector-curvature="0"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle
id="circle119"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="1;0"
repeatCount="indefinite"
dur="3s"
begin="0s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle121"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="1;0"
repeatCount="indefinite"
dur="3s"
begin="1s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle123"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="1;0"
repeatCount="indefinite"
dur="3s"
begin="2s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle125"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="1;0"
repeatCount="indefinite"
dur="3s"
begin="3s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
</g>
<g
id="g57"
transform="translate(15.662173,36.252367)">
<path
id="theMotionPath-ch"
d="M 10,35 H 30 V 3"
inkscape:connector-curvature="0"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle
id="circle36"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="0;1"
repeatCount="indefinite"
dur="3s"
begin="0s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle38"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="0;1"
repeatCount="indefinite"
dur="3s"
begin="1s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle40"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="0;1"
repeatCount="indefinite"
dur="3s"
begin="2s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle42"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;1"
calcMode="linear"
keyPoints="0;1"
repeatCount="indefinite"
dur="3s"
begin="3s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
</g>
</svg>
Hope this makes sense!
Just building from #ccprog's answer, you can also use keyTimes and keyPoints to change the speed of the animation in the horizontal and vertical parts. You need to realise a couple of things:
First, you need to #theMotionPath-ch's d attribute to d="M 10,35 H 30 V 5", so that it gets to the same vertical point as the other path
Then, calculate the point where each path changes relative to its length: 0.4167 in #theMotionPath-sa and 0.4 in #theMotionPath-ch.
Finally, add an additional keyTime (I set it at 0.6, meaning at the 0.6 * 3s = 1.8s and the corresponding keyPoint from the previous step.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="300"
height="300"
viewBox="0 0 120 120"
version="1.1"
id="svg11"
sodipodi:docname="testAn.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
<metadata
id="metadata17">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs15" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="837"
id="namedview13"
showgrid="false"
inkscape:zoom="2.4857496"
inkscape:cx="201.80878"
inkscape:cy="187.12268"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg11" />
<g
id="g140"
transform="translate(35.662173,31.252367)">
<path
id="theMotionPath-sa"
d="M 10,10 V 40 H 52"
inkscape:connector-curvature="0"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle
id="circle119"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="1;0.4167;0"
repeatCount="indefinite"
dur="3s"
begin="0s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle121"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="1;0.4167;0"
repeatCount="indefinite"
dur="3s"
begin="1s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle123"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="1;0.4167;0"
repeatCount="indefinite"
dur="3s"
begin="2s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
<circle
id="circle125"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="1;0.4167;0"
repeatCount="indefinite"
dur="3s"
begin="3s">
<mpath
xlink:href="#theMotionPath-sa" />
</animateMotion>
</circle>
</g>
<g
id="g57"
transform="translate(15.662173,36.252367)">
<path
id="theMotionPath-ch"
d="M 10,35 H 30 V 5"
inkscape:connector-curvature="0"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle
id="circle36"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="0;0.40;1"
repeatCount="indefinite"
dur="3s"
begin="0s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle38"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="0;0.40;1"
repeatCount="indefinite"
dur="3s"
begin="1s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle40"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="0;0.40;1"
repeatCount="indefinite"
dur="3s"
begin="2s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
<circle
id="circle42"
r="2"
cy="0"
cx="0"
style="fill:#4789d0">
<!-- Define the motion path animation -->
<animateMotion
keyTimes="0;0.6;1"
calcMode="linear"
keyPoints="0;0.40;1"
repeatCount="indefinite"
dur="3s"
begin="3s">
<mpath
xlink:href="#theMotionPath-ch" />
</animateMotion>
</circle>
</g>
</svg>
After Looking at the examples it occurred to me that as long as the time of each animation stays the same and the interval at witch each animation run also stays the same then the lengths of the paths would not make any difference. All that will change is the speed of the animation.
Here is another exsample:
<svg width="300" height="300" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<!-- Edit This Path . -->
<path d="M 10,60 H 60 " stroke="#4789D0" stroke-width="1" fill="none" id="M-Right"/>
<path d="M 60,60 v -50 " stroke="#4789D0" stroke-width="1" fill="none" id="M-Up"/>
<path d="M 60,60 h 30" stroke="#4789D0" stroke-width="1" fill="none" id="M-Left"/>
<!-- Here is a green circle which will be moved along the motion path. -->
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="c1" begin='0s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Right"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="c2" begin='1s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Right"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="c3" begin='2s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Right"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="c4" begin='3s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Right"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="vc1" begin='c1.begin+3s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Up"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="vc2" begin='c2.begin+3s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Up"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="vc3" begin='c3.begin+3s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Up"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="vc4" begin='c4.begin+3s' dur='3s' repeatCount="indefinite" keyPoints="0;1" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Up"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="lc1" begin='c1.begin+0s' dur='3s' repeatCount="indefinite" keyPoints="1;0" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Left"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="lc2" begin='c2.begin+0s' dur='3s' repeatCount="indefinite" keyPoints="1;0" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Left"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="lc3" begin='c3.begin+0s' dur='3s' repeatCount="indefinite" keyPoints="1;0" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Left"/> </animateMotion>
</circle>
<circle cx="" cy="" r="2" fill="#4789D0" >
<!-- Define the motion path animation -->
<animateMotion id="lc4" begin='c4.begin+0s' dur='3s' repeatCount="indefinite" keyPoints="1;0" calcMode="linear" keyTimes="0;1"> <mpath xlink:href="#M-Left"/> </animateMotion>
</circle>
</svg>
You can edit the length but it will still stay in sync
Your main problem is that your dots are moving at different speeds, because the motion paths have different lengths. I think the most sensible solution is to define three separate motion paths, one for the left and right leg, and one for the upward leg. Then, time your animations such that the animations end at the central point at the same time for the left and right leg, and that they start at that same time for the upward leg.
This requires carefull planing of motion speeds and timing, and implicitely knowledge about path lengths. To make it easier to follow the reasoning, I've resolved the transforms from your SVG and repositioned and resized the paths a bit. Also, I have reversed the direction of the right leg so that you do not need to reverse the direction of the motion - sparing you to spell out the keyPoints/keyTimes attributes.
Here is what I got:
id d length dur
theMotionPath-left M 25 70 H 45 20 1.5s
theMotionPath-right M 85 70 H 45 40 3s
theMotionPath-up M 45 70 V 40 30 2s
The speeds in the different legs do match up perfectly, only approximately. But that is no deterrent, all that matters is that all dots reach/leave the central point on every full second.
The left leg has a problem, though. repeatCount="indefinite" means that the animation restarts immediately after finishing. A motion starting at 1.5s would end at 3s, then again after 4.5s, 6s, 7.5s,... Every second motion would not match up with the other parts as required.
What would solve this is an additional delay between each animation start: run for 1.5s, wait for 1.5s, run again etc.
This can be done with a trick. It is possible to bind the start of an animation to the end of another animation - or to a different run of the same animation. Leave out the repeatCount attribute, but define a list of begin times:
<animateMotion id="leftDot1" dur="1.5s" begin="1.5s;leftDot1.end + 1.5s">
<mpath xlink:href="#theMotionPath-left" />
</animateMotion>
After 1.5s, the animation is started for the first time, and additionally each time the animation with the id leftDot1 (which is itself) ends, it waits for 1.5s and then starts again.
<svg width="300" height="300" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path id="theMotionPath-left" d="M 25 70 H 45"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle r="2" cy="0" cx="0" style="fill:#4789d0">
<animateMotion id="leftDot1" dur="1.5s" begin="1.5s;leftDot1.end + 1.5s">
<mpath xlink:href="#theMotionPath-left" />
</animateMotion>
</circle>
<circle r="2" cy="0" cx="0" style="fill:#4789d0">
<animateMotion id="leftDot2" dur="1.5s" begin="2.5s;leftDot2.end + 1.5s">
<mpath xlink:href="#theMotionPath-left" />
</animateMotion>
</circle>
<circle r="2" cy="0" cx="0" style="fill:#4789d0">
<animateMotion id="leftDot3" dur="1.5s" begin="3.5s;leftDot3.end + 1.5s">
<mpath xlink:href="#theMotionPath-left" />
</animateMotion>
</circle>
</g>
<g>
<path id="theMotionPath-right" d="M 85 70 H 45"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle r="2" cy="0" cx="0" style="fill:#4789d0">
<animateMotion repeatCount="indefinite" dur="3s" begin="0s">
<mpath xlink:href="#theMotionPath-right" />
</animateMotion>
</circle>
<circle r="2" cy="0" cx="0" style="fill:#4789d0">
<animateMotion repeatCount="indefinite" dur="3s" begin="1s">
<mpath xlink:href="#theMotionPath-right" />
</animateMotion>
</circle>
<circle r="2" cy="0" cx="0" style="fill:#4789d0">
<animateMotion repeatCount="indefinite" dur="3s" begin="2s">
<mpath xlink:href="#theMotionPath-right" />
</animateMotion>
</circle>
</g>
<g>
<path id="theMotionPath-up" d="M 45 70 V 40"
style="fill:none;stroke:#4789d0;stroke-width:1" />
<circle r="2" cy="0" cx="0" style="fill:#4789d0">
<animateMotion repeatCount="indefinite" dur="2s" begin="3s">
<mpath xlink:href="#theMotionPath-up" />
</animateMotion>
</circle>
<circle r="2" cy="0" cx="0" style="fill:#4789d0">
<animateMotion repeatCount="indefinite" dur="2s" begin="4s">
<mpath xlink:href="#theMotionPath-up" />
</animateMotion>
</circle>
</g>
</svg>
I want to apply an easing to an animateMotion tag.
I'm confused about which attributes are relevant to animate a shape: if I understood well calcMode="spline" is required, along with the definition of keyTimes and keySplines; but what about the use of keySplines and values?
However, I tried to insert timings into my animation, but something went wrong:
<g style="transform-origin:50%;transform: rotate(180deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze" calcMode="spline" keyPoints="0.25;0.50;0.75;1" keyTimes="0;0.25;0.75;1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
My aim would be to apply to this example timings to draw from tools like this one
You are specifying calcMode="spline", but you haven't provided a keySplines attribute.
The value for keySplines can just be copied from your spline editing tool.
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="2.2s" repeatCount="once" fill="freeze"
calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
Full demo (I've slowed down the animation so you can see it is working).
<!DOCTYPE HTML>
<html>
<body>
<?xml version="1.0"?>
<svg width="400" height="400" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" style="background:aquamarine">
<style>
path {
animation-name:animateDash;
animation-duration:5s;
animation-iteration-count:once;
animation-fill-mode:forwards;
}
#keyframes animateDash {
from{stroke-dasharray:0,2305}
to {stroke-dasharray:2305,0}
}
</style>
<g style="transform-origin:50%;transform: rotate(180deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="2.2s" repeatCount="once" fill="freeze"
calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
<g style="transform-origin:50%;transform: rotate(60deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
<g style="transform-origin:50%;transform: rotate(-60deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="blue" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
</svg>
</body>
</html>
This is how I would do it although I don't use animateMotion.
Since your path is made up of lines you can define the values for <animateTransform> like this:
Your path's d="M100, 100 L100, 47 146, 73"
the animation's values="100, 100; 100, 47;146, 73"
This is a working example:
<svg width="400" height="400" viewBox="0 0 200 200" style="background:aquamarine">
<path id="theMotionPath" d="M100, 100 L100, 47 146, 73" stroke-width="5px" stroke="antiquewhite" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle r="5" >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="100,100; 100,47; 146,73"
keySplines= ".5 0 .5 1; 0 .75 .25 1";
calcMode="spline"
dur="4s"
repeatCount="indefinite" />
</circle>
</svg>
The keySplines length must be equal to the length of the values - 1. In this case values.length = 3 thus keySplines.length = 2, i.e: the movement from the first to the second value is defined by the first key spline; the movement from the second to the third value is defined by the second key spline. Every value of the keySplines is defining the 2 control points of a Bézier curve.
I have my SVG file with various animations written by me, i can't able to zoom image in image tag(I need it as an animation). In SVG circle tag works perfect for zoom in and zoom out animation. please anyone help me by giving your solution in pure SVG.
<image id="img_id" x="200" y="200" width="50" height="50" preserveAspectRatio="none" xlink:href="my svg image as vector code"/>
<animateTransform
xlink:href="#img_id"
begin="1s" values="-150,-150; 0,0" dur="0.5s"
type="translate"
attributeName="transform"
fill="freeze" additive="sum"/>
<animateTransform
xlink:href="#img_id"
begin="1s" values="2; 1" dur="0.5s"
type="scale" attributeName="transform"
fill="freeze" additive="sum"/>
My SVG code in JSfiddle!
Adjust the translate animation for the image till it zooms from its centre. I.e.
<svg version="1.1" width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<circle id="trigger" class="button" cx="150" cy="150" r="25" />
<animateTransform begin="1s" values="-150,-150; 0,0" dur="0.5s"
type="translate"
attributeName="transform"
fill="freeze"
additive="sum"/>
<animateTransform begin="1s" values="2; 1" dur="0.5s"
type="scale"
attributeName="transform"
fill="freeze" additive="sum"/>
</g>
<image id="img_id" x="213" y="233" width="50" height="50" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
<animateTransform
xlink:href="#img_id"
begin="1s" values="-238,-258; 0,0" dur="0.5s"
type="translate"
attributeName="transform"
fill="freeze" additive="sum"/>
<animateTransform
xlink:href="#img_id"
begin="1s" values="2; 1" dur="0.5s"
type="scale" attributeName="transform"
fill="freeze" additive="sum"/>
</svg>
So I'm looking to loop my svg animation sequence indefinitely. Heres my code:
<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="4750ms;" dur="0.5s" fill="freeze"/>
<animateTransform xlink:href="#tri" id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="8000ms;" dur="0.5s" fill="freeze"/>
<animateTransform xlink:href="#tri" id="anim3" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="9750ms" dur="0.5s" fill="freeze"/>
<animateTransform xlink:href="#tri" id="anim4" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="13000ms" dur="0.5s" fill="freeze"/>
After a quick google I discovered what I thought I was looking for in this SO answer, alas it was close but didn't fulfil what I needed totally.
See the difference with problem and theres is that I have specific times I want the animation to take effect (4750ms, 8000ms, 9750ms and 13000ms), whereas in the SO answer there was only a set time.
Another google brought me to this answer but it seemed the OP wasn't fussed about timings.
Sounds like you want some values and key times for those values. E.g.
<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" values="0;0;180;180;0;0;180;180;0" keyTimes="0;4750ms;5250ms;8000ms;8500ms;9750ms;10250ms;13000ms;13500ms" fill="freeze"/>
How about this? How to make SVG Loop Animation?
Sample code:
<svg>
<rect>
<animate id="o1" begin="0;o1.end" dur="10s"
attributeName="visibility" from="hide" to="hide"/>
</rect>
<circle fill="orange" cx="-50" cy="100" r="20">
<animate begin="o1.begin"
attributeName="cx" from="250" to="50" dur="5.05s"/>
</circle>
<circle fill="blue" cx="150" cy="100" r="50" />
<circle fill="orange" cx="-50" cy="100" r="20">
<animate begin="o1.begin+5s"
attributeName="cx" from="50" to="250" dur="5.05s"/>
</circle>
</svg>