在对象文字 es6 中禁用 scrollmagic 控制器

Question

如果之前禁用了 scrollmagic 控制器，我在尝试重新启用它时遇到问题。

我想让徽标颜色更改仅在它的视口很窄时触发（如果徽标在彩色区域中），如果它很宽则禁用..到目前为止有效

但如果我调整 window 的大小以再次缩小它不会重新启用控制器..我也试图销毁并重置控制器但不知何故它不会重新启用控制器...

codepen（使用 gsap 和 scrollmagic）： https://codepen.io/HendrikEng/pen/owyBYz?editors=0011

js:

const mobile = {
  controller: new ScrollMagic.Controller(),

  changeLogo: {
    init: () => {
      console.log("init tweens an scrollmagic");
      const tweens = {
        enterOuter: () => {
          TweenMax.fromTo(
            ".c-logo__outer",
            1,
            { fill: "#4dabfc" },
            { fill: "#fff" }
          );
        },
        enterInner: () => {
          TweenMax.fromTo(
            ".c-logo__inner",
            1,
            { fill: "#fff" },
            { fill: "#4dabfc" }
          );
        },
        leaveOuter: () => {
          TweenMax.fromTo(
            ".c-logo__outer",
            1,
            { fill: "#fff" },
            { fill: "#4dabfc" }
          );
        },
        leaveInner: () => {
          TweenMax.fromTo(
            ".c-logo__inner",
            1,
            { fill: "#4dabfc" },
            { fill: "#fff" }
          );
        }
      };
      const trigger = document.querySelectorAll(".js-change-logo");

      trigger.forEach(id => {
        const scene = new ScrollMagic.Scene({
          triggerElement: id,
          reverse: true,
          triggerHook: 0.065,
          duration: id.clientHeight
        })
          .on("enter", () => {
            tweens.enterOuter();
            tweens.enterInner();
          })
          .on("leave", () => {
            tweens.leaveOuter();
            tweens.leaveInner();
          })
          .addIndicators()
          .addTo(mobile.controller);
      });
    },
    destroyTweens: () => {
      console.log("kill tweens");
      TweenMax.killTweensOf(".c-logo__outer");
      TweenMax.killTweensOf(".c-logo__inner");
      TweenMax.set(".c-logo__outer", { clearProps: "all" });
      TweenMax.set(".c-logo__inner", { clearProps: "all" });
    }
  }
};

$(window).on("resize", function() {
  var win = $(this); //this = window
  if (win.width() <= 450) {
    // reanble controller if disabledbed before - doesnt work 
    mobile.controller.enabled(true);
    mobile.changeLogo.init();
  } else {
    // disable scrollmagic controller
    mobile.controller.enabled(false);
    // destroy tweens
    mobile.changeLogo.destroyTweens();
  }
}).resize();

Answer 1

@hendrikeng 希望你不要介意，但我对你的代码做了很多改动。我发现自己最近多次需要做同样的事情，所以我的很多工作都是基于我自己的工作。

我认为最大的问题是您运行每次调整大小时都有很多函数，这不是很好的性能，并且也很难跟踪初始化的内容和未初始化的内容。我的依赖于 init_flag，所以它只设置一次。

然后有更新（如果需要调整大小的持续时间）和销毁的方法。

https://codepen.io/motionimaging/pen/848366af015cdf3a90de5fb395193502/?editors=0100

const mobile = {

init_flag: false,

init: () => {

    $(window).on('resize', function(){

        const width = $(window).width();

        if( width <= 450 ){

            if(! mobile.init_flag ){

                mobile.setup();

            } else {

                mobile.update();
            }

        } else {

            if( mobile.init_flag ){

                mobile.destroy();
            }
        }
    });
},

setup: () => {

    mobile.init_flag = true;

    mobile.triggers = document.querySelectorAll('.js-change-logo');

    const tweens = {
        enterOuter: () => {
            TweenMax.fromTo(
                '.c-logo__outer',
                1,
                { fill: '#4dabfc' },
                { fill: '#fff' }
            );
        },
        enterInner: () => {
            TweenMax.fromTo(
                '.c-logo__inner',
                1,
                { fill: '#fff' },
                { fill: '#4dabfc' }
            );
        },
        leaveOuter: () => {
            TweenMax.fromTo(
                '.c-logo__outer',
                1,
                { fill: '#fff' },
                { fill: '#4dabfc' }
            );
        },
        leaveInner: () => {
            TweenMax.fromTo(
                '.c-logo__inner',
                1,
                { fill: '#4dabfc' },
                { fill: '#fff' }
            );
        }
    };

    mobile.controller = new ScrollMagic.Controller();

    mobile.triggers.forEach(el => {
        el.scene = new ScrollMagic.Scene({
            triggerElement: el,
            reverse: true,
            triggerHook: 0.065,
            duration: el.clientHeight
        })
        .on('enter', () => {
            tweens.enterOuter();
            tweens.enterInner();
        })
        .on('leave', () => {
            tweens.leaveOuter();
            tweens.leaveInner();
        })
        .addIndicators()
        .addTo(mobile.controller);
    });
},

update: () => {

    if( mobile.init_flag ){

        mobile.triggers.forEach(el => {
            el.scene.duration(el.clientHeight);
        });
    }
},

destroy: function(){

    mobile.controller.destroy(true);

    mobile.init_flag = false;

    $('.c-logo > *').attr('style', '');
},
};
mobile.init();

在对象文字 es6 中禁用 scrollmagic 控制器

disabling a scrollmagic controller in an object literal es6

javascript

ecmascript-6

gsap

scrollmagic