scrollmagic_如何使用ScrollMagic制作咖啡饮用精灵的动画-CSDN博客

scrollmagic

创建滚动启动的动作可能会非常令人满意。我们将深入探讨Casper Mattress网站（由Jonnie Hallman创建）上看到的一种特殊效果，该效果吸引了许多开发人员。在本教程中，我们将分解使用ScrollMagic制作类似sprite动画所需的步骤。

最终结果

让我们来看看我们将要创建的内容：

雪碧

在开始编码之前，我们需要一个精灵作为此演示的基础。这是我们将要使用的：我，享受一杯可爱的咖啡。您可以获取一份副本以遵循本教程。

整个精灵沿x轴以线性方式排列。子画面中的每个图像均为200px x 509px，因此总大小为2000px x 509px（每个图像的宽度为200px乘以十个关键帧）。

已加分

出于好奇，我专门使用了Gulp插件gulp.spritesmith而不是手动将精灵拼凑在一起。虽然不需要创建此演示，但是这里是我使用的设置，以防您想自己尝试：

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function () {
  var spriteData = gulp.src('images/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.css',
    algorithmOpts: { sort: false },
    algorithm: 'left-right',
  }));
  return spriteData.pipe(gulp.dest('images/dist'));
});

重要的是要注意算法属性可以接受各种值，以便将精灵排列为线性，垂直，对角线等。我建议您花时间阅读有关此Gulp插件的更多信息，以适应您将来的任何Sprite需求。

创建标记

标记是我们的演示将在其上生长的土壤，因此我们将首先创建将在其中进行精灵动画的容器。为了使区域滚动，我们还将构造一些虚拟容器。

<section></section>

<section>
  <div></div>
</section>

<section></section>

包含div的中间部分是我们的Sprite运动触发的位置，但是我们需要添加一些类和ID来进行样式和事件挂钩。

<section class="panel"></section>

<section class="panel js-scrollpin">
  <div class="frame"></div>
</section>

<section class="panel"></section>

js-scrollpin类是当用户滚动时视口将从此“固定”的点。此症结将持续一段持续时间，该持续时间是我们JavaScript中定义的持续时间（我们将在接下来的部分中解决）。具有类frame的内部div将是发生滚动魔术的地方。

创建样式

如果没有样式，我们的演示将是不完整的，因此让我们开始吧！为了在编写代码时考虑到更新和细化，我们将使用Sass，使我们能够创建循环和变量以进行简洁的创作。

$frame-count: 9;
$offset-val: 100;

这些变量正在定义：

帧数，等于子画面中的图像数
偏移值，将每个奇异图像的背景位置定位在Sprite内。

您可能会注意到，由于第一帧已经在视图中，因此我只将帧数设置为9，因此序列中还剩下9帧（10-1 = 9）。

我被陷害了

如前所述，子画面中的每个图像都为200px宽，因此我将帧的宽度定义为200px。

.frame {
  width: 200px;
  background-image: url(sprite.png);
  background-repeat: no-repeat;
  background-position: 0 50%;
}

图像被加载为背景并进行相应定位。

现在开始循环：

@for $i from 1 through $frame-count {
  .frame#{$i} {
    background-position: -(($i * $offset-val) * 2) + px 50%;
  }
}

这个Sass循环是最重要的部分。滚动时，每个相关类将通过JavaScript进行切换；这些切换的类名称与子画面中每个图像的位置相关。

.frame1 {
  background-position: -200px 50%;
}

.frame2 {
  background-position: -400px 50%;
}

.frame3 {
  background-position: -600px 50%;
}

.frame4 {
  background-position: -800px 50%;
}

.frame5 {
  background-position: -1000px 50%;
}

.frame6 {
  background-position: -1200px 50%;
}

.frame7 {
  background-position: -1400px 50%;
}

.frame8 {
  background-position: -1600px 50%;
}

.frame9 {
  background-position: -1800px 50%;
}

Sass的编译输出有助于说明此数学的工作原理，但是让我们深入研究以确保我们完全理解算术是如何计算的。

$i * $offset-val

在循环的每次迭代中， $i变量从1到9循环，并乘以偏移值（100）。最后，我们将整个结果乘以2。因数2将有助于相对于每个图像在精灵中的位置移动背景位置。它还与JavaScript中定义的偏移量值匹配，我们将在下一部分中讨论该值。

投放JavaScript

整个效果的关键是JavaScript。对于这个特定的演示，我们将使用ScrollMagic ; 一个用于神奇滚动交互JavaScript库。在编写任何ScrollMagic代码之前，请确保已加载ScrollMagic库。

完成后，我们将建立一些变量。

var frame        = document.querySelector('.frame'),
    frame_count  = 9,
    offset       = 100;

定义的变量应该看起来很熟悉，因为它们直接与我们在Sass中指定的值相关，但使用document.querySelector选择框架类除外。

var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 0
  }
});

控制器是每个滚动容器需要一次的主要类。我们传递的globalSceneOptions对象包含一个triggerHook 。此属性的值可以是0到1之间的数字，用于定义触发器挂钩相对于视口的位置。

new ScrollMagic.Scene({
  triggerHook: 0,
  triggerElement: '.js-scrollpin',
  duration: (frame_count * offset) + 'px',
  reverse: true
})
.setPin('.js-scrollpin')
.addTo(controller);

我们在目标场景中定义一次图钉，然后将动画附加到同一场景中。我们将为每个类创建一个场景，然后根据滚动的偏移值来打开或关闭它们。

分解

还有一些事情需要解释，所以让我们分解重要的部分：

triggerElement: '.js-scrollpin'

Trigger元素是包含我们的Sprite的面板的参考ID。

.setPin('.js-scrollpin')

setPin方法将告诉ScrollMagic，一旦达到triggerElement ，便将该面板固定在视口的顶部。

duration: (frame_count * offset) + 'px',

持续时间将根据帧数和偏移量帮助控制运动发生的时间。您会记得，我们的帧数为9，偏移量为100。这些值相乘时等于900像素；触发偏移点的总值。

for (var i = 1, l = frame_count; i <= l; i++) {
  new ScrollMagic.Scene({
      triggerElement: '.js-scrollpin',
      offset: i * offset
    })
    .setClassToggle(frame, 'frame' + i)
    .addTo(controller);
}

由于有9帧，因此我们遍历了该迭代次数，同时为triggerElement定义了相同的面板。在循环的每次迭代中，我们将该循环的值乘以偏移量（1 * 100、2 * 100、3 * 100…）。我们还定义了一个要切换的类。 .frame1 ， .frame2和.frame3等。每个类代表子画面中每个图像的背景位置。