Временные интервалы с анимеем

Question

Я работаю над анимацией, чтобы показать этот вид эффекта, используя animejs, я смог показать push текст после 1000 мс каждый и изменить коэффициент на 0.5.Но он не синхронизирован, как в этом GIF, что я могу сделать, чтобы сделать эффект эффективным для задержки и продолжительности.

Мой HTML-кодс текстом весь текст, который показан на базе цикла.

<div class="onboarding-content">
    <div [class]="bottomStyle">
      <div class="onboardtxt one">
        <p [class]="firstAnimation">Hello, Meet Mat</p>
      </div>
      <div class="onboardtxt two">
        <p [class]="secondAnimation">Some text</p>
      </div>
      <div class="onboardtxt three">
        <p [class]="thirdAnimation">Some text two </p>
      </div>
      <div class="onboardtxt four">
        <p [class]="forthAnimation">Some text three</p>
      </div>
    </div>
  </div>

Мой файл js

// Animation
  count: number;
  display: string = "display";
  firstAnimation: string = "first";
  secondAnimation: string = "second";
  thirdAnimation: string = "third";
  forthAnimation: string = "forth"
  truthy: any;
  bottomStyle: string = "bottom"

  constructor(public navCtrl: NavController) {
    var messages = ['1','2','3','4','5']

    var count = 0;
    var that = this
    var timer = function () {
      if (count === 1) {
        that.firstAnimation = "first-para-animation";
      } else if (count === 2) {
        that.firstAnimation = "first-second-fire-animation";
        that.secondAnimation = "second-para-animation";
      } else if (count === 3) {
        that.secondAnimation = "second-second-fire-animation";
        that.thirdAnimation = "third-para-animation";
      } else if (count === 4) {
        that.thirdAnimation = "third-second-fire-animation";
        that.forthAnimation = "forth-para-animation";
      } else if (count === 5) {
        that.truthy = true;
        // that.bottomStyle = "no-margin"
      }
      // check the length of count before pushing 
      if (count < messages.length) {
        count += 1
      } else {
        clearInterval(interval)
      }
    }
    // //  setting the interval after how long it should call the timer function
    var interval = setInterval(timer, 1000)
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad home page');
    anime.timeline({ loop: false })
      .add({
        targets: 'div.bottomStyle',
        translateY: [
          { value: 10, delay: 0 },
          // { value: 0, duration: 400 },
        ],
        easing: "easeOutQuart",
        duration: 0,
        // delay: function (el, i, l) {
        //   return 1000 * i;
        // },
        // delay: function(el, i) {
        //   return 800 * i;
        // },
        color: '#fff'
      })
      anime.timeline({ loop: false })
      .add({
        targets: ['.onboardtxt.one',],
        duration:100,
        // delay:1200,
        opacity: 0.5

      })
      anime.timeline({ loop: false })
      .add({
        targets: ['.onboardtxt.two',],
        // delay:1300,
        delay:4400,
        opacity: 0.5,

        // opacity: 0.5,
      })
      anime.timeline({ loop: false })
      .add({
        targets: ['.onboardtxt.three',],
        delay:5500,
        opacity: 0.5,

        // delay:500
      });
  }

Answer 1

Вы смотрели документацию с тех пор?Это довольно хорошо: https://animejs.com/documentation/#timelineBasics

Исходя из вашего кода, вам нужно добавить только одну временную шкалу, чтобы они синхронизировались (отправляемые тексты выполняются последовательно).

Пример, полученный из "Основы временной шкалы ":

// Create a timeline with default parameters
var tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

// Add children
tl
.add({
  targets: '.onboardtxt.one',
  translateX: 250,
})
.add({
  targets: '.onboardtxt.two',
  translateX: 250,
})
.add({
  targets: '.onboardtxt.three',
  translateX: 250,
});