img src 开关的持续时间，立即动画答案

【问题标题】：duration of img src switch, animates immediatelyimg src 开关的持续时间，立即动画
【发布时间】：2018-09-03 21:06:54
【问题描述】：

我在标题中有一个徽标，向下滚动时，我想反转颜色。我正在使用滚动魔术。我已经用反转版本设置了图像。

这是我目前拥有的：

var logo = $('header.banner .brand img'),
    logo_org = $('header.banner .brand img').data('original'),
    logo_alt = $('header.banner .brand img').data('reverse');

var brandLogo = TweenMax.fromTo("header.banner .brand img", 0.15,
      {onUpdate: function() { $(logo).attr("src", logo_org); }},
      {onUpdate: function() { $(logo).attr("src", logo_alt); }, ease: Linear.easeNone});

    // image src switcher
    new ScrollMagic.Scene({
      triggerElement: ".section-1",
      triggerHook: 0.5
    })
    .setTween(brandLogo)
    .addTo(controller);

.section-1 进入视野，其余的标题动画开始，但在页面加载时徽标已更改为反转版本。

如果我添加：

duration: "100%"

它没有效果，动画仍然立即触发。我尝试了不同的触发钩子、不同的延迟等等，但都无济于事。我到底错过了什么？抱歉，如果这是显而易见的事情，但我才真正开始涉足 scrollmagic 和 gsap。

【问题讨论】：

标签： gsap scrollmagic

【解决方案1】：

无法为 src 属性设置动画。 src 属性在给定时间可以有一个值，而不是两个值的百分比。

为了实现您想要做的事情，您可以将两张图片放在另一张图片上，并使用 GSAP 中的“autoAlpha”调整两者的不透明度。

或者查看一些工作小提琴的类似问题 => Animating "src" attribute

最好的解决方案是使用徽标的 SVG 并将徽标的不同填充属性设置为所需的不同颜色。

【讨论】：