android 序列帧资源序列帧大图

转载

archangle 2023-07-19 21:47:49

文章标签 android 序列帧资源加载缓存内存溢出 文章分类 代码人生

一. 实现原理

图片序列帧技术的原理其实非常简单，就是先将 Gif 图片找美工拆成一堆的 Png 或者 Jpg 格式的图片。然后在前端写一个定时器，每隔一段时间加载一张图片就可以了。这里还有一个需要注意的地方，就是我们要对每一次加载的图片在前端进行缓存，如果不缓存，在一些加载比较慢的电脑上就会出先闪一下的情况。

二. 演示以及说明

一般来说在 FireFox、Chrome浏览器中直接使用

<img src="xxx.gif">

就可以实现动图的效果，但是在 IE 内核的浏览器会出现直接使用 Gif 图片不动的问题

下面是一个直接使用 <img> 标签的实现动图效果的例子（方便对比）

<img src="" />

效果图：

接着下面是一个使用图片序列化播放效果的例子
使用这个方法有三个好处：

不会出现闪烁的问题；
不出在 IE 下出现动图卡住不动的 Bug ；

//html代码
<img id="imgDiv" src="Images/png/bzhan233niang1.png" width="420" height="480">
<input type="button" value="取消图片播放" onclick="CancelPlay();"/>

//js代码
<script type="text/javascript">
    //定时器句柄
    var timer = null;
    //当前图片的序号
    var imageIndex = 1;
    window.onload = function () {
        var imgDiv = document.getElementById("imgDiv");
        if (imgDiv) {            
            //设定计时器
            timer = window.setInterval(function () {
                //缓冲图片
                var bufferImage = new Image();
                bufferImage.src = "Images/png/bzhan233niang" + imageIndex + ".png";
                imgDiv.src = bufferImage.src;
                //序号+1
                imageIndex++;
                //如果序号到达最大，那么重置
                if (imageIndex > 20) {
                    imageIndex = 1;
                }
            }, 50);
        }
    };
    function CancelPlay() {
        if (timer != null) {
            window.clearInterval(timer);
        }
    };
</script>

android 序列帧资源序列帧大图_加载