几何形状的阴影

Question

Alexandr_TT

Asked:2022-04-02 23:31:05 +0000 UTC2022-04-02 23:31:05 +0000 UTC 2022-04-02 23:31:05 +0000 UTC

牛顿的摇篮动画展示了这种效果

772

一种广为人知的物理体验，称为“牛顿的摇篮”，请参阅 Wikipedia ^ref

随着该系统第一个球的偏离和随后返回到初始位置，其能量和动量将通过三个中间球原封不动地传递到最后一个球，后者将获得相同的速度并上升到相同的高度。反过来，他将沿着链条再次将动量和能量传递给第一个球。

有必要制作一个动画来展示这种身体体验。

动画脚本：

右球以45度角向右缩回
在与其他球碰撞之前将球丢回去
最左边的球以 45 度角飞出。
回来并击中相邻的球
最右边的球飞出 45 度
动画循环

最好使用 SMIL SVG 实现动画

5 个回答

Voted

Sevastopol' · Answer 1 · 2022-04-03T03:36:11Z

最简单的 CSS 版本：

.newton_cradle {
  position: absolute; bottom: 20px; left: calc(50% - 150px);
  width: 275px; height: 160px; padding: 0 0 0 25px;
  border-top: 10px solid silver; border-left: 10px solid silver; border-right: 10px solid silver; border-radius: 20px 20px 0 0;
  box-shadow: 0px 3px 10px -3px rgb(0 0 0 / 100%);
}

.newton_cradle::before {
  content: "@Sevastopol'"; display: block;
  position: absolute; top: -10px; left: 20px;
  width: 260px; height: 10px; background: silver;
  text-align: center; font-size: 6px; font-family: Verdana; color: white; letter-spacing: 1px; line-height: 11px; text-shadow: 0.5px 0.5px rgb(0 0 0 / 50%);
}

.newton_cradle::after {
  content: 'Колыбель Ньютона'; display: block;
  position: absolute; bottom: -20px; left: -50px;
  width: 400px; height: 20px; border-radius: 25px 25px 0 0;
  background: silver; background: radial-gradient(silver, lightgray, silver); border: 2px solid silver; box-shadow: 1px 5px 10px 3px rgb(0 0 0 / 10%);
  text-align: center; font-size: 10px; font-family: Verdana; color: dimgray; letter-spacing: 1px; line-height: 20px;
}

.ball {
  z-index: -1; float: left; position: relative;
  margin-top: 100px; width: 50px; height: 50px;
  background: repeating-linear-gradient( 45deg, black, transparent 100px);
  background: radial-gradient(circle at 65% 15%, white 1px, lightgray 3%, gray 60%, lightgray 100%); box-shadow: 1px 5px 10px 3px rgb(0 0 0 / 10%);
  border-radius: 100%; transform-origin: 50% -100px;
}

.ball::before {
  content: ''; display: block; position: absolute; top: 10px; left: 10px;
  width: 20px; height: 20px; border-radius: 100%;
  background-color: white; filter: blur(5px);
}

.ball::after {
  content: ''; display: block; position: absolute;
  top: -100px; left: 24px; height: 100px; width: 1px; background: gray;
}

.ball:nth-child(1) {animation: ball1 0.5s infinite alternate 0.5s ease-out;}
.ball:nth-child(5) {animation: ball5 0.5s infinite alternate ease-out;}

@keyframes ball1 {0%,50% {transform: rotate(0);} 100% {transform: rotate(30deg);}}
@keyframes ball5 {0%,50% {transform: rotate(0);} 100% {transform: rotate(-30deg);}}

<div class="newton_cradle">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
</div>

Sevastopol' · Answer 2 · 2022-04-04T23:06:58Z

微笑 SVG。单击最右边的球时的动画

<svg id="svg" viewBox="-60 45 220 45" height="280px" width="500px">

  <g id="bals">

  <!--шарик 1-->
    <g id="bal1">
      <circle id="b1" r="10.583333" cy="63.5" cx="31.75" fill="url(#gr)" stroke="none" stroke-width="4.99999" />
      <path id="b1_p" transform="scale(0.26458333)" d="M 120 40 L 120 200 L 120 40 z" fill="none" stroke="dimgray" stroke-width="1px" />
    </g>
    <!--шарик 2-->
    <g id="bal2">
      <circle r="10.583333" cy="63.5" cx="52.85" fill="url(#gr)" stroke="none" stroke-width="4.99999" />
      <path transform="scale(0.26458333)" d="M 200 40 L 200 200 L 200 40 z" fill="none" stroke="dimgray" stroke-width="1px" />
    </g>
    <!--шарик 3-->
    <g id="bal3">
      <circle r="10.583333" cy="63.5" cx="74" fill="url(#gr)" stroke="none" stroke-width="4.99999" />
      <path transform="scale(0.26458333)" d="M 280 40 L 280 200 L 280 40 z" fill="none" stroke="dimgray" stroke-width="1px" />
    </g>
    <!--шарик 4-->
    <g id="bal4">
      <circle r="10.583333" cy="63.5" cx="95" fill="url(#gr)" stroke="none" stroke-width="4.99999" />
      <path transform="scale(0.26458333)" d="M 360 40 L 360 200 L 360 40 z" fill="none" stroke="dimgray" stroke-width="1px" />
    </g>
    <!--шарик 5-->
    <g id="bal5">
      <circle id="b5" r="10.583333" cy="63.5" cx="116" fill="url(#gr)" stroke="none" stroke-width="4.99999" cursor="pointer" />
      <path id="b5_p" transform="scale(0.26458333)" d="M 440 40 L 440 200 L 440 40 z" fill="none" stroke="dimgray" stroke-width="1px" />
      </g>
      
      <!--анимация шарика 5-->
      <animateTransform xlink:href="#b5" id="anb5" attributeName="transform" type="translate" begin="bal5.click;anb5.end+0.5s" values="0,0; 25,-7; 0,0" dur="0.5s" repeatCount="1" fill="freeze" restart="whenNotActive" />
      <animate xlink:href="#b5_p" id="anb5_p" attributeName="d" begin="bal5.click;anb5_p.end+0.5s" values="M 440 40 L 440 200 L 440 40 z; M 440 40 L 516 178 L 440 40 z; M 440 40 L 440 200 L 440 40 z" dur="0.5s" repeatCount="1" fill="freeze" restart="whenNotActive" />
      
      <!--анимация шарика 1-->
      <animateTransform xlink:href="#b1" id="anb1" attributeName="transform" type="translate" begin="bal5.click+0.5s;anb1.end+0.5s" values="0,0; -25,-7; 0,0" dur="0.5s" repeatCount="1" fill="freeze" restart="whenNotActive" />
      <animate xlink:href="#b1_p" id="anb1_p" attributeName="d" begin="bal5.click+0.5s;anb1_p.end+0.5s" values="M 120 40 L 120 200 L 120 40 z; M 120 40 L 44 178 L 120 40 z; M 120 40 L 120 200 L 120 40 z" dur="0.5s" repeatCount="1" fill="freeze" restart="whenNotActive" />

    </g>
    
    <!--рамка-->
    <g><rect id="body" fill="none" stroke="darkgray" stroke-width="3.84717" width="127.00001" height="68.791664" x="10.583333" y="10.583333" /><path fill="darkgray" stroke="lightgray" stroke-width="0.5px" d="m 9.2604168,80.879407 -7.9375002,6.433092 145.5208334,10e-7 -7.93749,-6.433092 z" /></g>
    
      <!--градиент для шариков-->
      <radialGradient id="gr" r="100%" fx="30%" fy="30%">
        <stop stop-color="white" offset="10%"></stop>
        <stop stop-color="darkgray" offset="45%"></stop>
        <stop stop-color="gray" offset="100%" stop-opacity="0"/>
    </radialGradient>

<!--текст-->
<text transform="scale(1,0.855)" y="100" x="55" fill="dimgray" stroke="none" stroke-width="0.1" font-size="4px" font-family="sans-serif">Колыбель Ньютона</text>
<text transform="scale(1,0.880)" y="13" x="68" fill="white" stroke="none" stroke-width="0.1" font-size="2px" font-family="sans-serif">@Sevastopol'</text>

</svg>

Monkey Mutant · Answer 3 · 2022-04-03T09:29:33Z

删除了一堆代码并手动制作

一般来说，所有动画都发生在 defs 中，我通过使用在 html 中显示已经动画的图标

<svg viewBox="0 0 900 500" width="400">
  <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="#000" />
      <path d="m50,20 0,300" stroke="#fff" stroke-width="2" />
      <circle cx="50" cy="300" r="40" fill="#fff">
    </mask>
    <radialGradient id="grad" cx="0.2" cy="0.4" r="1">
      <stop stop-color="#fff" offset="0" />
      <stop stop-color="#cc0000" offset="100%" />
    </radialGradient>
    <rect id="figure1" width="100px" height="400" fill="url(#grad)" mask="url(#mask)">
      <animateTransform id="an1" attributeName="transform" begin="0s; an2.end" type="rotate" dur="0.34s" values="0; 10; 20; 30; 30; 30; 20; 10;  0" repeatCount="1" />
    </rect>

    <rect id="figure3" width="100px" height="400" fill="url(#grad)" mask="url(#mask)">
      <animateTransform id="an2" attributeName="transform" begin="an1.end" type="rotate" dur="0.34s" values="0; -10; -20; -30; -30; -30; -20; -10;  0" repeatCount="1" />
    </rect>

    <rect id="figure2" width="100px" height="400" fill="url(#grad)" mask="url(#mask)">
        <animateTransform  attributeName="transform" begin="0s" type="translate" dur="0.34s" values="2; 1; 0; -1; -2 " repeatCount="indefinite" />
    </rect>
  </defs>
  <g transform="translate(200 -30)">
    <use href="#figure1" x="25" />
    <use href="#figure2" x="105" />
    <use href="#figure2" x="185" />
    <use href="#figure2" x="265" />
    <use href="#figure3" x="345" />
  </g>
  <rect width="100%" height="40" fill="#fff" y="0" />
  <path d="m 40,320 0,-280 750,0 0,280" fill="none" stroke="#ccc" stroke-width="10" />
  <path d="M40,320 790,320 840,390 0,390z" fill="#ccc" />
</svg>

Alexandr_TT · Answer 4 · 2022-04-05T15:51:08Z

框架是在矢量编辑器中绘制的，它占用了代码的很大一部分。

现场演示

实际上，球本身的动画需要几行。

 <use xlink:href="#ball" x="180" y="20" >
          <animateTransform id="an5" attributeName="transform" type="rotate"
 begin="an1.end" dur="0.5s" values="0 340 65;-15 340 65;-30 340 65;0 340 65"
    keyTimes="0;0.25;0.78;1" repeatCount="1" />
 </use>

从上面的代码可以看出，这是一个小球旋转变换的动画 type="rotate"

我没有在属性中添加两个极端位置，而是values添加了中间位置，以使动画在轨迹的不同部分不均匀，使用keyTimes

keyTimes="0;0.25;0.78;1"
要正确设置旋转动画，您需要准确指定旋转中心。在这种情况下，很容易确定这是连接球的螺纹的开始。 <polyline stroke="black" points="160, 65 160,220" />对于第一个球，旋转中心的坐标为x="160" y="65"
对于其余的球，坐标将被偏移，因为它是等距绘制的并且<use>应用了偏移克隆。
实现动画序列的逻辑链：

