主页 / 问题

全部问题

Martin Hope
Alexandr_TT
Asked: 2024-12-13 15:27:45 +0000 UTC
  • 17

祝贺比赛获胜者 Stanislav Volodarskiy！

他的解决方案很有趣、原创且非常专业。
他们100%满足比赛条件。

除了他的解决方案之外，还发布了几个非常可靠的答案。给他们打高分是公平的，但一场比赛只能产生一名获胜者。
因此，我呼吁潜在的赞助商：请分享你的萝卜并重新启动，这里有一个新的比赛。

我有一张军刀凸轮机构的照片。

在此输入图像描述

有*.gif 机构动画

在此输入图像描述

我为凸轮机构创建了一个 svg 代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 500 500">
                                                                          
     <!-- Шарнир -->
<path fill="grey" stroke="black" stroke-width="3" d="M344.3 197.6a49.6 49.6 0 0 1 34.4 13A57 57 0 0 1 396 251a54 54 0 0 1-17.4 36.8c-9 8.2-22 13.1-34.2 13a54.4 54.4 0 0 1-36.8-15.4A51.4 51.4 0 0 1 294 251a55.4 55.4 0 0 1 13.7-37.6 53.7 53.7 0 0 1 36.6-16z"/>
            <!-- Вертикальный стержень -->
<path fill="grey" stroke="black" stroke-width="3" d="M387.3 13.1h30v440.5h-30z"/>
                <!-- Ось кулачка -->
<path  fill="#626262" stroke="black" stroke-width="2" d="M344.3 223.5c8.9 0 18 5.5 23.7 12.3 3.4 4.1 4.9 10 4.5 15.3-.4 6.7-3.2 13.9-8.2 18.4a27 27 0 0 1-20 6.5c-7.1-.8-13.8-5.4-18.6-10.6a24.4 24.4 0 0 1-1-31.8c4.7-5.7 12.2-10.1 19.6-10z"/>

                 <!-- Кулачок -->
<path fill="grey" stroke="black" stroke-width="3" d="M41.3 153c32.7 0 78.5 3.3 117.6 7 35 3.2 69.9 6.8 104.3 13.2 16.8 3.1 33.3 7.7 49.8 12.2 13 3.5 43.8 11.3 38.7 11.6-20 1.4-39.1 7.2-48.7 22.3-20.3 31.8-.9 54.9-7 41.8-5.4-11.8-18.1-18-29-24.3-13.4-7.9-28.7-11.9-43.5-16.5-19-5.9-38.9-9.2-58.2-14.3-21.5-5.5-42.7-12-64.1-17.4-14-3.5-26.3-5.5-41.9-9.6a25 25 0 0 1-13.2-10.6c-3-4.4-10.1-15.3-4.8-15.3z"/>
             <!-- Цилиндр -->
<path fill="black" d="M377.5 54.3c3.8-.7 50.6-.4 50.6-.4l9.3 10.5v88.8h-66.6V64.4Z"/>
            <!-- Линия фаски -->
<path  stroke="white" d="m370.8 64 66.6.4"/>
              <!-- Верхний рычаг -->
<path fill="grey" stroke="black" stroke-width="3" d="M21.2 153c-3.1 0 1.1-6.2 2.6-9 1.4-2.4 3-5.7 5.9-6.3a17587 17587 0 0 1 341-65.7v81H21.3z"/>

</svg>

如何根据给定的.gif 文件创建凸轮机构的动画？

更新


解决问题时出现问题时提供额外数据。
希望这有帮助。

