Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add ease-out effect to SVG <animateMotion>

Tags:

css

svg

smil

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"/>
like image 792
Ali Farooq Avatar asked Feb 26 '17 17:02

Ali Farooq


People also ask

How do you animate elements in SVG?

The <animate> SVG element is used to animate an attribute or property of an element over time. It's normally inserted inside the element which we want to animate. Attributes: Animation Attributes: Attributes used to give animation effects, exp timing attributes, event attributes, and value attributes, etc.

Is it possible to animate SVG?

Overview. SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification; these elements include: <animate></animate> – which allows you to animate scalar attributes and properties over a period of time.

How do I animate a path in SVG?

To animate this path as if it's being drawn gradually and smoothly on the screen, you have to set the dash (and gap) lengths, using the stroke-dasharray attribute, equal to the path length. This is so that the length of each dash and gap in the dashed curve is equal to the length of the entire path.


1 Answers

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>
like image 108
Alexandr_TT Avatar answered Oct 21 '22 09:10

Alexandr_TT