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，并将徽标的不同填充属性设置为所需的不同颜色。

img src切换的持续时间，立即进行动画处理

1 个答案: