Как добавить анимацию для любой иконки в унике

Wallet · 11 сен 2023

Вступление

Начнём с того, что за анимацию иконки в лычке отвечает технология SMIL. Это достаточно старая и можно сказать устаревшая технология, которую почти не используют, но только она подходит для уника. Именно поэтому большинство анимированных иконок с интернета просто не работают. Из-за чего многие думают, что анимация вовсе не доступна или запрещена, но это не так

(P.S. Сервера не нагружаются, вся анимация компилируется в вашем браузере)

Те, кто хочет подробнее погрузиться в тему данной технологии идут бороздить гугл, а ниже я оставляю заготовленные шаблоны, которые подойдут для анимирования почти любой иконки и краткий гайд как эти шаблоны устанавливать.

Шаблоны
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
dur="4s" values="0;360" keyTimes="0;1"></animateTransform>

HTML
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"

dur="4s" values="0;360" keyTimes="0;1"></animateTransform>
<animateTransform values="1 1;-1 1; 1 1" dur="6s" repeatCount="indefinite" type="scale"
attributeName="transform"></animateTransform>

HTML
<animateTransform values="1 1;-1 1; 1 1" dur="6s" repeatCount="indefinite" type="scale"

attributeName="transform"></animateTransform>
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="4s"
values="-22 0;20 0" keyTimes="0;1"></animateTransform>

HTML
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="4s"

values="-22 0;20 0" keyTimes="0;1"></animateTransform>
<animateTransform keyTimes="0;1" values="1 1;3 3" dur="4s" repeatCount="indefinite" type="scale"
attributeName="transform"></animateTransform>

HTML
<animateTransform keyTimes="0;1" values="1 1;3 3" dur="4s" repeatCount="indefinite" type="scale"

 attributeName="transform"></animateTransform>
Как установить на свою иконку

Все иконки обернуты в теги <svg></svg>. Наша задача вставить код из шаблона перед закрытием тега.
Было:
<svg
width="120"
height="120"
viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<polygon points="60,30 90,90 30,90">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="indefinite" />
</polygon>
*СЮДА ВСТАВЛЯЕМ КОД ИЗ ШАБЛОНА*
</svg>

HTML
<svg

  width="120"

  height="120"

  viewBox="0 0 120 120"

  xmlns="http://www.w3.org/2000/svg">

  <polygon points="60,30 90,90 30,90">

    <animateTransform

      attributeName="transform"

      attributeType="XML"

      type="rotate"

      from="0 60 70"

      to="360 60 70"

      dur="10s"

      repeatCount="indefinite" />

  </polygon>

*СЮДА ВСТАВЛЯЕМ КОД ИЗ ШАБЛОНА*

</svg>
Стало:
<svg
width="120"
height="120"
viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<polygon points="60,30 90,90 30,90">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="indefinite" />
</polygon>
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"dur="4s" values="0;360" keyTimes="0;1"></animateTransform>
</svg>

HTML
<svg

  width="120"

  height="120"

  viewBox="0 0 120 120"

  xmlns="http://www.w3.org/2000/svg">

  <polygon points="60,30 90,90 30,90">

    <animateTransform

      attributeName="transform"

      attributeType="XML"

      type="rotate"

      from="0 60 70"

      to="360 60 70"

      dur="10s"

      repeatCount="indefinite" />

  </polygon>

<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"dur="4s" values="0;360" keyTimes="0;1"></animateTransform>

</svg>
Пак готовых иконок
Для самых ленивых я подготовил небольшой пак из уже готовых и настроенных иконок, остается только купить уник
<svg viewBox="0 0 600 315" height="315" width="700" xmlns="http://www.w3.org/2000/svg" fill="rgb(43, 173, 114)">[/LEFT]
<g clip-path="url(#clip0_1529_693)">
<path d="M235 315H688.333L653.333 268.333H466.667V46.6667H665L700 0H266.5L235 46.6667H420V268.333H266.5L235 315Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path d="M80 46.6667V0H312.833H381.333L348.333 46L202.5 269H418.003L395.25 315H103.833L138.333 269L283.73 46.6667H80Z"></path>
</g><path d="M0 0V315H141V268.333H46.6667V0H0Z"></path>
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="4s" values="-22 0;20 0" keyTimes="0;1"></animateTransform<defs><clipPath id="clip0_1529_693">
<rect height="315" width="700"></rect>
</clipPath>
</defs>
</svg>

