主页 / 问题 / 861024
Accepted
Denis
Asked:2020-07-27 18:31:28 +0000 UTC2020-07-27 18:31:28 +0000 UTC

带有 SVG 的果冻动画

  • 772

有这样的元素SVG。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="300" viewBox="0 0 500 500">
<g opacity="0.8">
<path fill="#FFC10D" d="M31.6,193.3c0,64.5,116.1,134.9,180.1,134.9c64,0,132.8-70.4,132.8-134.9S317.6,85.1,223,134   C166.1,163.4,31.6,128.8,31.6,193.3z"/>
</g>
</svg>

在浏览器中看起来像这样：链接

这是这张图片的一部分：在此处输入图像描述

如何制作连续的果冻动画？你能推荐任何图书馆吗？这适合吗？-链接

javascript

2 个回答

  1. Best Answer

    动画需要一个标签<animate/>：SVG

    在矢量编辑器中打开图像并根据需要更改其形状（主要是不再创建任何点），从中获取属性中的形状d并将其粘贴到animate...
    您可以更改动画速度使用属性dur。

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="300" viewBox="0 0 500 500">
  <g opacity="0.8">
    <path fill="#FFC10D">
      <animate 
      attributeName="d" 
      dur="5000ms" 
      repeatCount="indefinite"
      values="
      M0.6,80.3 C0.6,144.8 116.7,215.2 180.7,215.2 C244.7,215.2 313.5,144.8 313.5,80.3 C313.5,15.8 286.6,-27.9 192,21 C135.1,50.4 0.6,15.8 0.6,80.3 Z;M15.2578243,55.4080826 C81.2166423,112.558513 -28.6214761,261.286247 50.8426684,261.286247 C130.306813,261.286247 405.910454,220.750751 354.465309,122.427562 C303.020163,24.1043734 298.45532,41.1994628 192.368863,10 C125.720466,-9.60093879 -50.7009936,-1.742348 15.2578243,55.4080826 Z;M16.3265235,48.887035 C-19.3819242,103.728029 13.438101,223.330836 47.2729775,244.063725 C81.1078539,264.796613 311.153787,291.18247 259.708642,192.859281 C208.263496,94.5360921 254.523793,-5.95395875 202.226433,0.414882633 C130.702494,9.12516205 52.0349712,-5.95395875 16.3265235,48.887035 Z;M0.6,80.3 C0.6,144.8 116.7,215.2 180.7,215.2 C244.7,215.2 313.5,144.8 313.5,80.3 C313.5,15.8 286.6,-27.9 192,21 C135.1,50.4 0.6,15.8 0.6,80.3 Z;"/>
    </path>
  </g>
</svg>

    • 16

  2. 使用 css 动画创建无限动画果冻：

    @keyframes jello {
  11.1% {
    transform: none
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg)
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg)
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg)
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg)
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg)
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg)
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
  }
  100% {
    transform: none
  }
}

.jello {
  animation: jello 2s infinite;
  transform-origin: center
}

.center {
  display: inline-block
}

.jello {
  animation: jello 2s infinite;
  transform-origin: center
}

.center {
  display: inline-block
}
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="300" viewBox="0 0 500 500">
<g opacity="0.8">
<path fill="#FFC10D" d="M31.6,193.3c0,64.5,116.1,134.9,180.1,134.9c64,0,132.8-70.4,132.8-134.9S317.6,85.1,223,134   C166.1,163.4,31.6,128.8,31.6,193.3z" class = "center jello"/>
</g>
</svg>



    或者这里是一个小库：
    https ://github.com/codrops/OrganicShapeAnimations/

    • 11

相关问题