[发明专利]基于Canvas和WebWorker的像素差逐帧动画的实现方法

摘要

本发明涉及基于Canvas和WebWorker的像素差逐帧动画的实现方法，包括计算像素差部分以及实现部分。主要利用像素差逐帧动画，剔除掉前后帧中相同或者相似的部分得到像素差，然后根据前一帧和像素差还原出后一帧，既不会丢失数据又能大幅减少加载所需的资源体积，大幅减少Web逐帧动画所需的资源体积，可以在网络环境较差的情况下依然保持良好的用户体验。

主权项

1.基于Canvas和WebWorker的像素差逐帧动画的实现方法，其特征在于，包括以下具体步骤：步骤1.计算像素差部分，首先加载前后帧图片，然后通过Canvas获得前后帧类数组形式的像素数据，接着设置允许误差和最小截取长度，参数设置完成之后根据设置的允许误差值计算像素差数组；根据最小截取长度截取像素差数组并获得位置信息数组；在获取的数据中插入255Alpha值；把像素差数组存储为PNG图片，在像素数据后补充无效像素点并记录到位置信息数组中，最后根据得到的数据反向操作得到后帧还原图，对比后帧还原图和前帧的原图，如果不符合预期则重新设置参数直至还原图符合预期；当所有图片计算完毕后进入步骤2实现部分，否则计算下一帧，把当前还原图充当下一次计算像素差的前帧的原图；步骤2.实现部分，先整理数据，把所有像素差图片合成一张精灵图，同时把所有位置信息数组放到js文件中，加载整理后的精灵图和相关位置信息数据文件，开启W ebWorker并根据精灵图和对应的位置信息还原出原始图片，并根据实际情况采用不同的方法实现逐帧动画。