如何为落下的水滴设置动画？

Question

我想实现一滴水。

水滴起初呈圆形，然后逐渐向下延伸，直至脱离表面并落下。
通过更改路径中的d 属性，我设法使水滴形状从圆形变为细长。

<svg xmlns="http://www.w3.org/2000/svg" width="332" height="412" viewBox="0 0 332 412"> 
<defs>
 <radialGradient id="rg" r="1" fx="0.25" fy="0.5">
              <stop offset="0%" stop-color="white"></stop>
              <stop offset="75%" stop-color="#1B7FE4"></stop>
               </radialGradient> 
  </defs>
<path id="pathX" fill="url(#rg)" d="m 228.82,126.17 c 0,0 -11.21426,-24.27631 -54.17763,-36.049322 -6.26889,-1.717829 -34.05856,-0.314692 -40.44915,0.872881 C 106.06884,96.219957 84.38,126.17 84.38,126.17 c -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33">
<animate
  attributeName="d"
  begin="0s"
  dur="4s"
  repeatCount="indefinite"
  values="
     m 228.82,126.17 c 0,0 -11.21426,-24.27631 -54.17763,-36.049322 -6.26889,-1.717829 -34.05856,-0.314692 -40.44915,0.872881 C 106.06884,96.219957 84.38,126.17 84.38,126.17 c -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33;
   
   m 228.82,126.17 c 0,0 -36.96426,-56.572924 -62.47,-86.24 -4.23749,-4.928853 -15.48617,-5.112646 -19.5,0 -21.57777,27.484873 -62.47,86.24 -62.47,86.24 -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33;
   m 228.82,126.17 c 0,0 -11.21426,-24.27631 -54.17763,-36.049322 -6.26889,-1.717829 -34.05856,-0.314692 -40.44915,0.872881 C 106.06884,96.219957 84.38,126.17 84.38,126.17 c -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33;
    " /> 
</path> 
</svg>

不均匀下落动画如何实现？

水滴分离时的动画应该是缓慢的 离开地面后在坠落中加速。

Answer 1

为了同时执行两个动作：

1. 重塑和
2. 滴落，
   您需要并行运行两个动画：

第一个动画会改变drop的形状，第二个动画会实现它的fall：

   <!-- Drop drop animation -->
<animateTransform id="an2" attributeName="transform" type="translate"
   dur="3s" begin="an1.begin" values="0,0;0,60;0,1680" keyTimes="0;0.85;1" />

掉率的不均匀性，起初很慢，然后很快，有助于实现keyTimes = "0; 0.85; 1"属性

在第一阶段，当 blob 从0 垂直拉伸到60（参见values =" 属性）时，85% 的动画时间过去了。因此，动画很慢。

动画第二阶段只剩下15%的时间，所以动画速度很快。

<svg xmlns="http://www.w3.org/2000/svg" width="332" height="412" viewBox="0 0 1238 1648" >
<defs>
 <radialGradient id="rg" r="1" fx="0.25" fy="0.5">
              <stop offset="0%" stop-color="white"></stop>
              <stop offset="75%" stop-color="#1B7FE4"></stop>
             
  </radialGradient>

<linearGradient id="water" x1="0" y1="1" x2="0" y2="0" >
      <stop offset="0" stop-color="#8FBAE4" >
        <!-- animation of filling the vessel with water         -->
        <animate id="OP" dur="60s" attributeName="offset" fill="freeze" values="0;0.05;0.1;0.15;0.2;0.25;0.3;0.35;0.4;0.45;0.5;0.55;0.6;0.65;0.7;0.75;0.8;0.85;0.9;1" calcMode="discrete" /> 
      </stop>
      <stop offset="0" stop-color="transparent">
         <animate  begin="0s" dur="60s" attributeName="offset" fill="freeze" values="0;0.05;0.1;0.15;0.2;0.25;0.3;0.35;0.4;0.45;0.5;0.55;0.6;0.65;0.7;0.75;0.8;0.85;0.9;1" calcMode="discrete"/> 
      </stop>
      
    </linearGradient>
 </defs>
  <polyline points="615,85 1238,30" stroke="#0F4982" stroke-width="36" stroke-linecap="round" />
<g opacity="1" transform="translate(450,0)">
<path  fill="url(#rg)" id="pathX" >
  <!-- Drop shape change animation -->
<animate id="an1"
  attributeName="d"
  begin="0s;an2.end"
  dur="3s"
  repeatCount="1"
  values="
     m 228.82,126.17 c 0,0 -11.21426,-24.27631 -54.17763,-36.049322 -6.26889,-1.717829 -34.05856,-0.314692 -40.44915,0.872881 C 106.06884,96.219957 84.38,126.17 84.38,126.17 c -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33;
   
   m 228.82,126.17 c 0,0 -36.96426,-56.572924 -62.47,-86.24 -4.23749,-4.928853 -15.48617,-5.112646 -19.5,0 -21.57777,27.484873 -62.47,86.24 -62.47,86.24 -43.19,59.62 0.65,142 74,141.33 71.09,-1.56 113.12,-82.46 70.47,-141.33" />  
   <!-- Falling drops animation -->
 <animateTransform id="an2" attributeName="transform" type="translate" dur="3s" begin="an1.begin" values="0,0;0,60;0,1400" keyTimes="0;0.85;1" />   
</path> 
   <animate attributeName="opacity" begin="OP.end" dur="1ms" values="1;0" fill="freeze" />
</g>    
           <!-- A vessel filled with water -->
  <path fill="url(#water)" stroke="#0F4982" stroke-width="25" d="m809.6 819.9c53 20.8 101.8 49.8 143.8 85.9 92.6 79.6 144.6 187.6 144.6 300.3 0 112.6-52 220.6-144.6 300.3-92.6 79.6-218.2 124.4-349.2 124.4-131 0-256.6-44.7-349.2-124.4-92.6-79.6-144.6-187.6-144.6-300.3 0-112.6 52-220.6 144.6-300.3 40.3-34.7 86.9-62.7 137.4-83.4" /> 
    
</svg>