GSAP嵌套tween未继承主timeline默认配置问题咨询

基础结论 #

你遇到的是GSAP的正常工作机制：
时间轴的defaults配置作用域仅限当前时间轴直接创建的tween、以及直接添加到当前时间轴的子时间轴顶层属性，不会向下穿透到子时间轴内部的tween实例。
顺序排布场景下所有tween都是直接在主时间轴上创建的，所以可以正常继承defaults；嵌套场景下的tween是在子时间轴内部实例化的，属于子时间轴的直接子元素，只会继承子时间轴自身配置的defaults，不会自动拿到主时间轴的配置。

可行解决方案 #

方案1：抽离公共默认配置为全局变量，所有时间轴统一引用 #

是最灵活的复用方案，不需要修改原有嵌套逻辑，也不会污染全局GSAP配置：

// 抽离公共默认配置
const commonDefaults = {
  duration: 0.75,
  ease: 'power2.inOut',
  yoyoEase: 'sine.out',
}

function robotHover() {
  // 子时间轴传入公共默认配置
  var tl = gsap.timeline({defaults: commonDefaults});
  tl.fromTo(
    '#Robot',
    {y: 2.5},
    {y: -5}
  );
  return tl;
}

function shadowPulse() {
  // 子时间轴传入公共默认配置
  var tl = gsap.timeline({defaults: commonDefaults});
  tl.to('#Shadow', {scale: 0.75});
  return tl;
}

let robotMaster = gsap.timeline({
  defaults: commonDefaults,
  repeat: -1,
  yoyo: true,
});

robotMaster.add(robotHover()).add(shadowPulse(), '<');

方案2：设置GSAP全局默认配置 #

如果该套配置是项目内通用的动画参数，可以直接设置GSAP全局默认值，所有tween没有单独配置的参数都会自动继承该值，不受时间轴嵌套层级影响：

// 全局设置一次即可
gsap.defaults({
  duration: 0.75,
  ease: 'power2.inOut',
  yoyoEase: 'sine.out',
})

// 后续所有时间轴、tween都不需要再重复配置上述参数
function robotHover() {
  var tl = gsap.timeline();
  tl.fromTo('#Robot', {y: 2.5}, {y: -5});
  return tl;
}

function shadowPulse() {
  var tl = gsap.timeline();
  tl.to('#Shadow', {scale: 0.75});
  return tl;
}

let robotMaster = gsap.timeline({
  repeat: -1,
  yoyo: true,
});

robotMaster.add(robotHover()).add(shadowPulse(), '<');

内容的提问来源于stack exchange，提问作者Simon Coudeville