SVG Fade in Animation - PullRequest
Новая
       20

SVG Fade in Animation

3 голосов
/ 01 мая 2019

Привет, у меня есть SVG, который сложен в 5 фигур. Я хочу исчезнуть в каждой стрелке снизу вверх. Когда исчезнет верхняя стрелка, я хочу, чтобы первая исчезла, затем вторая и т. Д., А затем снова запустите анимацию, потушив каждую стрелку.

Вот кодовое перо SVG-кода: https://codepen.io/anon/pen/gyJZEy

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
    <defs>
        <style>.hg{fill:#ee2330;opacity:0}</style>
    </defs>
    <g id="Layer_2" data-name="Layer 2">
        <g id="Layer_1-2" data-name="Layer 1">
            <rect>
                <animate id="hg0" begin="0;hg0.end" dur="8s"
                attributeName="visibility" from="hide" to="hide"/>
            </rect>
            <path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
                <animate id="hg1" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin;hg0.end" repeatCount="indefinite"/>
            </path>
            <path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
                <animate id="hg2" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+1s;hg0.end+1s" repeatCount="indefinite"/>
            </path>
            <path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
                <animate id="hg3" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+2s;hg0.end+2s" repeatCount="indefinite"/>
            </path>
            <path class="hg" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z">
                <animate id="hg4" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+3s;hg0.end+3s" repeatCount="indefinite"/>
            </path>
            <path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z">
                <animate id="hg5" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+4s;hg0.end+4s" repeatCount="indefinite"/>
            </path>
        </g>
    </g>
</svg>

Ответы [ 2 ]

3 голосов
/ 01 мая 2019

Самый простой подход - использовать атрибут keyTimes для управления временем появления и затухания.

У нас есть пять стрел. Первому из них требуется одна секунда для появления, затем ожидание появления остальных четырех. Затем требуется еще одна секунда для исчезновения, и ожидание, пока остальные четыре сделают то же самое.

Это означает, что анимация занимает в общей сложности 10 секунд для каждой стрелки. И в этой анимации пять ключевых моментов:

  • при 0 с, значение непрозрачности 0
  • через 1 с, значение непрозрачности - 1
  • при 5 с, значение непрозрачности - 1
  • при 6 с, значение непрозрачности 0
  • при 10 с, значение непрозрачности 0

Атрибут keyTimes работает в сочетании с атрибутом values. Он указывает, в какое время в анимации непрозрачность должна быть при каждом значении. Таким образом, он должен иметь то же количество значений, что и в атрибуте values. Еще одна вещь, которую вам нужно знать о keyTimes значениях, это то, что значения времени должны быть в долях от длительности. Таким образом, во второй раз выше (1 с) нам нужно использовать 0,1 (1 с 10 с).

Таким образом, наш атрибут values должен быть "0; 1; 1; 0; 0", а наш атрибут keyTimes будет "0; 0.1; 0.5; 0.6; 1".

Затем, чтобы сместить начало анимации каждой стрелки, мы просто используем в шахматном порядке begin раз. 

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
    <defs>
        <style>.hg{fill:#ee2330;opacity:0}</style>
    </defs>
    <g id="Layer_2" data-name="Layer 2">
        <g id="Layer_1-2" data-name="Layer 1">
            <path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
                <animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite"/>
            </path>
            <path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
                <animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="1s"/>
            </path>
            <path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
                <animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="2s"/>
            </path>
            <path class="hg" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z">
                <animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="3s"/>
            </path>
            <path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z">
                <animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="4s"/>
            </path>
        </g>
    </g>
</svg>
1 голос
/ 01 мая 2019

Здесь @keyfrmes + animation-delay версия: 

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
  <style>
    path {
      fill: red; opacity: 0;
      animation: 5.5s opacity infinite;
    }
    @keyframes opacity {
      15% {opacity: 0} 
      35% {opacity: 1}
      65% {opacity: 1} 
      85% {opacity: 0}
    }
    #hg2 {animation-delay: 0.5s}
    #hg3 {animation-delay: 1.0s}
    #hg4 {animation-delay: 1.5s}
    #hg5 {animation-delay: 2.0s}
  </style>
  <path id="hg1" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z"></path>
  <path id="hg2" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z"></path>
  <path id="hg3" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z"></path>
  <path id="hg4" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z"></path>
  <path id="hg5" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z"></path>
</svg>
...