在第一个动画完成后开始第二个动画（弹跳右球id="an5"） - 击中左球id="an1"将是： begin="an1.end"
循环动画

第二个动画结束后，第一个动画开始。

开始=“0s;an5.end”

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="0 0 500 400" version="1.1">
<defs>
 <g id="ball" fill="url(#Rg)">
  <polyline stroke="black" points="160, 65 160,220" />
  <circle cx="160" cy="220" r="20"  /> 
   
 </g> 
  <radialGradient id="Rg" r="90%" fx="50%" fy="30%">
        <stop stop-color="#F3F3F3" offset="5%"></stop>
        <stop stop-color="#3E3D44" offset="45%"></stop>    
        <stop stop-color="black" offset="100%" stop-opacity="0.72"/>
    </radialGradient>
</defs> 
    <!-- Графика рамки и основания -->
 <path id="base" fill="url(#Rg)" stroke="black" stroke-width="2" d="m134.4 165.9c2.6-1.3 5.6-2.3 8.5-2 91.1 8 238.2 19.6 337.1 30.5 4.8 0.5 11.5 0.4 13.6 4.8 2.6 5.4-3.3 12-6.1 16.9-27.4 47.2-64.8 112-81.7 142.3-2.3 4.1-4.9 9.7-9.1 11.2-3.2 1.1-6.8 1.2-10.2 0.9-2.7-0.2-5.5-0.4-8.4-0.6-58.4-4.4-165.2-14.1-263.3-22.8-26.6-2.4-52.5-4.7-76.7-6.8-6.9-0.6-19.9-0.2-22.4-3.9-2.8-4.1 6.7-13.4 8.5-16.1 35-51.3 76-109.6 102.1-147.7 2-2.9 5-5.1 8.2-6.7z" />
  <path id="edge" fill="url(#Rg)" d="m14.7 342.5c0.8 3.9 5.1 7.2 9 7.9 4.3 0.8 8.9 1.2 11.5 1.4 51.8 4.5 252.3 22.1 351.2 30.7 4.2 0.4 8.7-0.3 12.5-2.2 3.4-1.8 6.3-4.9 8.2-8.2 30.1-52.1 86.9-153.2 86.9-153.2 0-3.9 0-6.6 0-14.6l-57.3 99.3-28.5 49.3c0 0-5 8.6-7.3 12.7-1.7 3-5.3 5.3-9 4.9-7.2-0.6-23-1.5-23-1.5L322.6 365.1 37.3 340.1c-1.7-0.1-20.4 0.3-21.8-4.3-0.8-2.8-1.4 3.9-0.8 6.7z" />
 <ellipse fill="grey" stroke="black" cx="113.1" cy="256" rx="15" ry="9" />
   <ellipse fill="#151515" cx="113.1" cy="256" rx="9" ry="4" />
  <ellipse fill="grey" stroke="black" cx="405.8" cy="281.6" rx="15" ry="9" /> 
    <ellipse fill="#151515" cx="405.8" cy="281.6" rx="9" ry="4" />

 <use xlink:href="#ball" x="20" y="4" > 
   <!-- Анимация левого шара -->
   <animateTransform id="an1" attributeName="transform" type="rotate" begin="0s;an5.end" dur="0.5s" values="0 160 65;15 160 65;30 160 65;0 160 65" keyTimes="0;0.25;0.78;1" repeatCount="1" />
 </use> 
   <use xlink:href="#ball" x="60" y="8" />
    <use xlink:href="#ball" x="100" y="12" /> 
     <use xlink:href="#ball" x="140" y="16" /> 
       <use xlink:href="#ball" x="180" y="20" > 
      <!-- Анимация правого шара -->
          <animateTransform id="an5" attributeName="transform" type="rotate" begin="an1.end" dur="0.5s" values="0 340 65;-15 340 65;-30 340 65;0 340 65"   keyTimes="0;0.25;0.78;1" repeatCount="1" />
 </use>  
 
  <path id="arc" fill="url(#Rg)" d="m109.1 255.6c-0.3-52.5-0.9-112.1-0.5-168.4 0-6.6 2.8-13.7 7.5-18.3 3.9-3.8 9.9-6.3 15.3-5.8L372.6 86c11.2 1.1 25.1 0.4 32.8 8.7 6.8 7.4 5.1 19.6 5.1 29.7v157.6c0 1.7-3.3 1.4-5 1.3-1.7-0.2-4.6-0.4-4.6-2.1V117.8c0-6.1-1.5-12.6-5.7-16.7-2.8-2.6-7.2-2.8-11.1-3.2L132.2 74.1c-3.7-0.3-7.6 1.3-10.3 3.8-2.5 2.3-4.2 5.9-4.2 9.2 0 0-0.6 115.2-0.2 169.2 0 1.7-2.9 2.3-4.6 2.1-1.6-0.2-3.8-1.3-3.8-2.9z" />  