HTML
 <svg viewBox="0 0 600 315" height="315" width="700" xmlns="http://www.w3.org/2000/svg" fill="rgb(43, 173, 114)">[/LEFT]

<g clip-path="url(#clip0_1529_693)">

<path d="M235 315H688.333L653.333 268.333H466.667V46.6667H665L700 0H266.5L235 46.6667H420V268.333H266.5L235 315Z" clip-rule="evenodd" fill-rule="evenodd"></path>

<path d="M80 46.6667V0H312.833H381.333L348.333 46L202.5 269H418.003L395.25 315H103.833L138.333 269L283.73 46.6667H80Z"></path>

</g><path d="M0 0V315H141V268.333H46.6667V0H0Z"></path>

<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="4s" values="-22 0;20 0" keyTimes="0;1"></animateTransform<defs><clipPath id="clip0_1529_693">

<rect height="315" width="700"></rect>

</clipPath>

</defs>

</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="none"><g clip-path="url(#clip0_123_378)"><path fill-rule="evenodd" clip-rule="evenodd" d="M70.1504 207.392C91.8146 224.992 116.842 235.022 143.533 235.022C183.225 235.022 219.257 212.775 245.995 176.542C234.706 161.247 221.764 148.436 207.575 138.751L184.794 150.124C189.69 157.741 192.542 166.809 192.542 176.542C192.542 203.577 170.604 225.491 143.533 225.491C122.499 225.491 104.566 212.252 97.6139 193.666L70.1504 207.38V207.392ZM126.67 179.168C127.216 182.721 128.88 186.025 131.459 188.604C134.656 191.8 139.005 193.595 143.533 193.583C152.957 193.583 160.598 185.953 160.598 176.542C160.598 171.919 158.756 167.724 155.761 164.646L126.682 179.168H126.67Z" fill="#2BAD72"/><path d="M76.3528 176.16L242.405 96.3367L205.91 20.4229L187.062 87.507L164.412 40.3758L145.552 107.46L122.902 60.3287L104.042 127.413L81.3916 80.2816L62.5319 147.366L39.8814 100.235L9.4707 208.318L50.9809 188.365L76.3528 176.172V176.16Z" fill="#2BAD72"/></g><defs><clipPath id="clip0_123_378"><rect width="236.512" height="214.598" fill="white" transform="translate(9.4707 20.4229)"/></clipPath></defs><animateTransform values="1 1;-1 1; 1 1" dur="6s" repeatCount="indefinite" type="scale" attributeName="transform"></animateTransform></svg

