//...其中动态引入图片我们可以通过require(图片路径)来完成，如上面的代码，我们只需要计算出对应滚动距离所需要展示的图片名字即可。样式代码.stickyContainer{height:150vh;}.stickyWrapper{height:100vh;position:sticky;top:100px;}.imgWrapper{width:100vh;height:521px;margin:0auto;}.imgWrapperimg{width:100%;}接着就是在滚动的过程中计算出当先需要显示的图片是那一张，我们上面提到：120张图片，在400px的滚动距离中完成动画。

首先我们再加载完成后可以得出，我们可以得出开始动画的距离文档顶部的滚动值startOpen，因此我们可以得出如下代码：

useEffect(()=>{//绑定事件window.addEventListener('scroll',scrollEvent,false);//开始动画的滚动距离//startOpenstartOpen=$('#imgWrapper').offset().top-(window.innerHeight/2-$('#imgWrapper').height()/2);return()=>{window.removeEventListener('scroll',scrollEvent,false);}},[]);//滚动事件constscrollEvent=()=>{//实时的scrollTopconstscrollTop=$('html').scrollTop();letnewAsset=''if(scrollTop>startOpen&&scrollTop120){offset=120;}if(offset<10){newAsset=`large_000${offset}`;}elseif(offset<100){newAsset=`large_00${offset}`;}else{newAsset=`large_0${offset}`;}}//边界值判断//....//设置图片urlsetAsset(newAsset);};预览效果

缩放图片到屏幕这个动画我们可以用两个方式实现，一个是滚动视差实现，一个是canvas在滚动过程中实时渲染图片。

开始之前我们来看一下没有放大的之前图，如下：

它由两张图片组成，屏幕中显示的图片，他与电脑外壳的上间距是18px，当放大了之后，图片与电脑外壳图片的上边距应该是18*放大比率。

电脑外壳图片，如下：

接下来我们就开始介绍两种实现方式。

Canvas实现是将屏幕中显示的这张图片由Canvas来画。

其实这个动画有两部分组成，一个是图片覆盖，一个是图片缩小。

使用Canvas来解决，使用Canvas实现我们需要使用drawImage方法将两张图片画到一张画布上。只需要通过滚动的距离，对应计算出具体某个时候画布应该画多少比例的第一张图，画多少比例的第二张图，就可以解决了。只需要知道什么时候开始图片覆盖。

我们使用transform:matrix来实现，其中图片缩小是基于屏幕正中央的点进行缩放的。

我们根据滚动的距离相应的计算出相应放大比率和translate的值，如下图，实时改变transform:matrix的参数值就行了。

这里我们需要计算出几个临界点的值，比如最大/小的放大比率，最大/小偏移值，开始缩小的点等。

这里我们需要知道几个值：

//canvas显示的图片宽度constCANVAS_WIDTH=544;//canvas显示的图片高度constCANVAS_HEIGHT=341;//动画持续的距离constZOOM_SCROLL_RANGE=400;//canvas显示的图片实际宽度constIMG_NATURAL_WIDTH=2048;//canvas显示的图片实际高度constIMG_NATURAL_HEIGHT=1024;最小的放大比率为1，即是自身。

最大的放大比率是屏幕的高度除以屏幕显示图片的比率，这里笔者将canvas画出来的图片宽高定位544*341。

constCANVAS_WIDTH=544;constCANVAS_HEIGHT=341;constscaleRadio=window.innerHeight/CANVAS_HEIGHT;所以放大比率的区间应该是1～scaleRadio之间。最大的偏移距离，应该是当curScale为1的时候，包裹元素距离视口顶部的距离，我们的缩放一直都是基于屏幕正中央这个点来进行放大/缩小的，所以可以很简单的得出：

//最大的translateletStartScale=0;StartScale=window.innerHeight/2-$('#img-wrapper').height()/2;最小的偏移距离，应该是在curScale为scaleRadio时，包裹元素距离视口顶部的距离，这个时候，我们就需要用到之前提到的视屏图片到电脑外壳的top=18px这个值了，因为图片进行了放大，所以最小的偏移距离应该为：

miniTranslate=-18*scaleRadio所以偏移距离的区间应该是miniTranslate～StartScale之间。其实很简单我们需要在第二章图片完全覆盖掉第一张的图片的时候就进行开始缩放，这个值可以通过Canvas包裹元素距离顶部文档的top值加上一屏的高度就能计算出。

letNewStartScale=0;NewStartScale=$('#section-sticky-hero').offset().top+window.innerHeight;核心代码核心代码就是滚动时候的计算：

//...其他内容