</svg>

Alexandr_TT · Answer 5 · 2022-04-05T16:03:17Z

两个球轮流动画

现场演示

添加了一个动画块。
每个球都有自己的旋转中心坐标，其余的，如第一个答案

 <use xlink:href="#ball" x="140" y="10" >  
              <!-- Анимация 4  шарика -->
        <animateTransform id="an4" attributeName="transform" type="rotate"
          begin="an1.end" dur="0.5s" values="0 340 65;-15 340 65;-30 340 65;0 340 65" 
           keyTimes="0;0.25;0.75;1" repeatCount="1" />
 </use>
      <use xlink:href="#ball" x="180" y="14" > 
                  <!-- Анимация 5 правого шарика -->
        <animateTransform id="an5" attributeName="transform" type="rotate" 
          begin="an1.end" dur="0.5s" values="0 360 68;-15 360 68;-30 360 68;0 360 68"
          keyTimes="0;0.25;0.75;1" repeatCount="1" />
  </use>

下面是完整的代码：

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="0 0 500 400" version="1.1">
<defs>
 <g id="ball" fill="url(#Rg)">
  <polyline stroke="black" points="160, 67 160,220" />
  <circle cx="160" cy="220" r="20"  /> 
   
 </g> 
  <radialGradient id="Rg" r="90%" fx="50%" fy="30%">
        <stop stop-color="#F3F3F3" offset="5%"></stop>
        <stop stop-color="#3E3D44" offset="45%"></stop>    
        <stop stop-color="black" offset="100%" stop-opacity="1"/>
    </radialGradient>
