Ускорение и замедление SVG-анимации с помощью animateTransform и calcMode spline (замедление) - PullRequest
Новая
       36

Ускорение и замедление SVG-анимации с помощью animateTransform и calcMode spline (замедление)

0 голосов
/ 21 декабря 2018

Я работаю над SVG-анимацией (загрузчик-иконка).Все отлично работает, кроме ускорения и замедления моих кругов, я хочу, чтобы они ускорялись быстрее, а затем медленно останавливались.

Вот мой код: 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
 <g>        
        <circle fill="#1FA0DB" cx="30.5" cy="69.5" r="12.5">

            <animateTransform attributeName="transform"
                                attributeType="XML"
                                type="translate"
                                dur="1s"
                                values="0,15;22,-5;0,15"
                                calcMode="spline"
                                keySplines="0 0.75 0.25 1"
                                repeatCount="indefinite"
                              />

        </circle>
        <circle fill="#219C8A" cx="57" cy="18" r="7">

            <animateTransform attributeName="transform"
                                attributeType="XML"
                                type="translate"
                                dur="1s"
                                values="0,15;-10,42;0,15"
                                repeatCount="indefinite"
                              />
            <animate attributeName="fill" values="#219C8A;#1FA0DB;##219C8A" dur="1s" repeatCount="indefinite" />
        </circle>
        <circle fill="#E8C12D" cx="89" cy="52" r="9">

            <animateTransform attributeName="transform"
                                attributeType="XML"
                                type="translate"
                                dur="1s"
                                values="0,15;-35,5;0,15"
                                repeatCount="indefinite"
                              />
            <animate attributeName="fill" values="#E8C12D;#1FA0DB;#E8C12D" dur="1s" repeatCount="indefinite" />
        </circle>
         <animateTransform attributeName="transform"
                        attributeType="XML"
                        type="rotate"
                        from="0 50 50"
                        to="360 50 50"
                        dur="10s"
                        repeatCount="indefinite"/> 
</g>

1 Ответ

0 голосов
/ 22 декабря 2018

Это пример, где я использую keyTimes.Количество значений для keyTimes должно совпадать с количеством значений.keyTimes идут от 0 до 1, и каждое значение больше, чем последнее, поскольку они представляют моменты времени.Я надеюсь, что это помогает.

svg{width:90vh;border:1px solid}
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" >
 <g>        
        <circle fill="#1FA0DB" cx="30.5" cy="69.5" r="12.5">

          <animateTransform attributeType="XML" 
                            attributeName="transform" 
                            type="translate" 
                            dur="2s" 
                            values="0,15;22,-5;0,15"
                            begin="0s" 
                            calcMode="linear" 
                            keyTimes="0; 0.3; 1" 
                            repeatCount="indefinite"/>

        </circle>

</g>  
</svg>

Я думаю, вы можете использовать keyTimes, только если calcMode="linear"

...