前言

在我的日常工作中常常会用到TweenMax 和 ScrollMagic 来编写一些比较复杂的动画.基本上都能够较完整的完成需求.

问题描述

当页面滑动过快会出现以下情况 img

代码如下 下面代码是页面进入时 title desc 和 text 的动画,很简单,就是简单的浮动

var f2 = new TimelineMax()
 
  .from(
    `${className}.hdPlus .title`,
    1,
    { y: computeTrans(150), opacity: 0 },
    'c'
  )
 
  .from(
    `${className}.hdPlus .desc`,
    1,
    { y: computeTrans(150), opacity: 0 },
    'c'
  )
 
  .from(`${className}.hdPlus .text`, 1, { x: computeTrans(-250) }, 'c');
 
new ScrollMagic.Scene({
  triggerElement: className,
  triggerHook: 0,
  offset: computeOffset(-520),
})
  .setTween(f2)
  .addTo(controller);

后续的动画中也会对 title desc 和 text 进行操作 XXX 为其他动画

var f1 = new TimelineMax()
 
  .to(`${className}.hdPlus .title`, 1, { opacity: 0 }, 'aa')
 
  .to(`${className}.hdPlus .desc`, 1, { opacity: 0 }, 'aa')
 
  .to(`${className}.hdPlus .text`, 1, { opacity: 0 }, 'aa');
 
XXXX;
 
new ScrollMagic.Scene({
  triggerElement: className,
  triggerHook: 0,
  offset: computeOffset(0),
  duration: computeDuration(1.5),
})
  .setTween(f1)
  .addTo(controller);

所以经过分析第一次的动画需要 1s 的运动时间,如果在 1s 中触发第二次的动画,那么这两次动画同时会对相同的 title desc 和 text 产生影响所以出现这个 bug

解决问题

根据问题,我们很好得知如何解决,不过就是不要同时触发就解决了,所以问题迎刃而解,~~我们让用户滑动慢点就可以了~~,或者还有一种方式,当我们动画 2 开始运动时,我们让动画一直接快进到结尾,所以咋就去TweenMax翻文档了,经过查阅,发现还真有一个很符合我的想法的. img

完成一半,那么如何在第二段动画开始前去执行这个呢,我又去到ScrollMagic翻文档,又极其幸运的发现了 img

那么这两个双剑合璧,问题就解决了,所以最终代码如下,就是增加了 18 ～ 20 行代码

var f1 = new TimelineMax()
 
  .to(`${className}.hdPlus .title`, 1, { opacity: 0 }, 'aa')
 
  .to(`${className}.hdPlus .desc`, 1, { opacity: 0 }, 'aa')
 
  .to(`${className}.hdPlus .text`, 1, { opacity: 0 }, 'aa');
 
XXXX;
 
new ScrollMagic.Scene({
  triggerElement: className,
  triggerHook: 0,
  offset: computeOffset(0),
  duration: computeDuration(1.5),
})
  .on('start', function (event) {
    f2.pause(2, false);
  })
  .setTween(f1)
  .addTo(controller);

小结

很多问题并不难,但是得多看文档！！！