使用Anime.js实现同步文本动画效果的技术求助

嘿，我看你现在卡在Anime.js动画和文本推送不同步的问题上了——用setInterval每隔1秒切换文本类，但Anime.js的动画延迟没跟上这个节奏对吧？我帮你拆解下问题，然后给你两个靠谱的解决方案。

问题出在哪？ #

你现在用了两套完全独立的时间控制逻辑：

• 一套是setInterval每1000ms更新一次文本的CSS类（比如切换first-para-animation）
• 另一套是单独给每个文本元素创建Anime.js timeline，设置了固定的延迟值（比如4400ms、5500ms）

这两套逻辑没有关联，很容易因为代码执行顺序、浏览器渲染延迟等原因出现错位。另外你第一个timeline的duration设为0，这等于没给动画留执行时间，也会导致效果异常。

解决方案：统一时间线，让动画和文本切换同频 #

我推荐两种方式，第一种更简洁可靠，第二种适合你想保留setInterval逻辑的场景。

方案1：用Anime.js Timeline替代setInterval（强推） #

把所有文本状态切换和动画都放到同一个Anime.js时间线里，这样所有操作都是按顺序执行的，完全不会有同步问题：

// 把constructor里的setInterval逻辑和ionViewDidLoad里的Anime代码替换成下面的内容
ionViewDidLoad() {
  console.log('ionViewDidLoad home page');
  const that = this;

  // 创建主时间线，串联所有操作
  anime.timeline({ loop: false })
    // 第一步：显示第一个文本，同时触发透明度动画
    .add({
      targets: '.onboardtxt.one',
      duration: 100, // 动画执行时长
      opacity: 0.5,
      // 动画完成后切换文本类
      complete: function() {
        that.firstAnimation = "first-para-animation";
      }
    })
    // 等待1000ms（减去上一个动画的100ms时长，所以delay设900），处理第二个文本
    .add({
      targets: '.onboardtxt.two',
      duration: 100,
      opacity: 0.5,
      delay: 900,
      complete: function() {
        that.firstAnimation = "first-second-fire-animation";
        that.secondAnimation = "second-para-animation";
      }
    })
    // 再等1000ms，处理第三个文本
    .add({
      targets: '.onboardtxt.three',
      duration: 100,
      opacity: 0.5,
      delay: 900,
      complete: function() {
        that.secondAnimation = "second-second-fire-animation";
        that.thirdAnimation = "third-para-animation";
      }
    })
    // 继续等1000ms，处理第四个文本
    .add({
      targets: '.onboardtxt.four',
      duration: 100,
      opacity: 0.5,
      delay: 900,
      complete: function() {
        that.thirdAnimation = "third-second-fire-animation";
        that.forthAnimation = "forth-para-animation";
      }
    })
    // 最后一步：所有文本处理完后的操作
    .add({
      delay: 900,
      complete: function() {
        that.truthy = true;
        // that.bottomStyle = "no-margin"
      }
    });

  // 底部元素的动画也可以整合进来，比如放在最开始
  anime.timeline({ loop: false })
    .add({
      targets: 'div.bottom',
      translateY: [{ value: 10 }],
      easing: "easeOutQuart",
      duration: 400,
      delay: 0
    });
}

方案2：保留setInterval，但同步动画触发时机 #

如果你不想改动setInterval的逻辑，那就在每次切换文本类的同时触发对应的Anime.js动画，不要用固定延迟：

// 修改ionViewDidLoad和constructor里的代码
ionViewDidLoad() {
  console.log('ionViewDidLoad home page');
  const that = this;

  // 先处理底部元素的动画
  anime.timeline({ loop: false })
    .add({
      targets: 'div.bottom',
      translateY: [{ value: 10 }],
      easing: "easeOutQuart",
      duration: 400,
      delay: 0
    });

  // 定义动画触发函数
  const animateText = (target) => {
    anime({
      targets: target,
      duration: 100,
      opacity: 0.5,
      delay: 0 // 立即触发，和文本类切换同步
    });
  };

  // 修改原来的timer逻辑，切换类的同时触发动画
  var count = 0;
  var timer = function () {
    count += 1;
    switch(count) {
      case 1:
        that.firstAnimation = "first-para-animation";
        animateText('.onboardtxt.one');
        break;
      case 2:
        that.firstAnimation = "first-second-fire-animation";
        that.secondAnimation = "second-para-animation";
        animateText('.onboardtxt.two');
        break;
      case 3:
        that.secondAnimation = "second-second-fire-animation";
        that.thirdAnimation = "third-para-animation";
        animateText('.onboardtxt.three');
        break;
      case 4:
        that.thirdAnimation = "third-second-fire-animation";
        that.forthAnimation = "forth-para-animation";
        animateText('.onboardtxt.four');
        break;
      case 5:
        that.truthy = true;
        // that.bottomStyle = "no-margin"
        clearInterval(interval);
        break;
    }
  };

  var interval = setInterval(timer, 1000);
}

几个关键注意点 #

• 不要用多个独立timeline：单个timeline可以按顺序串联所有动画，同步性比多个独立timeline好太多。
• delay和duration要匹配：如果你的文本间隔是1000ms，那么上一个动画的duration + 下一个动画的delay要等于1000ms（比如100+900），这样间隔刚好是1秒。
• 避免duration=0：动画时长设为0的话，浏览器不会渲染过渡效果，等于直接设置样式，会破坏动画节奏。

内容的提问来源于stack exchange，提问作者G B