БЛОГ НА HUSL


Как сделать передвижение картинки плавным (анимация)?

Автор вопроса: Виктор 

const INPUT = document.querySelector('input');
const BLOCK = document.querySelector('.block');
const H = document.querySelector('h1');

const update = e => {
  BLOCK.style.setProperty('--distance', e.target.value);
  H.innerHTML = `offset-distance: ${e.target.value}%;`;
};

INPUT.addEventListener('input', update);


function randomInteger(min, max) {
    // случайное число от min до (max+1)
    let rand = min + Math.random() * (max + 1 - min);
    return Math.floor(rand);
}

function rollTheDice(){
    let random_num1 = randomInteger(1, 6);
    let random_num2 = randomInteger(1, 6);
    document.getElementById('dice1-result-text').textContent= "На 1-ом кубике выпало: " + String(random_num1);
    document.getElementById('dice2-result-text').textContent= "На 2-ом кубике выпало: " + String(random_num2);
    //this.current_player.movePlayer(random_num1+random_num2);
    
    let current_len = Number(BLOCK.style.getPropertyValue('--distance'));
    current_len = (current_len + random_num1 + random_num2)%100;
    BLOCK.style.setProperty('--distance', current_len);
    H.innerHTML = `offset-distance: ${ (current_len)}%;`;


}
* {
    box-sizing: border-box;
  }
  body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    min-height: 100vh;
    background: #ddd;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    color: #222;

  }
  :root {
    --line: #0fa;
    --distance: 50;
  }
  svg {
    height: 150px;
    width: 200px;
  }
  path {
    fill: none;
    stroke: var(--line);
    stroke-width: 5px;
  }
  .container {
    position: relative;
    outline: 1px solid #138a23;
  }
  .block {
    offset-path: path('m 44.340015,28.998743 c 23.011905,0.748356 127.781555,0 127.594465,4.864306 -0.18709,4.864304 -2.80633,92.421801 -2.80633,94.666861 0,2.24507 -123.665603,9.16735 -125.910667,5.42557 -2.245066,-3.74177 1.122532,-104.956737 1.122532,-104.956737 z');
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,64,255,0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -110px;
    margin-top: -62px;
    border: 4px solid var(--line);
    offset-distance: calc(var(--distance, 50) * 1%);
    
  }

  .svg-path {
      stroke: rgb(172, 51, 51);
      stroke-width: 10;
      fill: none;
  }
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>test</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">

  <!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
  <input class="roll-dice-btn" id="roll-dice-btn" value="Бросить кубики" onclick="rollTheDice()" type="button">
  <label id="dice1-result-text">На 1-ом кубике выпало: ...</label>
    <label id="dice2-result-text">На 2-ом кубике выпало: ...</label>
  <div class="container">
    <svg class="svg-path" viewBox="10 10 200 100">
      <path d="m 44.340015,28.998743 c 23.011905,0.748356 127.781555,0 127.594465,4.864306 -0.18709,4.864304 -2.80633,92.421801 -2.80633,94.666861 0,2.24507 -123.665603,9.16735 -125.910667,5.42557 -2.245066,-3.74177 1.122532,-104.956737 1.122532,-104.956737 z"></path>
    </svg>
    <div class="block"></div>
  </div>
  <input type="range" min="0" max="100" step="1"/>
  <h1>offset-distance: 50%;</h1>

  <script src="js.js"></script>
</body>
</html>


Источник

Ответы (1 шт):

Автор решения: UModeL

Для плавности, нужно в стилях добавить transition:

const INPUT = document.querySelector('input');
const BLOCK = document.querySelector('.block');
const H = document.querySelector('h1');

const update = e => {
  BLOCK.style.setProperty('--distance', e.target.value);
  H.innerHTML = `offset-distance: ${e.target.value}%;`;
};

INPUT.addEventListener('input', update);

function randomInteger(min, max) {
  // случайное число от min до (max+1)
  let rand = min + Math.random() * (max + 1 - min);
  return Math.floor(rand);
}

function rollTheDice() {
  let random_num1 = randomInteger(1, 6);
  let random_num2 = randomInteger(1, 6);
  document.getElementById('dice1-result-text').textContent = "На 1-ом кубике выпало: " + String(random_num1);
  document.getElementById('dice2-result-text').textContent = "На 2-ом кубике выпало: " + String(random_num2);
  //this.current_player.movePlayer(random_num1+random_num2);
  
  // Берём стили с помощью "getComputedStyle()", а не через "style", потому что, 
  // на момент первого запуска, в "style" у BLOCK отсутствует значение "--distance"
  let current_len = +getComputedStyle(BLOCK).getPropertyValue('--distance');
  
  current_len += random_num1 + random_num2; // % 100
  // Убираем "деление по модулю" из строки, что находиться выше, и используем 
  // его только там, где это необходимо. Например, для вывода в консоль:
  console.log('Прогресс текущей игры:', current_len % 100);
  // Также это может быть полезным, для вычисления количества полных циклов:
  console.log('Игра №:', Math.trunc(current_len / 100) + 1);

  BLOCK.style.setProperty('--distance', current_len);
  H.innerHTML = `offset-distance: ${ (current_len)}%;`;
}
* { box-sizing: border-box; }

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  min-height: 100vh;
  background: #ddd;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  color: #222;
}

 :root {
  --line: #0fa;
  --distance: 50;
}

svg {
  height: 150px;
  width: 200px;
}

path {
  fill: none;
  stroke: var(--line);
  stroke-width: 5px;
}

.container {
  position: relative;
  outline: 1px solid #138a23;
}

.block {
  offset-path: path('m 44.340015,28.998743 c 23.011905,0.748356 127.781555,0 127.594465,4.864306 -0.18709,4.864304 -2.80633,92.421801 -2.80633,94.666861 0,2.24507 -123.665603,9.16735 -125.910667,5.42557 -2.245066,-3.74177 1.122532,-104.956737 1.122532,-104.956737 z');
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 64, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -110px;
  margin-top: -62px;
  border: 4px solid var(--line);
  offset-distance: calc(var(--distance, 50) * 1%);
  transition: 1s ease;
}

.svg-path {
  stroke: rgb(172, 51, 51);
  stroke-width: 10;
  fill: none;
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>test</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">

  <!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
  <input class="roll-dice-btn" id="roll-dice-btn" value="Бросить кубики" onclick="rollTheDice()" type="button">
  <label id="dice1-result-text">На 1-ом кубике выпало: ...</label>
  <label id="dice2-result-text">На 2-ом кубике выпало: ...</label>
  <div class="container">
    <svg class="svg-path" viewBox="10 10 200 100">
      <path d="m 44.340015,28.998743 c 23.011905,0.748356 127.781555,0 127.594465,4.864306 -0.18709,4.864304 -2.80633,92.421801 -2.80633,94.666861 0,2.24507 -123.665603,9.16735 -125.910667,5.42557 -2.245066,-3.74177 1.122532,-104.956737 1.122532,-104.956737 z"></path>
    </svg>
    <div class="block"></div>
  </div>
  <input type="range" min="0" max="100" step="1" />
  <h1>offset-distance: 50%;</h1>

  <script src="js.js"></script>
</body>

</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.