Умный способ улучшить эту функцию javascript

#javascript #html #animation

#javascript #HTML #Анимация

Вопрос:

Итак, у меня есть эта функция для анимации в javascript

 anime.timeline({loop: true})
  

.add({
    targets: '.ml5 .line',
    opacity: [0.5,1],
    scaleX: [0, 1],
    easing: "easeInOutExpo",
    duration: 1000
  }).add({
    targets: '.ml5 .line',
    duration: 1000,
    easing: "easeOutExpo",
    translateY: (_el, i) => (-0.625   0.625*2*i)   "em"
  })
   .add({
    targets: '.ml5 .letters-left',
    opacity: [0,1],
    translateX: ["0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=300'
  }).add({
    targets: '.ml5 .letters-right',
    opacity: [0,1],
    translateX: ["-0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=600'
  }).add({
    targets: '.ml5',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000 ,
  });

И что я хочу сделать, так это заставить его прекратить цикл после первой анимации (в основном он показывает перемещение строк, затем появляется текст, и после этого я хочу, чтобы он оставался статичным на моем сайте). Самый простой способ, которым я мог бы заставить это сделать, — это просто привязать значение задержки к бесконечности, но это не кажется правильным, есть ли какие-либо другие варианты, более «академические»

1. Предположение из-за вашей первой строки: вам не хватает anime.js тега?

2. Аа нет это и есть вся функция

3. Позвольте мне еще раз уточнить, ваш вопрос ни в коем случае не показывает, что это связано с anime.js — я только предполагаю, потому что я слышал это имя пару раз раньше. В противном случае, что это anime такое? Это не глобальный браузер JavaScript по умолчанию. После перехода на anime.js веб-сайт это тоже очень похоже на ту библиотеку.

Ответ №1:

Задайте false параметр здесь:

 anime.timeline ({loop: false})

и удалите opacity: 0 in targets: '.ml5' .

Это должно быть так:

 anime.timeline({loop: false})
.add({
    targets: '.ml5 .line',
    opacity: [0.5,1],
    scaleX: [0, 1],
    easing: "easeInOutExpo",
    duration: 1000
  }).add({
    targets: '.ml5 .line',
    duration: 1000,
    easing: "easeOutExpo",
    translateY: (_el, i) => (-0.625   0.625*2*i)   "em"
  })
   .add({
    targets: '.ml5 .letters-left',
    opacity: [0,1],
    translateX: ["0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=300'
  }).add({
    targets: '.ml5 .letters-right',
    opacity: [0,1],
    translateX: ["-0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=600'
  }).add({
    targets: '.ml5',
    //opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000 ,
  });