Inkscape 源代码，创建了该机制的静态 SVG 文件。
SVG 画布大小 500x500 px
可以通过在矢量编辑器中运行 inkscape 源代码来获取部件的尺寸 下面的代码

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="500"
   height="500"
   viewBox="0 0 500 500"
   version="1.1"
   id="svg4"
   sodipodi:docname="Заготовка-ink2.svg"
   inkscape:version="0.92.3 (2405546, 2018-03-11)">
  <metadata
     id="metadata10">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs8" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1440"
     inkscape:window-height="837"
     id="namedview6"
     showgrid="false"
     inkscape:zoom="0.944"
     inkscape:cx="295.12041"
     inkscape:cy="242.72973"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg4"
     showguides="true"
     inkscape:guide-bbox="true">
    <sodipodi:guide
       position="436.69836,486.88497"
       orientation="0,1"
       id="guide4520"
       inkscape:locked="false" />
    <sodipodi:guide
       position="387.26081,395.5004"
       orientation="1,0"
       id="guide4522"
       inkscape:locked="false" />
    <sodipodi:guide
       position="417.22296,388.75892"
       orientation="1,0"
       id="guide4524"
       inkscape:locked="false" />
    <sodipodi:guide
       position="448.68322,46.441335"
       orientation="0,1"
       id="guide4526"
       inkscape:locked="false" />
    <sodipodi:guide
       position="370.78163,381.26838"
       orientation="1,0"
       id="guide4532"
       inkscape:locked="false" />
    <sodipodi:guide
       position="437.44742,370.03257"
       orientation="1,0"
       id="guide4534"
       inkscape:locked="false" />
    <sodipodi:guide
       position="489.88118,471.15484"
       orientation="0,1"
       id="guide4536"
       inkscape:locked="false" />
    <sodipodi:guide
       position="489.13213,416.47391"
       orientation="0,1"
       id="guide4538"
       inkscape:locked="false" />
    <sodipodi:guide
       position="411.97959,435.94931"
       orientation="0,1"
       id="guide4546"
       inkscape:locked="false" />
    <sodipodi:guide
       position="288.66525,346.92797"
       orientation="0,1"
       id="guide4550"
       inkscape:locked="false" />
    <sodipodi:guide
       position="344.27966,512.1822"
       orientation="1,0"
       id="guide4554"
       inkscape:locked="false" />
    <sodipodi:guide
       position="370.78163,248.94068"
       orientation="0,1"
       id="guide4556"
       inkscape:locked="false" />
  </sodipodi:namedview>
  <image
     
  <path
     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="m 387.26081,13.11503 h 29.96215 v 440.44364 h -17.97729 -11.98486 z"
     id="path4528"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#0000f7;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
     d="m 387.26081,13.11503 h 29.96215 v 440.44364 h -29.96215 z"
     id="path4530"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#e50000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
     d="m 377.52311,54.312992 c 3.74527,-0.749054 50.56113,-0.374527 50.56113,-0.374527 l 9.36318,10.486753 V 153.18809 H 370.78163 V 64.425218 Z"
     id="path4544"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#570400;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
     d="m 370.78163,64.05069 66.66579,0.374528"
     id="path4548"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#008800;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m 21.186441,153.07203 c -3.12854,0 1.110117,-6.27995 2.648305,-9.00423 1.413084,-2.50271 3.015439,-5.75628 5.826271,-6.35594 C 135.51425,115.12916 370.78163,72.033898 370.78163,72.033898 v 81.038132 c 0,0 -212.74111,0 -349.595189,0 z"
     id="path4552"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="sasccs" />
  <path
     style="fill:none;stroke:#0000e7;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m 344.27966,223.51695 c 8.90907,0.0198 18.05228,5.44187 23.72125,12.31462 3.36808,4.08327 4.85373,9.94633 4.50212,15.22775 -0.44642,6.70562 -3.23009,13.91363 -8.22867,18.40572 -5.21172,4.68364 -13.02457,7.20658 -19.9947,6.48835 -7.07962,-0.72951 -13.76582,-5.31323 -18.53813,-10.59322 -3.49791,-3.87002 -6.03275,-9.09431 -6.35594,-14.30085 -0.37718,-6.07621 1.39653,-12.80421 5.29661,-17.47881 4.70441,-5.63868 12.25403,-10.07987 19.59746,-10.06356 z"
     id="path4558"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="aaaaaaaaa" />
  <path
     style="fill:none;stroke:#0000ed;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m 344.27966,197.56356 c 12.26035,-0.30456 25.5788,4.48545 34.42797,12.97669 10.5885,10.16022 17.51589,25.8475 17.21398,40.51907 -0.2794,13.57787 -7.48027,27.60038 -17.4599,36.81145 -8.95578,8.26607 -21.9962,13.17457 -34.18205,12.97669 -13.2941,-0.21588 -27.5112,-5.85832 -36.81144,-15.36017 -8.6229,-8.80982 -13.36567,-22.10127 -13.50636,-34.42797 -0.15236,-13.3485 4.61476,-27.89174 13.77119,-37.60593 9.11148,-9.66649 23.26688,-15.55995 36.54661,-15.88983 z"
     id="path4560"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="aaaaaaaaa" />
  <path
     style="fill:none;stroke:#00aa40;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m 41.313559,153.07203 c 32.676369,0 78.490031,3.2645 117.584751,6.8856 34.91059,3.23355 69.86925,6.85792 104.34322,13.24152 16.80002,3.11088 33.30494,7.68524 49.78813,12.18221 12.98636,3.54296 43.73855,11.29999 38.66526,11.65254 -19.95701,1.38685 -39.13749,7.18503 -48.72882,22.24576 -20.23867,31.77966 -0.83862,54.89455 -6.88559,41.84322 -5.46997,-11.80596 -18.20255,-17.97596 -29.13136,-24.3644 -13.36198,-7.81076 -28.65095,-11.82981 -43.4322,-16.4195 -19.0979,-5.93004 -38.9043,-9.28613 -58.26271,-14.30084 -21.4357,-5.55283 -42.60775,-12.10487 -64.08899,-17.47882 -13.877535,-3.47173 -26.30999,-5.43823 -41.843216,-9.5339 -5.465675,-1.44114 -10.056956,-5.92321 -13.241525,-10.59322 -3.020329,-4.42916 -10.127906,-15.36017 -4.76695,-15.36017 z"
     id="path4562"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="saaasssaaaasas" />
