javascript - animejs的时间间隔

Question

我正在使用 animejs 制作一个动画来展示这种效果，我已经能够在每次 1000 毫秒后显示推送文本并将 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

根据您的代码，您只需添加一个时间轴，以便它们同步(推送的文本按顺序发生)。

源自“Timeline Basics”的示例:

// 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,
});