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

animejs的时间间隔

1 个答案: