css3 浪花,掘金：Canvas 实现画中画动画效果--网易娱乐年度盘点H5动画解密

那我们知道了某一时刻的情况，但是如何将画面动起来，有一个收缩画面的效果呢？

现在开始写我们的 render 函数：

const render = () => {

this.radio = this.radio * this.scale;

this.timer = requestAnimationFrame(render);

this.draw();// 绘制两个图片

};

draw() {

if (this.index + 1 != this.imgList.length) {

if (

this.radio <

this.imgList[this.index + 1].areaW / this.imgList[this.index + 1].imgW

) {

if (this.willPause) {

this.radio =

this.imgList[this.index + 1].areaW / this.imgList[this.index + 1].imgW;

cancelAnimationFrame(this.timer);

}

this.index++;

this.radio = 1;

if (!this.imgList[this.index + 1]) {

this.showEnd();

}

}

this.imgNext = this.imgList[this.index + 1];

this.imgCur = this.imgList[this.index];

this.containerImage = this.domList[this.index + 1];

this.innerImage = this.domList[this.index];

this.drawImgOversize(

this.containerImage,

this.imgNext.imgW,

this.imgNext.imgH,

this.imgNext.areaW,

this.imgNext.areaH,

this.imgNext.areaL,

this.imgNext.areaT,

this.radio,

),

this.drawImgMinisize(

this.innerImage,

this.imgCur.imgW,

this.imgCur.imgH,

this.imgNext.imgW,

this.imgNext.imgH,

this.imgNext.areaW,

this.imgNext.areaH,

this.imgNext.areaL,

this.imgNext.areaT,

this.radio,

);

}

}