HTML
<svg xmlns="http://www.w3.org/2000/svg"  width="256" height="256" viewBox="0 0 256 256" fill="none"><g clip-path="url(#clip0_123_378)"><path fill-rule="evenodd" clip-rule="evenodd" d="M70.1504 207.392C91.8146 224.992 116.842 235.022 143.533 235.022C183.225 235.022 219.257 212.775 245.995 176.542C234.706 161.247 221.764 148.436 207.575 138.751L184.794 150.124C189.69 157.741 192.542 166.809 192.542 176.542C192.542 203.577 170.604 225.491 143.533 225.491C122.499 225.491 104.566 212.252 97.6139 193.666L70.1504 207.38V207.392ZM126.67 179.168C127.216 182.721 128.88 186.025 131.459 188.604C134.656 191.8 139.005 193.595 143.533 193.583C152.957 193.583 160.598 185.953 160.598 176.542C160.598 171.919 158.756 167.724 155.761 164.646L126.682 179.168H126.67Z" fill="#2BAD72"/><path d="M76.3528 176.16L242.405 96.3367L205.91 20.4229L187.062 87.507L164.412 40.3758L145.552 107.46L122.902 60.3287L104.042 127.413L81.3916 80.2816L62.5319 147.366L39.8814 100.235L9.4707 208.318L50.9809 188.365L76.3528 176.172V176.16Z" fill="#2BAD72"/></g><defs><clipPath id="clip0_123_378"><rect width="236.512" height="214.598" fill="white" transform="translate(9.4707 20.4229)"/></clipPath></defs><animateTransform values="1 1;-1 1; 1 1" dur="6s" repeatCount="indefinite" type="scale" attributeName="transform"></animateTransform></svg
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="rgb(255, 255, 255)" d="M20.322.75h1.176a1.75 1.75 0 0 1 1.75 1.749v1.177a10.75 10.75 0 0 1-2.925 7.374l-1.228 1.304a23.699 23.699 0 0 1-1.596 1.542v5.038c0 .615-.323 1.184-.85 1.5l-4.514 2.709a.75.75 0 0 1-1.12-.488l-.963-4.572a1.305 1.305 0 0 1-.14-.129L8.04 15.96l-1.994-1.873a1.305 1.305 0 0 1-.129-.14l-4.571-.963a.75.75 0 0 1-.49-1.12l2.71-4.514c.316-.527.885-.85 1.5-.85h5.037a23.668 23.668 0 0 1 1.542-1.594l1.304-1.23A10.753 10.753 0 0 1 20.321.75Zm-6.344 4.018v-.001l-1.304 1.23a22.275 22.275 0 0 0-3.255 3.851l-2.193 3.29l1.859 1.744a.545.545 0 0 1 .034.034l1.743 1.858l3.288-2.192a22.263 22.263 0 0 0 3.854-3.257l1.228-1.303a9.251 9.251 0 0 0 2.517-6.346V2.5a.25.25 0 0 0-.25-.25h-1.177a9.252 9.252 0 0 0-6.344 2.518ZM6.5 21c-1.209 1.209-3.901 1.445-4.743 1.49a.236.236 0 0 1-.18-.067a.236.236 0 0 1-.067-.18c.045-.842.281-3.534 1.49-4.743c.9-.9 2.6-.9 3.5 0c.9.9.9 2.6 0 3.5Zm-.592-8.588L8.17 9.017c.23-.346.47-.685.717-1.017H5.066a.25.25 0 0 0-.214.121l-2.167 3.612ZM16 15.112c-.333.248-.672.487-1.018.718l-3.393 2.262l.678 3.223l3.612-2.167a.25.25 0 0 0 .121-.214ZM17.5 8a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 17.5 8Z"></path>[/LEFT]
<animateTransform keyTimes="0;1" values="-22 20;20 -20" dur="4s" repeatCount="indefinite" type="translate" attributeName="transform"></animateTransform>
</svg>

HTML
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="rgb(255, 255, 255)" d="M20.322.75h1.176a1.75 1.75 0 0 1 1.75 1.749v1.177a10.75 10.75 0 0 1-2.925 7.374l-1.228 1.304a23.699 23.699 0 0 1-1.596 1.542v5.038c0 .615-.323 1.184-.85 1.5l-4.514 2.709a.75.75 0 0 1-1.12-.488l-.963-4.572a1.305 1.305 0 0 1-.14-.129L8.04 15.96l-1.994-1.873a1.305 1.305 0 0 1-.129-.14l-4.571-.963a.75.75 0 0 1-.49-1.12l2.71-4.514c.316-.527.885-.85 1.5-.85h5.037a23.668 23.668 0 0 1 1.542-1.594l1.304-1.23A10.753 10.753 0 0 1 20.321.75Zm-6.344 4.018v-.001l-1.304 1.23a22.275 22.275 0 0 0-3.255 3.851l-2.193 3.29l1.859 1.744a.545.545 0 0 1 .034.034l1.743 1.858l3.288-2.192a22.263 22.263 0 0 0 3.854-3.257l1.228-1.303a9.251 9.251 0 0 0 2.517-6.346V2.5a.25.25 0 0 0-.25-.25h-1.177a9.252 9.252 0 0 0-6.344 2.518ZM6.5 21c-1.209 1.209-3.901 1.445-4.743 1.49a.236.236 0 0 1-.18-.067a.236.236 0 0 1-.067-.18c.045-.842.281-3.534 1.49-4.743c.9-.9 2.6-.9 3.5 0c.9.9.9 2.6 0 3.5Zm-.592-8.588L8.17 9.017c.23-.346.47-.685.717-1.017H5.066a.25.25 0 0 0-.214.121l-2.167 3.612ZM16 15.112c-.333.248-.672.487-1.018.718l-3.393 2.262l.678 3.223l3.612-2.167a.25.25 0 0 0 .121-.214ZM17.5 8a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 17.5 8Z"></path>[/LEFT]

