前言
Canvas学了就想用，前两天写了Canvas实现数字雨和放大镜效果，感觉还要再练练手，今天来实现一下苹果官网的充电盒动效。后面有完整代码。
正文
还是先看看最终的效果，实现的原理也很简单。动态效果是一个视频，我们只要根据页面滚动的距离去计算当前播放的时间，再绘制到画布上就好了，剩下就是对细节的处理：
- 滚动页面时如何将Canvas固定
- 对当前时间的计算
- 滚动一定距离后，如何与当前的页面做衔接
滚动页面将Canvas固定
首先我们要确定什么时候要固定Canvas，然后又在什么时候释放。我们可以使用minScroll、maxScroll来记录边界值与document.documentElement.scrollTop做比较
minScroll和maxScroll的确定
当前时间的计算
看两个公式
- 滚动的单位时长 = 视频时间 / Canvas高度;
- 当前时间 = 滚动的单位时长 * 滚动距离
最后再加上时间边界的判断与设置，代码就出来了
如何与当前的页面做衔接
当我们从上往下滚动时上边界到Canvas的固定衔接是很顺畅，但是到下边界就会有闪动。我们可以在Canvas下面再接一个Canvas，用来过渡使用。它的内容是视频的最后一帧。
完整代码
结语
感兴趣的可以去试试。
