时间戳

首页 > 解决方案 > img src 开关的持续时间，立即动画

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

问题描述

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

这是我目前拥有的：

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。

标签： gsapscrollmagic

解决方案

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

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

或者查看一些工作小提琴的类似问题=>动画“src”属性

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

推荐阅读