</svg>

矢量编辑器的屏幕截图

在此输入图像描述

笔记：

设计凸轮旋转动画时，请注意旋转的不均匀性：大旋转角度与小角度交替！

相关主题：

  1. 曲柄机构的动画
  2. 如何制作凸轮机构的动画？

比赛将在截止日期后的最后几个小时内结束。
还有很多时间，继续，寻找解决方案！

javascript
Martin Hope
Alexandr_TT
Asked: 2020-08-19 23:04:32 +0000 UTC
  • 17

我试图制作一个圆形相机快门相机，但我很难让它看起来很逼真。

它应该是这样的：

在此处输入图像描述

以下是我尝试过的代码：

let partAmount = 10;
let cont = document.getElementById('cont');
let parts = [];
for(let i = 1; i <= partAmount; i++){
  let partCont = createElement('div','partCont');
  let part = createElement('div','part');
  parts.push(part);
  partCont.appendChild(part);
  cont.appendChild(partCont);
  partCont.style.transform = 'rotate('+ 360 / partAmount * i+'deg) translatey(-250px)';
}
function createElement(tag,className){
  let elem = document.createElement(tag);
  elem.classList.add(className);
  return elem;
}
#cont{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  border-radius: 50%;
}
.dia{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
}
.partCont{
  position: absolute;
  transform-origin: left top;
}
.part{
  width: 500px;
  height: 100px;
  background-color: lightgray;
  border-bottom: 3px solid gray;
  box-sizing: border-box;
  transform-origin: left bottom;
  transform: rotate(60deg);
  transition-duration: 1s;
}
<div class="dia">
  <div id="cont">
  </div>
</div>

第一个“花瓣”应该低于最后一个，高于下一个。

怎么做？

javascript
Martin Hope
Alexandr_TT
Asked: 2020-02-06 21:17:25 +0000 UTC
  • 18

我尝试仅使用纯 CSS 创建 3D 球体，但无法生成所需的形状。我见过 цилиндр ，但我找不到创建真实球体的链接。

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}
<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>

然而：

  • 答：这些只是 2D 圆，不是 3D 形状
  • B：我不能像球图像一样在 3d 中旋转它们（我想要一个旋转图像）。
javascript
Martin Hope
Andrew_STOP_RU_AGRESSION_IN_UA
Asked: 2020-08-28 03:02:43 +0000 UTC
  • 18

无论我搜索了多少，一切都以某种方式痛苦地复杂且过于实用......

我想要最大程度的简单性——像处理二维字符串数组一样处理表格。

我想出的答案如下:)

完整的 CSV 支持应包括：

  1. 更改分隔符的能力
  2. 读取定界符之间的单元格
  3. 阅读线
  4. 如果单元格中有分隔符，单元格必须被引用并由读者自己正常处理
  5. 如果下一行符号在单元格中，则单元格必须用引号括起来，通常由读者自己处理。
  6. 如果单元格是带引号的，而且里面有引号，那么也应该处理无误。
c#
上一页
下一页