<animateTransform keyTimes="0;1" values="-22 20;20 -20" dur="4s" repeatCount="indefinite" type="translate" attributeName="transform"></animateTransform>

</svg>
<svg xml:space="preserve" style="enable-background:new 0 0 32 32;" viewBox="-24 -32 254 164" xmlns="http://www.w3.org/2000/svg" fill="rgb(227, 162, 21)">
<path d="M160.331,62.553c0,0-21.033-41.208-30.251,1.863c-13.062,6.647-34.009-3.543-59.024-1.767
C62.438,63.263,0.021,61.861,0,117.211c-0.021,35.369,23.601,53.538,38.732,54.188c3.493,0.142,17.06,0,17.935-0.047
c4.646-0.214,9.679-0.433,9.738-2.874c0.12-5.127-19.702-7.227-21.256-8.336c-1.544-1.11-1.544-7.903,7.528-5.468
c15.716,4.43,42.653,1.555,48.85-0.215c6.197-1.779,10.261,7.375,13.801,12.249c3.542,4.872,9.075,4.645,9.075,4.645
s18.819,0,23.472,0c4.645,0,3.098-5.21-7.086-7.421c-10.184-2.214-4.524-7.364,0-11.833c4.166-4.115,14.73-15.072,22.576-16.385
c52.024-8.853,51.314-40.956,50.648-45.823C228.063,76.645,171.398,63.226,160.331,62.553z"></path>
<animateTransform keyTimes="0;1" values="360;0" dur="1.5s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform>
</svg>

HTML
<svg xml:space="preserve" style="enable-background:new 0 0 32 32;" viewBox="-24 -32 254 164" xmlns="http://www.w3.org/2000/svg"  fill="rgb(227, 162, 21)">

<path d="M160.331,62.553c0,0-21.033-41.208-30.251,1.863c-13.062,6.647-34.009-3.543-59.024-1.767

    C62.438,63.263,0.021,61.861,0,117.211c-0.021,35.369,23.601,53.538,38.732,54.188c3.493,0.142,17.06,0,17.935-0.047

    c4.646-0.214,9.679-0.433,9.738-2.874c0.12-5.127-19.702-7.227-21.256-8.336c-1.544-1.11-1.544-7.903,7.528-5.468

    c15.716,4.43,42.653,1.555,48.85-0.215c6.197-1.779,10.261,7.375,13.801,12.249c3.542,4.872,9.075,4.645,9.075,4.645

    s18.819,0,23.472,0c4.645,0,3.098-5.21-7.086-7.421c-10.184-2.214-4.524-7.364,0-11.833c4.166-4.115,14.73-15.072,22.576-16.385

    c52.024-8.853,51.314-40.956,50.648-45.823C228.063,76.645,171.398,63.226,160.331,62.553z"></path>

<animateTransform keyTimes="0;1" values="360;0" dur="1.5s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform>

</svg>
[CODE=html]<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="rgb(255, 255, 255)" d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2Zm5.5 10a4.5 4.5 0 0 0-4.475 4.975a4.5 4.5 0 0 0 4.95-4.95A4.565 4.565 0 0 0 17.5 12Zm-11 0c-.16 0-.319.008-.475.025a4.5 4.5 0 0 0 4.95 4.95A4.5 4.5 0 0 0 6.5 12Z"></path>[/LEFT]
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="4s" values="1 1 1;2.2 2.2" keyTimes="0;1"></animateTransform></svg>[/CODE]

[CODE=html][/LEFT]
<svg viewBox="0 0 512 512" height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(255, 255, 255)" d="M256 43C137.789 43 43 138.851 43 256s94.789 213 213 213 213-95.851 213-213S373.149 43 256 43zm0 383.4c-93.718 0-170.4-76.683-170.4-170.4S162.282 85.6 256 85.6 426.4 162.282 426.4 256 349.718 426.4 256 426.4z" fill-opacity=".9"></path><path fill="rgb(255, 255, 255)" d="M266.65 149.5H234.7v127.8l111.825 67.093 15.975-26.625-95.85-56.444z" fill-opacity=".9"></path>
<animateTransform keyTimes="0;1" values="0;360" dur="6s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform>
</svg>
[LEFT][/CODE]