7

Хочу сделать анимацию длины div блока с рандомной финальной точкой и alternate-reverse. Но я не представляю как это сделать, и возможно ли это вообще. Ведь придется каждый раз пересоздавать @keyframes. Наверно и с svg придется постоянно вносить изменения в css. Есть какое-то решение или мне лучше забыть про эту идею?

введите сюда описание изображения

7

2 ответа 2

7

Вот такое, может, натолкнёт вас на нужные мысли:
Использована библиотека GSAP

const lineRed = document.querySelector('.line-red');
const btn = document.querySelector('.btn');
const lineRedMaxWidth = parseFloat(window.getComputedStyle(lineRed)['max-width']);

class RandomNumber {

  constructor(numbers) {
    this.numbers = numbers.slice();
  }

  random(numbers) { // генерация рандомного числа на основе длины массива
    const randomIdx = Math.floor(Math.random() * numbers.length);
    const randomNumber = numbers[randomIdx];
    return {num: randomNumber, idx: randomIdx};
  };

  get nextNumber() {
    const numbers = this.numbers.slice();
    let randomNumber = this.random(numbers);

    if (this.lastRdnNumber && this.lastRdnNumber.num === randomNumber.num) {
      // this.lastRdnNumber cуществует и прошлое число равняется текущему сгенерированному
      numbers.splice(randomNumber.idx, 1); // вырезать число из массива, которое уже было
      randomNumber = this.random(numbers);
    }
  
    this.lastRdnNumber = randomNumber;
    return randomNumber.num;
  }
  
  get lastNumber() {
    if (this.lastRdnNumber) {
      return this.lastRdnNumber.num;
    } else {
      return 0;
    } 
  }
}

function completeTl() {
  btn.classList.remove('noActive');
  tlCompleteBool = true;
}

const numbers = [0.2, 0.4, 0.7, 0.6, 0.1, 1];
const randomNumber = new RandomNumber(numbers);
let tlCompleteBool = true;
const tl = gsap.timeline({defaults: {duration: 0.5}})
tl.from(lineRed, {width: 0, duration: 0});

btn.addEventListener('click', (e) => {
  if (tlCompleteBool === true) {
    tlCompleteBool = false;
    btn.classList.add('noActive');
    const lastNumber = randomNumber.lastNumber;
    const nextNumber = randomNumber.nextNumber;
    tl.to(lineRed, {width: `${lineRedMaxWidth * nextNumber}%`})
      .to(lineRed, {width: `${lineRedMaxWidth * lastNumber}%`})
      .to(lineRed, {width: `${lineRedMaxWidth * nextNumber}%`, onComplete: completeTl});
  }
});
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
}

.line-wrapper {
  max-width: 400px;
  min-height: 30px;
  position: relative;
  z-index: 1;
  --heightLine: 2px;
}

.line-black {
  background-color: black;
  height: var(--heightLine);
  width: 90%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.line-red {
  position: absolute;
  --left: 4%;
  --maxWidth: calc( 100% - (var(--left) * 2));
  left: var(--left);
  max-width: var(--maxWidth);
  width: 0;
  top: 50%;
  height: calc( var(--heightLine) * 5);
  z-index: 2;
  background-color: red;
  border-radius: calc( var(--heightLine) * 2.5);
  transform: translate(0, -50%);
  transform-origin: 0 0;
}

.btn {
  outline: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  background-color: black;
  color: white;
  display: inline-block;
  padding: 5px 10px;
  user-select: none;
  cursor: pointer;
  border-radius: 10px;
  transition-timing-function: ease;
  transition-duration: 0.2s;
  transition-property: box-shadow, color, opacity;
}

.btn.noActive {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn:not(.noActive):hover {
  box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
}

.btn:not(.noActive):active {
  color: #ffc107;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>


<div class="line-wrapper">
  <div class="line-black"></div>
  <div class="line-red"></div>
</div>

<button class="btn">Анимируй</button>

5

Если я вас правильно понял, то такую анимацию на чистом css сделать нельзя. Предлагаю своё решение на JavaScript:

document.addEventListener("DOMContentLoaded", () => {
  const randomFinal = ["35", "50", "90"];
  const randomNumber = Math.floor(Math.random() * randomFinal.length);
  const randomPercent = randomFinal[randomNumber];
  document.querySelector(".progress-line").animate([
    // keyframes
    { width: `${randomPercent}%` },
  ], {
    // timing options
    duration: 1000,
    iterations: 2, // "Infinity"
    direction: "alternate-reverse",
    fill: "both",
  })
});
* {
  box-sizing: border-box;
}
.site-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.progress {
  position: relative;
  width: 200px;
  height: 3px;
  background: #000;
}
.progress-line {
  display: inline-block;
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 0%;
  height: 200%;
  border-radius: 7px;
  background-color: red;
}
<div class="site-container">
  <div class="progress">
    <div class="progress-line"></div>
  </div>
</div>

Ваш ответ

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

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