Login/Register
How to add ease-out effect to SVG <animateMotion>
Asked Answered
csssvgsmil
L

1

8

I am animating a SVG with the help of SMIL. All works as expected in chrome except that I want to add an "ease-out" effect to the animatemotion tag. Right now the plane moves along the path in a linear fashion. What I want is that the animation has a slow stop at the end just like how CSS3 ease-out effect.

Here is the SVG code.

<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px"
 y="0px"
 viewBox="0 0 500 700">
<style type="text/css">
    .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<animateMotion
        id="1"
        xlink:href="#plane"
        dur="2s"
        path="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31"
        fill="freeze"
/>

<g>
    <path d="M113.2,586.8c-2.3-1.3-4.8-0.5-6.5,1.9c-0.9,1.4-2,2.7-2.8,4.1c-0.1,0.2-0.2,0.3-0.3,0.4c-0.2,0.5-0.5,1-0.8,1.4
    c3.9,0,7.8,0,11.7,0c0.1-0.2,0.3-0.4,0.4-0.6c0,0,0.1,0,0.1,0c0.1-0.3,0.2-0.6,0.3-0.8C116.3,590.6,115.5,588.1,113.2,586.8z"/>
    <g id="plane" transform="scale(0.5) translate(-263.9, -167.6)">
        <g>
            <animateTransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              from="0 343.9 167.6"
                              to="-360 343.9 167.6"
                              dur="2s"
                              calcMode="spline"
                              keySplines="0.6 0.3 0.4 0.335"
                              keyTimes="0;1"


            />
                <path d="M263.9,167.6c7.6-1,14.9-2,22.3-2.8c2.3-0.2,3.6-1.2,4.8-3.1c2.6-4.3,5.5-8.4,8.2-12.6c1.8-2.8,4.5-4,6.8-3.2
    c2.6,0.9,3.4,2.7,2.6,5.3c-1.1,3.4-2,6.8-3.1,10.5c5.3-0.7,10.3-1.4,15.4-2.1c7.5-1,14.9-2.1,22.4-3c1.4-0.2,2.3-0.7,3.1-2
    c7.2-12.8,14.7-25.4,23.9-36.9c2.7-3.3,5.8-6.3,8.9-9.3c1-1,2.4-1.7,3.7-2.3c4.1-1.9,8.1,0.1,8.4,4.6c0.2,3.4-0.2,7-1.1,10.3
    c-2.7,10.2-7.3,19.5-12.1,28.8c-3.1,6-6.4,11.9-9.5,17.8c-0.3,0.6-0.5,1.6-0.3,2.1c5,11.7,10,23.4,15.1,35.2
    c0.1,0.2,0.2,0.3,0.5,0.7c2.5-2.7,4.9-5.2,7.3-7.9c1.7-1.9,3-2.2,5.2-1c4,2.1,4.7,4.7,2.5,8.6c-2.7,4.8-5.5,9.7-8.2,14.5
    c-0.3,0.6-0.6,1.5-0.3,2c3.5,7.7,7.2,15.3,11,23.3c2-2.6,3.7-5.1,5.5-7.4c1.8-2.4,4.1-3,6.6-1.8c3.1,1.5,4,3.8,2.5,7
    c-2.6,5.4-5.2,10.8-7.8,16.3c-0.4,0.8-0.4,2-0.1,2.7c3.3,8,6.7,16,10.2,23.9c1.3,3,1.3,5.8-0.5,8.7c-2.2,3.6-4.2,7.3-6.4,11.2
    c-0.5-0.7-1-1.2-1.3-1.7c-13.4-17.9-26.8-35.8-40.1-53.7c-4.5-6.1-8.8-12.3-14.6-17.2c-3.2-2.7-6.7-5.2-10.3-7.4
    c-4-2.4-7.8-1.6-11,1.8c-1.3,1.3-2.4,2.9-3.3,4.4c-9.2,16.2-19.6,31.7-30.6,46.8c-0.9,1.3-1.1,2.2-0.5,3.7
    c4.9,11.1,9.7,22.3,14.4,33.5c0.4,0.9,0.4,2.2,0,3.1c-1.6,4.5-3.4,8.9-5.1,13.3c-0.2,0.6-0.5,1.2-0.9,2
    c-9.4-10.2-18.7-20.2-28.2-30.5c-2.7,2.9-5.1,5.6-7.6,8.2c-0.1-0.1-0.2-0.1-0.4-0.2c1.1-3.5,2.1-7,3.2-10.7c-13.9-3-27.8-6-42-9
    c1.2-1.4,2.2-2.5,3.2-3.6c2.2-2.5,4.6-4.9,6.7-7.6c1.6-2,3.5-2.9,6-3.2c11.5-1.4,23.1-3.1,34.6-4.6c1.3-0.2,1.9-0.7,2.5-1.8
    c7.7-16.2,15.5-32.3,23.2-48.4c0.7-1.5,1.6-2.9,2.4-4.3c3.3-5.9,2-10.5-3.9-13.8c-6.6-3.8-13.7-6.1-21.1-7
    c-11.3-1.5-22.7-2.5-34.1-3.6c-15-1.5-30-2.8-45-4.2c-0.5,0-1-0.1-1.9-0.3c0.4-0.7,0.7-1.3,1-1.9c1.7-3,3.5-5.9,5-9
    c1.7-3.4,4-5.2,8.1-5.4c6.3-0.3,12.6-1.6,18.9-2.5c2.5-0.4,5.4-0.1,7.3-1.3c2-1.4,3.1-4.2,4.6-6.4c2.1-3.2,4.2-6.4,6.3-9.6
    c1.7-2.6,3.5-3.3,6-2.3c2.9,1.2,4.2,3.3,3.6,6.2C265.8,160.6,264.8,163.9,263.9,167.6z"/>
        </g>
    </g>
    <path d="M56.6,331.6c-3.4,0.1-6.1-2.5-5.2-5.4c1.1-3.9,2.9-7.6,4.7-11.2c1.1-2,4-2.3,6-1.2c2.1,1.2,3,3.7,2.1,6
    c-1.2,3-2.5,6.1-3.9,9.1C59.6,330.6,58.1,331.5,56.6,331.6z"/>
    <path d="M141.2,322.7c0,2.3-1.4,4.2-3.4,4.8c-2,0.6-4.2-0.1-5.4-1.9c-1.8-2.8-3.5-5.6-5.2-8.4c-1.2-2.1-0.8-4.6,1-6.1
    c1.8-1.5,4.8-1.8,6.1,0c2.5,3.4,4.5,7.1,6.7,10.6C141.2,322,141.2,322.5,141.2,322.7z"/>
    <path d="M236.3,324.9c0.9-1.2,1.5-2.8,2.6-3.7c2.7-1.9,5.7-3.6,8.6-5.2c2.3-1.3,5-0.4,6.4,1.8c1.3,2.2,0.8,5-1.4,6.5
    c-2.9,1.9-5.8,3.7-8.8,5.2C240.5,331.1,236.8,328.7,236.3,324.9z"/>
    <path d="M130.7,543.1c3.2,0,5.6,2.9,4.7,6.1c-1,3.3-2.1,6.5-3.4,9.7c-1,2.5-3.7,3.5-6.1,2.6c-2.4-0.9-3.7-3.4-2.9-6
    c1-3.1,2.1-6.3,3.3-9.3C127,544.2,128.7,543.1,130.7,543.1z"/>
    <path d="M96.3,301.1c-1.6,0.2-3.4,0.4-5.2,0.6c-2.9,0.4-5.2-1.2-5.7-3.9c-0.5-2.6,1.1-5.2,4-5.6c3.4-0.4,6.9-0.7,10.4-0.6
    c2.9,0,4.8,2.4,4.6,5.1c-0.2,2.8-2.3,4.6-5.2,4.5C98.3,301.3,97.4,301.2,96.3,301.1z"/>
    <path d="M202.1,355.8c-2.4,0-4.3-1.3-5-3.1c-0.7-1.9-0.2-4.2,1.4-5.4c2.8-2.1,5.7-4,8.7-5.9c2.1-1.3,4.7-0.6,6.2,1.4
    c1.4,2,1.3,4.8-0.6,6.3c-2.9,2.2-6.1,4.2-9.2,6.2C203.2,355.7,202.5,355.7,202.1,355.8z"/>
    <path d="M80.5,365c0,3.8-3.5,6.3-6.5,4.9c-3.3-1.6-6.5-3.6-9.5-5.7c-2.1-1.5-2.3-4.3-0.9-6.4c1.5-2.1,4.2-2.7,6.5-1.4
    c2.7,1.6,5.3,3.2,8,4.8C79.6,362.2,80.4,363.6,80.5,365z"/>
    <path d="M153.8,370.5c0.8-2.7,2.6-4.1,5.3-4.7c2.3-0.5,4.5-1.5,6.8-2.2c2.9-1,5.6,0.2,6.5,2.8c0.9,2.7-0.3,5.2-3.2,6.3
    c-2.5,0.9-5.1,1.8-7.7,2.6C157,376.7,154.5,375.1,153.8,370.5L153.8,370.5z"/>
    <path d="M140.4,515.8c-3,0-5.2-2.6-4.7-5.6c0.5-3.3,1.2-6.5,1.9-9.7c0.5-2.5,2.9-4,5.3-3.7c2.5,0.4,4.5,2.7,4.1,5.2
    c-0.5,3.5-1.2,7-2.1,10.5C144.5,514.5,142.5,515.8,140.4,515.8z"/>
    <path d="M153.9,370.4c-0.9,0.8-1.7,1.9-2.7,2.4c-2.8,1.4-6.1-0.3-6.7-3.4c-0.6-3.3-1.1-6.6-1.5-10c-0.3-2.5,1.5-4.7,3.9-5.2
    c2.4-0.4,5,0.9,5.4,3.3C153,361.9,153.3,366.2,153.9,370.4L153.9,370.4z"/>
    <path d="M143.1,463c0.3-2.9,0.6-6.1,1.1-9.4c0.4-2.7,2.8-4.4,5.4-4.1c2.5,0.3,4.4,2.7,4.2,5.3c-0.3,3.2-0.7,6.3-1.1,9.4
    c-0.4,2.9-2.6,4.6-5.4,4.3C144.8,468.3,143,466.2,143.1,463z"/>
    <path d="M118,381.4c-2-0.2-4.1-0.3-6.1-0.6c-3.1-0.3-4.9-2.5-4.6-5.3c0.2-2.7,2.4-4.5,5.4-4.3c3,0.2,6.1,0.4,9.1,0.6
    c2.8,0.2,4.7,2.3,4.6,5c-0.1,2.6-2.1,4.6-4.9,4.7C120.2,381.5,119.1,381.4,118,381.4C118,381.4,118,381.4,118,381.4z"/>
    <path d="M151.4,421L151.4,421c-2.7,0-4.9-2.2-4.9-4.9v-9.2c0-2.7,2.2-4.9,4.9-4.9h0c2.7,0,4.9,2.2,4.9,4.9v9.2
    C156.2,418.8,154.1,421,151.4,421z"/>
