animejs的时间间隔

Question

我正在制作动画以使用animejs显示这种效果，我已经能够显示每个1000ms后推文本并将opercity更改为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,
});