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

Question

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

这就是我目前所拥有的：

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。

Answer 1

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

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

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

最佳解决方案是使用徽标的SVG，并将徽标的不同填充属性设置为您想要的不同颜色。