无css,用animate实现svg动画

本文使用 svganimate 实现2个简单常用的动画,svg原理、怎么画图什么的,切图仔讲不明白啦。

if (!you['svg']) return🤣

animate 基础使用

html 复制代码
<svg width="200" height="200">
  <circle cx="50" cy="50" r="20" fill="blue">
    <animate attributeName="cx"
       from="50"
       to="150"
       dur="1s"
       repeatCount="indefinite"
    />
  </circle>
</svg>

简单做了一个小球移动,其中:

  • attributeName属性指定了要做动画的属性,这里是圆形的cx属性,即圆心的横坐标。
  • from属性指定了属性动画的起始值,这里是50
  • to属性指定了属性动画的结束值,这里是150
  • dur属性指定了动画的持续时间,这里是1s,即1秒。
  • repeatCount属性指定了动画的重复次数,这里是indefinite,表示无限重复。

上面的 fromto 还可以改为 values

html 复制代码
<svg width="200" height="200">
  <circle cx="50" cy="50" r="20" fill="blue">
    <animate 
        attributeName="cx"
        values="50;150;50"
        dur="1s"
        repeatCount="indefinite"
    />
  </circle>
</svg>

values 的值为 50;150;50,这样小球的 cx 会在1秒内从 50150,然后回到 50,就有了一个往返效果

loading动画

创建一个 svg,然后画3个柱子

html 复制代码
<svg width="200" height="200">
  <rect x="0" y="0" width="8" height="20" fill="#888"></rect>
  <rect x="16" y="0" width="8" height="20" fill="#888"></rect>
  <rect x="32" y="0" width="8" height="20" fill="#888"></rect>
</svg>

接下来给这些柱子添加修改高度的动画,通过 begin 设置触发的时间点

html 复制代码
<svg width="200" height="200">
  <rect x="0" y="0" width="8" height="20" fill="#888">
      <animate
          attributeName="height"
          values="20; 40; 20"
          begin="0s"
          dur="0.6s"
          repeatCount="indefinite"
      />
  </rect>
  <rect x="16" y="0" width="8" height="20" fill="#888">
      <animate
          attributeName="height"
          values="20; 40; 20"
          begin="0.15s"
          dur="0.6s"
          repeatCount="indefinite"
      />
  </rect>
  <rect x="32" y="0" width="8" height="20" fill="#888">
      <animate
          attributeName="height"
          values="20; 40; 20"
          begin="0.3s"
          dur="0.6s"
          repeatCount="indefinite"
      />
  </rect>
</svg>

改了这些属性后能动,但挺丑,修改下 yopacity 让它看起来更有动感

html 复制代码
<svg width="200" height="200">
    <rect x="0" y="20" width="8" height="20" fill="#888" opacity="0.2">
        <animate
            attributeName="opacity"
            values="0.2; 1; 0.2"
            begin="0s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="height"
            values="20; 40; 20"
            begin="0s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="y"
            values="20; 10; 20"
            begin="0s"
            dur="0.6s"
            repeatCount="indefinite"
        />
    </rect>
    <rect x="16" y="20" width="8" height="20" fill="#888" opacity="0.2">
        <animate
            attributeName="opacity"
            values="0.2; 1; 0.2"
            begin="0.15s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="height"
            values="20; 40; 20"
            begin="0.15s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="y"
            values="20; 10; 20"
            begin="0.15s"
            dur="0.6s"
            repeatCount="indefinite"
        />
    </rect>
    <rect x="32" y="20" width="8" height="20" fill="#888" opacity="0.2">
        <animate
            attributeName="opacity"
            values="0.2; 1; 0.2"
            begin="0.3s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="height"
            values="20; 40; 20"
            begin="0.3s"
            dur="0.6s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="y"
            values="20; 10; 20"
            begin="0.3s"
            dur="0.6s"
            repeatCount="indefinite"
        />
    </rect>
</svg>

总体看上去还行,过得去~

波纹动画

就直接给代码吧

html 复制代码
<svg width="200" height="200">
    <circle cx="100" cy="100" r="10" fill="blue" opacity="0">
        <animate
            attributeName="opacity"
            values="1;0"
            dur="1s"
            repeatCount="indefinite"
        />
        <animate
            attributeName="r"
            values="10;30"
            dur="1s"
            repeatCount="indefinite"
        />
    </circle>
    <circle cx="100" cy="100" r="10" fill="blue" opacity="0">
        <animate
            attributeName="opacity"
            values="1;0"
            dur="1s"
            repeatCount="indefinite"
            begin="0.2s"
        />
        <animate
            attributeName="r"
            values="10;30"
            dur="1s"
            repeatCount="indefinite"
            begin="0.2s"
        />
    </circle>
    <circle cx="100" cy="100" r="10" fill="blue" opacity="0">
        <animate
            attributeName="opacity"
            values="1;0"
            dur="1s"
            repeatCount="indefinite"
            begin="0.4s"
        />
        <animate
            attributeName="r"
            values="10;30"
            dur="1s"
            repeatCount="indefinite"
            begin="0.4s"
        />
    </circle>
</svg>

总结

这些都可以通过 css 实现,只是个人感觉直接 svg 一把梭简单一些😀。除了上述的 animate,还可以通过 dasharraydashoffset 进行动态描边。总的来说 svg 还是有很多需要学习的地方。

更多属性见:- SVG:可缩放矢量图形 | MDN (mozilla.org)

相关推荐
饼干哥哥2 天前
AI做SVG的终极方案,一套提示词模板无痛搞定:小红书知识卡片、数据可视化图表、原型图、动态图……
svg
设计师也学前端14 天前
SVG数据可视化组件基础教程9:自定义电池电量进度
前端·svg
设计师也学前端15 天前
SVG数据可视化组件基础教程8:自定义水波球
前端·svg
设计师也学前端17 天前
SVG数据可视化组件基础教程7:自定义柱状图
前端·svg
SuperherRo18 天前
Web攻防-XSS跨站&文件类型&功能逻辑&SVG&PDF&SWF&HTML&XML&PMessage&LocalStorage
xml·pdf·html·svg·localstorage·swf·pmessage
实习生小黄20 天前
使用psd.js将psd路径转成svg格式
前端·javascript·svg
设计师也学前端20 天前
SVG数据可视化组件基础教程6:翻牌倒计时
前端·svg
设计师也学前端25 天前
SVG数据可视化组件基础教程5:带指针连续进度的仪表盘
svg·数据可视化
设计师也学前端25 天前
SVG数据可视化组件基础教程4:连续进度的仪表盘
svg·数据可视化
微笑边缘的金元宝1 个月前
svg实现3环进度图,可动态调节进度数值,(vue)
前端·javascript·vue.js·svg