</g>
<path class="st0" d="M104,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31"/>
Leander answered 26/2, 2017 at 17:50 Comment(5)
keyTimes and keySplines on animateMotion tag? – Leander
Ahh, I was looking at the animateTransform element. For animateMotion you'd add keyPoints and keyTimes. – Stifling
aha! it works! thanks. – Leander
@RobertLongson: Shouldn't you add that as an answer? Or Ali should atleast self answer in-order to not leave this question unanswered. It's a good question and should have an answer in my opinion :) – Diplomatic
Better if Ali writes up what he did. – Stifling
M
4

Most of the question author's application code draws a path for an airplane in the form of a bunch of sausages.

This code can be as simple as possible by applying stroke-dasharray andstroke-linecap = "round" 

<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px"
 y="0px"
 width="100%" height="100%" viewBox="0 0 500 700">
 
<g id="path_G" transform="translate(100 -200)">
 <path  stroke="skyblue" stroke-width="10" stroke-dasharray="15 25" stroke-linecap="round" fill="none" d="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31" />  

<path id="path_GL" stroke="skyblue" stroke-width="1"   fill="none" d="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31" />  
</g>
</svg>

Instead of two animations, animateMotion andanimateTransform, we’ll use the same animation

  <animate
          attributeName="startOffset"
          dur="16s"
          repeatCount="indefinite"
          values="0%;120%"
          calcMode="spline"
          keySplines=" 0.185,0.675,0,0.995"/>

To make CSS3 ease-out effect we use a bezier curve generator 

<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px"
 y="0px"
 width="50%" height="50%" viewBox="0 0 500 700">
 
<g id="path_G" transform="translate(100 -250)">
 <path  stroke="skyblue" stroke-width="10" stroke-dasharray="15 25" stroke-linecap="round" fill="none" d="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31" />  

<path id="path_GL" stroke="skyblue" stroke-width="1"   fill="none" d="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31" />  

<text font-size="64"  font-family="Times New Roman" fill="dodgerblue" >
  <textPath id="result"    xlink:href="#path_GL">
    <tspan dx="0" > &#9992; </tspan> 
        <animate
		  attributeName="startOffset"
		  dur="20s"
		  repeatCount="indefinite"
		  values="0%;120%"
		  calcMode="spline"
		  keySplines=" 0.185,0.675,0,0.995"/> 
  </textPath>
</text>		
</g>
     
</svg>
Melancholy answered 10/3, 2019 at 20:44 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.