</defs>    
        

 <path id="base" fill="url(#Rg)" stroke="black" stroke-width="2" d="m134.4 165.9c2.6-1.3 5.6-2.3 8.5-2 91.1 8 238.2 19.6 337.1 30.5 4.8 0.5 11.5 0.4 13.6 4.8 2.6 5.4-3.3 12-6.1 16.9-27.4 47.2-64.8 112-81.7 142.3-2.3 4.1-4.9 9.7-9.1 11.2-3.2 1.1-6.8 1.2-10.2 0.9-2.7-0.2-5.5-0.4-8.4-0.6-58.4-4.4-165.2-14.1-263.3-22.8-26.6-2.4-52.5-4.7-76.7-6.8-6.9-0.6-19.9-0.2-22.4-3.9-2.8-4.1 6.7-13.4 8.5-16.1 35-51.3 76-109.6 102.1-147.7 2-2.9 5-5.1 8.2-6.7z" />
  <path id="edge" fill="url(#Rg)" d="m14.7 342.5c0.8 3.9 5.1 7.2 9 7.9 4.3 0.8 8.9 1.2 11.5 1.4 51.8 4.5 252.3 22.1 351.2 30.7 4.2 0.4 8.7-0.3 12.5-2.2 3.4-1.8 6.3-4.9 8.2-8.2 30.1-52.1 86.9-153.2 86.9-153.2 0-3.9 0-6.6 0-14.6l-57.3 99.3-28.5 49.3c0 0-5 8.6-7.3 12.7-1.7 3-5.3 5.3-9 4.9-7.2-0.6-23-1.5-23-1.5L322.6 365.1 37.3 340.1c-1.7-0.1-20.4 0.3-21.8-4.3-0.8-2.8-1.4 3.9-0.8 6.7z" />
 <ellipse fill="grey" stroke="black" cx="113.1" cy="256" rx="15" ry="9" />
   <ellipse fill="#151515" cx="113.1" cy="256" rx="9" ry="4" />
  <ellipse fill="grey" stroke="black" cx="405.8" cy="281.6" rx="15" ry="9" /> 
    <ellipse fill="#151515" cx="405.8" cy="281.6" rx="9" ry="4" />
    
 
 
 <use xlink:href="#ball" x="20" y="0" >  
          <!-- Анимация первого левого шарика -->
   <animateTransform id="an1" attributeName="transform" type="rotate" begin="0s;an5.end" dur="0.5s" values="0 160 65;15 160 65;30 160 65;0 160 65" keyTimes="0;0.25;0.75;1" repeatCount="1" />
 </use> 
   <use xlink:href="#ball" x="60" y="3" >
          <!-- Анимация второго левого шарика -->
     <animateTransform id="an1" attributeName="transform" type="rotate" begin="0s;an5.end" dur="0.5s" values="0 190 65;15 190 65;30 190 65;0 190 65" keyTimes="0;0.25;0.75;1" repeatCount="1" />   
   </use>
    <use xlink:href="#ball" x="100" y="7" /> 
     <use xlink:href="#ball" x="140" y="10" >  
              <!-- Анимация 4  шарика -->
        <animateTransform id="an4" attributeName="transform" type="rotate" begin="an1.end" dur="0.5s" values="0 340 65;-15 340 65;-30 340 65;0 340 65"   keyTimes="0;0.25;0.75;1" repeatCount="1" />
      </use>
          <use xlink:href="#ball" x="180" y="14" > 
                  <!-- Анимация 5 правого шарика -->
              <animateTransform id="an5" attributeName="transform" type="rotate" begin="an1.end" dur="0.5s" values="0 360 68;-15 360 68;-30 360 68;0 360 68"   keyTimes="0;0.25;0.75;1" repeatCount="1" />
           </use>  
     
  <path id="arc" fill="url(#Rg)" d="m109.1 255.6c-0.3-52.5-0.9-112.1-0.5-168.4 0-6.6 2.8-13.7 7.5-18.3 3.9-3.8 9.9-6.3 15.3-5.8L372.6 86c11.2 1.1 25.1 0.4 32.8 8.7 6.8 7.4 5.1 19.6 5.1 29.7v157.6c0 1.7-3.3 1.4-5 1.3-1.7-0.2-4.6-0.4-4.6-2.1V117.8c0-6.1-1.5-12.6-5.7-16.7-2.8-2.6-7.2-2.8-11.1-3.2L132.2 74.1c-3.7-0.3-7.6 1.3-10.3 3.8-2.5 2.3-4.2 5.9-4.2 9.2 0 0-0.6 115.2-0.2 169.2 0 1.7-2.9 2.3-4.6 2.1-1.6-0.2-3.8-1.3-3.8-2.9z" />  
</svg>

牛顿的摇篮动画展示了这种效果

现场演示

两个球轮流动画

现场演示

表格填充不起作用

提示 50/50，有两个，其中一个是正确的

在 PyQt5 中停止进程

我的脚本不工作

在文本文件中写入和读取列表

如何像屏幕截图中那样并排排列这些块？

确定文本文件中每一行的字符数

将接口对象传递给 JAVA 构造函数

正确更新数据库中的数据

Python解析不是css

牛顿的摇篮动画展示了这种效果

5 个回答

两个球轮流动画

相关问题