如何实现滚动驱动动画
站长
· 阅读数 45
效果参考
最近需要实现一个滚动驱动动画，UI提供了一个参考的网址，如下：
从第三屏开始，鼠标滚动到这里时整个页面不再下移（实际上有在移动，只是可视区域sticky了），屏幕底部有四个颜色的板块随着滚动逐一放大到一定大小，再随着相邻的下一个板块的放大而缩小，期间板块内的文本与图片也在发生透明度、大小、位移等变化。
原理上其实不难，无非是根据不同的滚动值，动态设置发生动画元素的css属性，比如透明度、大小、位移等；但还有一些问题需要解决。
需要解决的问题
-
首先是页面的暂留效果，上文提到使用了可视区域sticky的方式，只需要在sticky区域外包一个足够长的元素，就可以保证在一定时间内的滚动时，页面就像不动了一样；
-
其次是边界问题，需要搞清楚动画从什么时候开始，从什么时候结束，我们发现其实动画的开始与结束与最外层的长元素的边界相关——滚动到上边沿时开始，滚动到下边沿时结束；
-
最后是动画的执行策略，我们发现参考网址的四色板块执行动画的方式是逐个执行，假如把动画发生过程中滚动的总长度设为1份，那么每个板块执行动画所滚动的长度应该是1/4份。当然出于封装代码的通用性考虑，最好要能支持更多的情况，比如所有发生动画的元素同时开始，同时结束，都占满整个滚动的长度。
初步尝试
html
先写一个简单的布局，#playground作为最外层的长元素，.animation-container作为充满视口的sticky元素，最内层暂时只写一个动画元素.animation-item。
<div id="playground">
<div class="animation-container">
<div class="animation-item"></div>
</div>
</div>
css
样式如下，#playground取了5个视口的高度，和sticky层分别用红色和蓝色边框区分，动画元素暂时先使用一个简单的正方形，初始透明度为0，绿色。
#playground {
height: 500vh;
border: 1px solid red;
padding: 0 200px;
box-sizing: border-box;
}
.animation-container {
position: sticky;
top: 0;
height: 100vh;
border: 1px solid blue;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.animation-item {
width: 100px;
height: 100px;
background: green;
opacity: 0;
}
javascript
监听了滚动事件，获取window的scrollY值，仅在规定的滚动数值范围内，根据scrollY动态修改.animation-item的透明度，透明度的取值范围从0到1。
const item = document.querySelector('.animation-item');
const playground = document.querySelector('#playground');
const rect = playground.getBoundingClientRect();
const scrollStart = window.scrollY + rect.top;
const scrollEnd = window.scrollY - (window.innerHeight - rect.bottom);
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
if (scrollY >= scrollStart && scrollY < scrollEnd) {
item.style.opacity = 0 + (scrollY - scrollStart) / (scrollEnd - scrollStart) * 1;
}
});
查看效果
使用pm2临时跑一个静态资源服务器：
pm2 serve ./
此时可打开localhost:8080查看效果。
可以看到实现的效果符合预期：在滚动到红色边框区域的上沿的时候，绿色方块的透明度从0开始增长，在滚动到红色边框区域的下沿的时候，绿色方块的透明度达到最大值，而在此期间蓝色方框一直保持在视口中。
要点解析
可以注意到一些关键数值的计算方式：
const playground = document.querySelector('#playground');
const rect = playground.getBoundingClientRect();
// 动画开始时滚动的数值
const scrollStart = window.scrollY + rect.top;
// 动画结束时滚动的数值
const scrollEnd = window.scrollY - (window.innerHeight - rect.bottom);
// 滚动的总距离（仅计算动画期间）
const scrollTotal = scrollEnd - scrollStart = rect.height - window.innerHeight;
// 实时滚动的距离（仅计算动画期间）
const scrollNow = window.scrollY - scrollStart;
// 实时滚动距离占总距离的比例
const progress = scrollNow / scrollTotal;
// 透明度的计算公式
const opacity = startValue + progress * endValue = 0 + (scrollY - scrollStart) / (scrollEnd - scrollStart) * 1;
接下来试试多个元素的动画。
多个元素
在此之前先做一个封装，由于已经知道了透明度的计算公式，因此可以定义一个函数:
function createAnimation(scrollStart, scrollEnd) {
const scrollY = window.scrollY;
if (scrollY < scrollStart) {
return 0;
} else if (scrollY < scrollEnd) {
const progress = (scrollY - scrollStart) / (scrollEnd - scrollStart);
return 0 + progress * 1;
} else {
return 1;
}
}
JS脚本的修改：
const item = document.querySelector('.animation-item');
const playground = document.querySelector('#playground');
const rect = playground.getBoundingClientRect();
const scrollStart = window.scrollY + rect.top;
const scrollEnd = window.scrollY - (window.innerHeight - rect.bottom);
window.addEventListener('scroll', () => {
item.style.opacity = createAnimation(scrollStart, scrollEnd);
});
接下来增加三个动画元素：
<div class="animation-item"></div>
<div class="animation-item"></div>
<div class="animation-item"></div>
<div class="animation-item"></div>
.animation-container {
/* ... */
gap: 10px;
}
JS脚本中获取元素的逻辑改为获取多个，并在监听部分也修改为遍历创建多个元素的动画：
const items = document.querySelectorAll('.animation-item');
// ...
items.forEach((item) => {
item.style.opacity = createAnimation(scrollStart, scrollEnd);
});
可以看到随着滚动四个绿色方块同时显现出来，这当然不符合我们的预期，我们的最终目的是不同元素在不同的时机执行动画，换句话说每个元素的动画函数是独立的，这就要求记录每个元素的动画函数，并且在滚动事件发生时，实时计算出每个元素相关css的当前值。
记录和调用动画函数
用一个map来记录元素和动画函数的映射：
const domFunctionMap = new Map();
改造createAnimation函数，使它返回动画函数：
function createAnimation(scrollStart, scrollEnd) {
const getValue = (x) => {
if (x < scrollStart) {
return 0;
} else if (x < scrollEnd) {
const progress = (x - scrollStart) / (scrollEnd - scrollStart);
return 0 + progress * 1;
} else {
return 1;
}
};
return getValue;
}
封装initAnimations函数：
function initAnimations() {
const items = document.querySelectorAll('.animation-item');
const playground = document.querySelector('#playground');
const rect = playground.getBoundingClientRect();
const scrollStart = window.scrollY + rect.top;
const scrollEnd = window.scrollY - (window.innerHeight - rect.bottom);
items.forEach((item) => {
domFunctionMap.set(item, createAnimation(scrollStart, scrollEnd));
});
};
initAnimations();
封装updateStyles函数，处理监听到滚动后的处理逻辑：
function updateStyles() {
const scrollY = window.scrollY;
for (const [dom, func] of domFunctionMap) {
const value = func(scrollY);
dom.style['opacity'] = value;
}
}
window.addEventListener('scroll', updateStyles);
每个元素的动画函数已经独立记录，接下来着手解决不同时机执行动画的问题。
执行顺序
先处理不同时机执行动画的问题。
暂时给每个元素增加data-order参数表示执行顺序：
<div class="animation-item" data-order="0"></div>
<div class="animation-item" data-order="1"></div>
<div class="animation-item" data-order="2"></div>
<div class="animation-item" data-order="3"></div>
修改initAnimations函数，注意此时不再直接调用createAnimation，而是一个新函数：
function initAnimations() {
// ...
const distance = rect.height - window.innerHeight;
const onePieceOfDistance = distance * 1 / 4; // 由于是4个元素，先写死为1 / 4
// ...
domFunctionMap.set(item, getDomAnimation(scrollStart, scrollEnd, onePieceOfDistance, item.dataSet.order));
// ...
}
新增一个函数getDomAnimation：
function getDomAnimation(scrollStart, scrollEnd, onePieceOfDistance, order) {
return createAnimation(scrollStart + order * onePieceOfDistance, scrollEnd);
}
此时四个绿色方块随着滚动已经可以逐一显现，接下来把实现中硬编码的部分替换成参数传递。
参数改造
主要参数定义
interface InitOptions {
el: HTMLElement; // 动画容器
partial?: number; // 滚动单位距离占滚动总距离的比例，默认为1
domProps: Map<HTMLElement, AnimationProp[]>; // dom元素与相应的动画参数映射
}
interface AnimationProp {
propertyName: string; // css属性名称
order?: number; // 动画执行顺序
scale?: number; // 动画执行的疏密程度，即相邻动画执行的距离占滚动单位距离的比例，默认为1
step?: number; // 动画执行每个阶段的距离占滚动单位距离的比例，默认为1
unit?: string; // css属性值单位，默认为px
values: number[] | Array<Omit<AnimationProp, 'values'> & { values: number[] }>; // 动画参数
}
其中InitOptions类型中的domProps承载动画元素和在它身上作用的所有动画的参数；AnimationProp类型中的values默认情况下是数字类型的数组，特殊情况下（比如描述的是transform动画）是AnimationProp的递归类型。
改造函数createAnimation
在前几步中，createAnimation接收的参数只有开始和结束两种滚动数值，只支持两个值之间的变化，因此这里改成数组；同时之前对于透明度的数值变化写死了从0到1，这里也改为数组传参，支持任意个数值之间的变化。
function createAnimation(scrollValues, animationValues) {
const getValue = (x) => {
if (x < scrollValues[0]) {
// 1. 未滚动到上边沿
return animationValues[0];
} else if (x >= scrollValues[scrollValues.length - 1]) {
// 2. 滚动出了下边沿
return animationValues[animationValues.length - 1];
} else {
// 3. 区间内滚动
for (let i = 1; i <= scrollValues.length - 1; i++) {
if (x >= scrollValues[i - 1] && x < scrollValues[i]) {
const progress = (x - scrollValues[i - 1]) / (scrollValues[i] - scrollValues[i - 1]);
return animationValues[i - 1] + (animationValues[i] - animationValues[i - 1]) * progress;
}
}
}
return 0;
};
return getValue;
}
改造函数getDomAnimation
前几步中返回的是一个特定属性的动画函数，比如透明度的函数，这次要改成支持多个属性对应动画函数的返回，比如同时支持透明度、大小、位置等。
// 上一步临时的order参数被替换为正式封装的动画参数
function getDomAnimation(scrollStart, scrollEnd, onePieceOfDistance, animationProps) {
// 动画可能不止有一种，因此返回一个对象，记录所有具有动画的属性
const ret = {};
// 遍历每个动画相关参数，组装相应的动画函数
animationProps.forEach((animationProp) => {
// 计算变化值个数
let length = animationProp.values.length;
if (typeof animationProp.values[0] !== 'number') {
length = animationProp.values[0].values.length;
}
// 根据变化值个数构建滚动值数组
/**
* [
* scrollStart + order * scale * onePieceOfDistance,
* scrollStart + order * scale * onePieceOfDistance + step * onePieceOfDistance,
* scrollStart + order * scale * onePieceOfDistance + step * onePieceOfDistance,
* scrollStart + order * scale * onePieceOfDistance + step * onePieceOfDistance,
* ...
* ]
* 详解：
* onePieceOfDistance由partial参数决定，意为把整个滚动距离分为几份，以方便计算，一般有几个元素发生动画就分成几份，这样能保证动画的均匀执行
* 设onePieceOfDistance为△
* scale控制元素执行动画的疏密程度，比如每间隔1/2△依次执行元素的动画，还是每隔1△依次执行元素的动画
* step控制元素执行动画的周期，比如每次执行一个动画动作需要花费2△的滚动距离
*/
const scrollValues = [scrollStart + animationProp.order * (animationProp.scale || 1) * onePieceOfDistance];
for (let i = length - 1; i > 1; i--) {
const lastValue = scrollValues[scrollValues.length - 1];
scrollValues.push(lastValue + (animationProp.step || 1) * onePieceOfDistance);
}
scrollValues.push(scrollEnd);
// 组装动画函数
if (animationProp.propertyName === 'transform') {
const transformObj = {};
animationProp.values.forEach((animationValue) => {
const animation = createAnimation(scrollValues, animationValue.values);
transformObj[animationValue.propertyName] = {
animation,
unit: animationValue.unit
};
});
ret.transform = (x) => {
let transformStr = '';
for (const key in transformObj) {
transformStr += `${key}(${transformObj[key].animation(x)}${transformObj[key].unit ?? 'px'}) `;
}
return transformStr;
};
} else {
const animation = createAnimation(scrollValues, animationProp.values);
ret[animationProp.propertyName] = (x) => {
return `${animation(x)}${animationProp.unit ?? 'px'}`;
};
}
});
return ret;
}
改造函数initAnimations
function initAnimations(options) {
// 移除了获取.animation-item的代码，已经在参数中传入
const playground = options.el; // 参数传入
const playgroundRect = playground.getBoundingClientRect();
const scrollY = window.scrollY;
const scrollStart = scrollY + playgroundRect.top;
const scrollEnd = scrollY - (window.innerHeight - playgroundRect.bottom);
const distance = scrollEnd - scrollStart;
const onePieceOfDistance = distance * (options.partial || 1); // 参数传入
// domProps为dom和动画参数的map
options.domProps.forEach((animationProps, dom) => {
domFunctionMap.set(dom, getDomAnimation(scrollStart, scrollEnd, onePieceOfDistance, animationProps));
});
}
改造函数updateStyles
支持多个属性对应的动画函数，因此给dom.style赋值时不再是之前写死的opacity。
function updateStyles(options) {
const scrollY = window.scrollY;
// 从func改为funcObj，不再是一个函数，而是对象
for (const [dom, funcObj] of domFunctionMap) {
for (const propertyName in funcObj) {
// funcObj[propertyName]即为函数createAnimation返回的动画函数
const value = funcObj[propertyName](scrollY);
dom.style[propertyName] = value;
}
}
}
修改调用方式
// 删掉原始调用方式
// initAnimations();
const domProps = new Map();
const items = Array.prototype.slice.call(document.querySelectorAll('.animation-item'));
items.forEach((item, index) => {
domProps.set(item, [
{
propertyName: 'opacity',
order: index,
unit: '',
values: [0, 1, 1, 1]
},
{
propertyName: 'transform',
order: index,
values: [
{
propertyName: 'scale',
unit: '',
values: [0, 2, 1, 1]
}
]
}
]);
});
initAnimations({
el: document.querySelector('#playground'),
partial: 0.25,
domProps
});
查看效果
此时已经能看到预期中的动画了，比如按照此例中的配置，四色方块的透明度和大小会独立发生变化，统一反应在动画的过程中。
小结
还有一些进阶的调参方法，比如修改step或者scale的值，都是简单的数学问题，就不再一一赘述；
虽然没有实现文章开头参考的例子，但剩下的已经是最简单的活了：找出发生动画的元素及css属性，写出对应的配置即可；
此封装还能实现很多动画，比如钉钉官网的图标汇聚的效果，原理都是相通的，不重复了。
转载自:https://juejin.cn/post/7364388815908126720