15

Анимация планетарного механизма.

При нажатии на кнопку Stop анимация вращения шестеренок должна останавливаться и изображение "замораживаться". Но в реальности изображение возвращается к исходному состоянию. Это видно по желтым маркерам на шестеренках. Как добиться, чтобы при нажатии на кнопку Stop изображение замерло в текущем состоянии и при последующем нажатии на кнопку GO анимация началась не сначала, а с зафиксированного состояния.

Ответ - надо убрать желтые маркеры не принимается :-)

<style>
.container {
width:35vw;
height:35vh;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink'  viewBox="0 0 400 400" >
  <title>animation planetary mechanism</title>
  <defs>
    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">
      <rect width="14" height="10" rx="2" fill="#22211D" />
    </marker>
    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;
                 marker-end: url(#MarkerArrow);
                 marker-start: url(#MarkerArrow);
               stroke:#22211D; stroke-width:6; ">
    </line>
    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">
      <rect width="7" height="3.5" rx="2" fill="#22211D" />
    </marker>
    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;
             marker-end: url(#MarkerArrow-s1);
             marker-start: url(#MarkerArrow-s);
           stroke:#22211D; stroke-width:2; ">

    </line>
    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">
      <stop offset="0%" stop-color="powderblue" />
      <stop offset="100%" stop-color="lightgreen" />
    </linearGradient>

  </defs>
  <rect width="100%" height="100%" fill="url(#vertical)" />
  <g transform="translate(90,50)">

    <g id="wheel">
      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" end="stop1.click" dur="14s" repeatCount="indefinite" />
        <use xlink:href="#line1" transform="rotate(0 100 100)" />
        <use xlink:href="#line1" transform="rotate(120 100 100)" />
        <use xlink:href="#line1" transform="rotate(240 100 100)" />


        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />
        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />
        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />
        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
      </g>
    </g>

    <g id="col-small">

      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" end="stop1.click" dur="3.5s" repeatCount="indefinite" />
        <use xlink:href="#line-s" transform="rotate(0 188 100)" />
        <use xlink:href="#line-s" transform="rotate(120 188 100)" />
        <use xlink:href="#line-s" transform="rotate(240 188 100)" />

        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />
        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />
        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />
        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>
    </g>
    <desc>animation planetary mechanism https://svg-art.ru in pure svg</desc>
    <g id="planetar">
      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" end="stop1.click" dur="28s" repeatCount="indefinite" />

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />
        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />
        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
      </g>
    </g>

    <g>
      <use xlink:href="#col-small" transform="rotate(240 100 100)" />
      <use xlink:href="#col-small" transform="rotate(120 100 100)" />
    </g>

    <g transform="translate(-10,180)">
      <g id="gO1">
        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />
        <text x="62" y="102" font-size="16" fill="yellow">GO</text>
      </g>
      <g id="stop1">
        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />
        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>
      </g>
    </g>

  </g>
</svg> 
</div>

8
  • Боюсь вряд ли кто-то ответит )
    – Yuri
    21 янв 2017 в 18:44
  • @Yuri А если использовать связку canvas+js+css, но без SVG и картинок, включенных в js, возможно ли это сделать? Меня интересуют не теоретические доводы, но практические примеры кода. Очень нужно... 21 янв 2017 в 19:48
  • Я в canvas почти 0. Я могу такое сделать с помощью html+js+css
    – Yuri
    21 янв 2017 в 19:49
  • Буду ждать примеров 21 янв 2017 в 19:51
  • Зачем вам html, если вам нужно по svg? Вы на каком-то примере у себя на сайте ставили паузу. Не можете повторить такое же?
    – Yuri
    21 янв 2017 в 19:54

3 ответа 3

10

С svg особо не работал, так что вот что нагуглил:
Анимацию можно запустить/остановить через методы unpauseAnimations/pauseAnimations соответственно.

Можно сделать так:

let flag = 0,
    svg = document.querySelector('svg');

// Необходимо поймать второй клик (если на первом удалить атрибуты, анимация не начнётся), потом подменяем функцию на вызов по "разморозке" анимации
let start = function(){
  if(flag === 1){
    // Убираем у animateTransform триггер, чтобы не сбрасывалась анимация на ноль
    Array.from(svg.querySelectorAll('animateTransform')).forEach(e => e.removeAttribute('begin'));
    start = _ => svg.unpauseAnimations();
    start();
  }
  flag++;
}

const pause = function(){
  svg.pauseAnimations();
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" style="border:1px solid red;">
  <title>animation planetary mechanism</title>
  <defs>
    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">
      <rect width="14" height="10" rx="2" fill="#22211D" />
    </marker>
    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;
				 marker-end: url(#MarkerArrow);
				 marker-start: url(#MarkerArrow);
			   stroke:#22211D; stroke-width:6; ">
    </line>
    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">
      <rect width="7" height="3.5" rx="2" fill="#22211D" />
    </marker>
    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;
			 marker-end: url(#MarkerArrow-s1);
			 marker-start: url(#MarkerArrow-s);
		   stroke:#22211D; stroke-width:2; ">

    </line>
    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">
      <stop offset="0%" stop-color="powderblue" />
      <stop offset="100%" stop-color="lightgreen" />
    </linearGradient>

  </defs>
  <rect width="100%" height="100%" fill="url(#vertical)" />
  <g transform="translate(90,50)">

    <g id="wheel">
      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" dur="14s" repeatCount="indefinite" />
        <use xlink:href="#line1" transform="rotate(0 100 100)" />
        <use xlink:href="#line1" transform="rotate(120 100 100)" />
        <use xlink:href="#line1" transform="rotate(240 100 100)" />


        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />
        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />
        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />
        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
      </g>
    </g>

    <g id="col-small">

      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" dur="3.5s" repeatCount="indefinite" />
        <use xlink:href="#line-s" transform="rotate(0 188 100)" />
        <use xlink:href="#line-s" transform="rotate(120 188 100)" />
        <use xlink:href="#line-s" transform="rotate(240 188 100)" />

        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />
        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />
        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />
        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>
    </g>
    <desc>animation planetary mechanism https://svg-art.ru in pure svg</desc>
    <g id="planetar">
      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" dur="28s" repeatCount="indefinite" />

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />
        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />
        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
      </g>
    </g>

    <g>
      <use xlink:href="#col-small" transform="rotate(240 100 100)" />
      <use xlink:href="#col-small" transform="rotate(120 100 100)" />
    </g>

    <g transform="translate(-10,180)">
      <g id="gO1" onclick='start();'>
        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />
        <text x="62" y="102" font-size="16" fill="yellow">GO</text>
      </g>
      <g onclick='pause();'>
        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />
        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>
      </g>
    </g>

  </g>
</svg>

11
  • @Alexandr_T, главное что решение помогло. И если проблема решена, примите ответ (галочка слева от ответа).
    – user207618
    14 мар 2017 в 16:21
  • 1
    @Alexandr_T, я не про конкурс, а про решение, которое принимает автор. Конкурс - это дополнительные фичи.
    – user207618
    14 мар 2017 в 16:29
  • 1
    возможно есть решение проще, поэтому еще 7 дней подожду
    – SVE
    14 мар 2017 в 18:55
  • 2
    @Other, да всем неугодил. jquery как использовали так и используют во всех плагинах да и в базовых элементах стр. и неважно какой год, если он удобнее вашего es6 (на который нет нормальной док. на русском) и уж тем-более всего прочего, так его еще лет 10 будут использовать.
    – SVE
    15 мар 2017 в 11:02
  • 3
    @Other, я предпочитаю надежность и практичность. Не считаю jq самим языком, я считаю что это удобная и простая в использовании библиотека. Как показывает практика новые плюшки можно только в codepen использовать, но не в реальных проектах.
    – SVE
    15 мар 2017 в 11:37
6
+50

Взял код @Other и беззастенчиво переписал с использованием старого доброго жуквери:

var flag = 0,
    svg = document.querySelector('svg'),
    $svg = $(svg);

// Необходимо поймать второй клик (если на первом удалить атрибуты, анимация не начнётся), потом подменяем функцию на вызов по "разморозке" анимации
var start = function(){
  if(flag === 1){
    // Убираем у animateTransform триггер, чтобы не сбрасывалась анимация на ноль
    $svg.find('animateTransform').removeAttr('begin');
    
    start = function() {
      svg.unpauseAnimations()
    };
    
    start();
  }
  flag++;
}

var pause = function(){
  svg.pauseAnimations();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >
  <title>animation planetary mechanism</title>
  <defs>
    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">
      <rect width="14" height="10" rx="2" fill="#22211D" />
    </marker>
    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;
                 marker-end: url(#MarkerArrow);
                 marker-start: url(#MarkerArrow);
               stroke:#22211D; stroke-width:6; ">
    </line>
    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">
      <rect width="7" height="3.5" rx="2" fill="#22211D" />
    </marker>
    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;
             marker-end: url(#MarkerArrow-s1);
             marker-start: url(#MarkerArrow-s);
           stroke:#22211D; stroke-width:2; ">

    </line>
    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">
      <stop offset="0%" stop-color="powderblue" />
      <stop offset="100%" stop-color="lightgreen" />
    </linearGradient>

  </defs>
  <rect width="100%" height="100%" fill="url(#vertical)" />
  <g transform="translate(90,50)">

    <g id="wheel">
      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" dur="14s" repeatCount="indefinite" />
        <use xlink:href="#line1" transform="rotate(0 100 100)" />
        <use xlink:href="#line1" transform="rotate(120 100 100)" />
        <use xlink:href="#line1" transform="rotate(240 100 100)" />


        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />
        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />
        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />
        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
      </g>
    </g>

    <g id="col-small">

      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" dur="3.5s" repeatCount="indefinite" />
        <use xlink:href="#line-s" transform="rotate(0 188 100)" />
        <use xlink:href="#line-s" transform="rotate(120 188 100)" />
        <use xlink:href="#line-s" transform="rotate(240 188 100)" />

        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />
        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />
        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />
        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>
    </g>
    <desc>animation planetary mechanism https://svg-art.ru in pure svg</desc>
    <g id="planetar">
      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" dur="28s" repeatCount="indefinite" />

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />
        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />
        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
      </g>
    </g>

    <g>
      <use xlink:href="#col-small" transform="rotate(240 100 100)" />
      <use xlink:href="#col-small" transform="rotate(120 100 100)" />
    </g>

    <g transform="translate(-10,180)">
      <g id="gO1" onclick='start();'>
        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />
        <text x="62" y="102" font-size="16" fill="yellow">GO</text>
      </g>
      <g onclick='pause();'>
        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />
        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>
      </g>
    </g>

  </g>
</svg>

0
5

Решение JS

На клавишу stop повешен обработчик события <g id="stop1" onclick='Pause()'>

Функция

 function Pause()
  {  
     SVGRoot.pauseAnimations();
  };

останавливает все запущенные анимации внутри svg до тех пор пока не будет запущена

функция unpauseAnimations(), которая запускает анимации ровно с того места, где она была остановлена предыдущей командой

 var SVGDocument = null;
  var SVGRoot = null;
  var pauseButton = null;
  var playButton = null;
  var innerCircle = null;
  var outerCircle = null;
  var smallerCircle = null;

  function Init(evt)
  {  
     SVGDocument = evt.target.ownerDocument;
     SVGRoot = SVGDocument.getElementById('SVGRoot')

     pauseButton = SVGDocument.getElementById('stop1');
     playButton = SVGDocument.getElementById('gO1');
     innerCircle = SVGDocument.getElementById('innerCircle');;
     outerCircle = SVGDocument.getElementById('outerCircle');;
     smallerCircle = SVGDocument.getElementById('smallerCircle');;
  };

  function Pause()
  {  
     SVGRoot.pauseAnimations();
  };

  function Play()
  {
     if(SVGRoot.animationsPaused()){
        SVGRoot.unpauseAnimations();
     }
     else{
         innerCircle.beginElement();
         outerCircle.beginElement();
         smallerCircle.beginElement();
     }
  };
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" onload='Init(evt)' id = "SVGRoot">
  <title>animation planetary mechanism</title>
  <defs>
    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">
      <rect width="14" height="10" rx="2" fill="#22211D" />
    </marker>
    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;
				 marker-end: url(#MarkerArrow);
				 marker-start: url(#MarkerArrow);
			   stroke:#22211D; stroke-width:6; ">
    </line>
    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">
      <rect width="7" height="3.5" rx="2" fill="#22211D" />
    </marker>
    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;
			 marker-end: url(#MarkerArrow-s1);
			 marker-start: url(#MarkerArrow-s);
		   stroke:#22211D; stroke-width:2; ">

    </line>
    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">
      <stop offset="0%" stop-color="powderblue" />
      <stop offset="100%" stop-color="lightgreen" />
    </linearGradient>

  </defs>
  <rect width="100%" height="100%" fill="url(#vertical)" />
  <g transform="translate(90,50)">

    <g id="wheel">
      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" id = "innerCircle" begin="click" repeatCount="indefinite" />
        <use xlink:href="#line1" transform="rotate(0 100 100)" />
        <use xlink:href="#line1" transform="rotate(120 100 100)" />
        <use xlink:href="#line1" transform="rotate(240 100 100)" />


        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />
        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />
        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />
        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
      </g>
    </g>

    <g id="col-small">

      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" id = "smallerCircle" begin="click"  dur="3.5s" repeatCount="indefinite" />
        <use xlink:href="#line-s" transform="rotate(0 188 100)" />
        <use xlink:href="#line-s" transform="rotate(120 188 100)" />
        <use xlink:href="#line-s" transform="rotate(240 188 100)" />

        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />
        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />
        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />
        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>
    </g>
    
    <g id="planetar">
      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" id = "outerCircle" begin="click" dur="28s" repeatCount="indefinite" />

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />
        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />
        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
      </g>
    </g>

    <g>
      <use xlink:href="#col-small" transform="rotate(240 100 100)" />
      <use xlink:href="#col-small" transform="rotate(120 100 100)" />
    </g>

    <g transform="translate(-10,160)">
      <g id="gO1" onclick='Play()'>
        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />
        <text x="62" y="102" font-size="16" fill="yellow">GO</text>
      </g>
      <g id="stop1" onclick='Pause()'>
        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />
        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>
      </g>
    </g>

  </g>
</svg>

3
  • Все молодцы, но все ответы неправильные))) Нужно регулировать скорость вращения сообразно количеству зубьев (даже не размеру шестерней, а именно количеству зубьев). Ничего займусь я вами, распустились)))
    – Leonid
    27 сен 2021 в 16:18
  • 1
    @Leonid согласен, нужно было учитывать Передаточное число 27 сен 2021 в 16:23
  • 1
    На JS не проблема делать паузы, а вот подкорректировать передаточные числа будет интересно. Займусь при случае. И заодно манипуляции через JS тоже.
    – Leonid
    27 сен 2021 в 16:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.