帧动画背景，适配各种屏幕

最新推荐文章于 2024-05-13 14:34:46 发布
最新推荐文章于 2024-05-13 14:34:46 发布
阅读量486 收藏
点赞数
文章标签： css3 javascript animation 动画 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HYEHYEHYE/article/details/121556694
版权

帧动画实现方式大致分为三种，下面的css3动画和js动画的图片均使用雪碧图（我使用的雪碧图布局方式是top-down，无边距）实现，雪碧图生成方法可参考使用Grunt生成雪碧图_HYEHYEHYE的博客-CSDN博客

一、Gif图

这个方式是最简单快捷的，适合做一些比较简单、色彩单一的动画。因为

画质上，gif 支持颜色少(最大256色)、Alpha 透明度支持差，图像锯齿毛边比较严重；

交互上，不能直接控制播放、暂停、播放次数，灵活性差；

性能上，gif 会引起页面周期性的绘画，性能较差。

二、css3动画

        css3动画主要是利用animation属性，通过改变背景图片的background-position或图片容器的transform:translate3d()来实现，这两种方式区别不大。代码如下

        中间层类名为sprite-con的div是为了做适配，让图片在水平方向和垂直方向始终居中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .sprite-wp {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .sprite-con{
            /* 每一帧图片的宽高 */
            width: 1920px;
            height: 1080px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .sprite {
            /* 雪碧图的宽高 */
            width: 1920px;
            height: 63720px;
            will-change: transform;
            background: url(../images/spritesheet.jpg) no-repeat center top;
            animation: frame 7375ms steps(59) both infinite;
        }
        /* 方法一：连续切换雪碧图位置 */
        /* @keyframes frame {
            0% {background-position: 0 0;}
            100% {background-position: 0 -63720px;}
        } */
        /* 方法二：连续切换雪碧图容器位置 */
        @keyframes frame {
            0% {transform: translate3d(0,0,0);}
            100% {transform: translate3d(0,-63720px,0);}
        }
    </style>
</head>
<body>
    <div class="sprite-wp">
        <div class="sprite-con">
            <div class="sprite" id="sprite"></div>
        </div>
    </div>
</body>
</html>

其实还可以通过改变背景图片的background-image来实现（不推荐），但是这种方式有缺点：

  • 多张图片会带来多个 HTTP 请求
  • 每张图片首次加载会造成图片切换时的闪烁，图片需要预加载，导致页面加载时间过长
  • 不利于文件的管理

三、js动画

js动画有四种，排除上面通过改变background-image这种，就有三种。分别是

通过js控制background-position或transform:translate3d()来实现

        对比animation的方式，这种方式较灵活，可控制。内置的requestAnimationFrame1秒可绘制60次，但是我的序列帧图片是根据1秒8帧制作的，如果直接使用requestAnimationFrame相当于把动画播放速度加快了将近8倍，所以我这里加了时间间隔判断，巧妙的将频率降为8帧每秒，使动画正常速率播放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .sprite-wp {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .sprite-con{
            /* 每一帧图片的宽高 */
            width: 1920px;
            height: 1080px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .sprite {
            /* 雪碧图的宽高 */
            width: 1920px;
            height: 63720px;
            will-change: transform;
            background: url(../images/spritesheet.jpg) no-repeat center top;
        }
    </style>
</head>
<body>
    <div class="sprite-wp">
        <div class="sprite-con">
            <div class="sprite" id="sprite"></div>
        </div>
    </div>
    
    <script>
        (function () {
            // requestAnimationFrame兼容性写法
            if (!window.cancelAnimationFrame) {
                window.cancelAnimationFrame = function(id){clearTimeout(id)}
            }
            window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||function(cb){ return setTimeout(cb,1000/60)}
            })()
            // 屏幕刷新率
            var fps = 8     // 一秒8帧
            var fpsInterval = 1000 / fps
            var last = new Date().getTime() //上次执行的时刻

            var sprite = document.getElementById("sprite"),
                picHeight = 1080,  // 每一帧图片的高度 
                k = 59,   // 帧数
                i = 0,
                timer = null;
            // 重置背景图片位置
            sprite.style.transform = "translate3d(0,0,0)";
            // 或
            // sprite.style.backgroundPosition = "0 0";

            // 改变背景图移动
            function changePosition() {
                // 执行时的时间
                var now = new Date().getTime()
                var elapsed = now - last;
                if (elapsed > fpsInterval) {
                    last = now - (elapsed % fpsInterval); //校正当前时间
                    sprite.style.transform = "translate3d(0," + (-picHeight * i) + "px,0)";
                    // 或
                    // sprite.style.backgroundPosition = "0 "+(-picHeight*i)+"px";
                    i++;
                    if (i == k) {
                        i = 0;
                    }
                }
                window.requestAnimationFrame(changePosition);
            }
            window.requestAnimationFrame(changePosition);
        })();
    </script>
</body>
</html>

通过js来控制Canvas图像绘制

        通过Canvas制作帧动画的原理是用drawImage方法将图片绘制到Canvas上，不断擦除和重绘就能得到我们想要的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .sprite-wp {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .sprite-con{
            /* 每一帧图片的宽高 */
            width: 1920px;
            height: 1080px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .sprite {
            /* 雪碧图的宽高 */
            width: 1920px;
            height: 63720px;
            will-change: transform;
            background: url(../images/spritesheet.jpg) no-repeat center top;
        }
    </style>
</head>
<body>
    <div class="sprite-wp">
        <div class="sprite-con">
            <canvas id="canvas" width="1920" height="1080"></canvas>
        </div>
    </div>
    
    <script>
        (function () {
            // requestAnimationFrame兼容性写法
            if (!window.cancelAnimationFrame) {
                window.cancelAnimationFrame = function(id){clearTimeout(id)}
            }
            window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||function(cb){ return setTimeout(cb,1000/60)}
            })()
            // 屏幕刷新率
            var fps = 8     // 一秒8帧
            var fpsInterval = 1000 / fps
            var last = new Date().getTime() //上次执行的时刻

            var timer = null,
                canvas = document.getElementById("canvas"),
                context = canvas.getContext('2d'),
                img = new Image(),
                width = 1920,
                height = 1080,
                k = 59,
                i = 0;
            img.src = "../images/spritesheet.jpg";

            function drawImg() {
                // 执行时的时间
                var now = new Date().getTime()
                var elapsed = now - last;
                if (elapsed > fpsInterval) {
                    last = now - (elapsed % fpsInterval); //校正当前时间
                    context.clearRect(0, 0, width, height);
                    i++;
                    if (i == k) {
                        i = 0;
                    }
                    context.drawImage(img, 0, i * height, width, height, 0, 0, width, height);
                }
                window.requestAnimationFrame(drawImg);
            }
            img.onload = function () {
                window.requestAnimationFrame(drawImg);
            }
        })();
    </script>
</body>
</html>

参考来源：帧动画的多种实现方式与性能对比_前端向朔-CSDN博客_前端帧动画

moon son
关注
WHAT - CSS Animationtion 动画系列（四）- 移动端全屏动画
weixin_58540586的博客
05-12 752
今天我们主要介绍在移动端（IOS和安卓）实现全屏动画播放。
逐帧动画抖动、适配布局、SVG Sprites
ala27792的博客
10-12 313
笔者所在的前端团队主要从事移动端的H5页面开发，而团队使用的适配方案是:viewport units + rem。具体可以参见凹凸实验室的文章 –利用视口单位实现适配布局。 笔者目前（2017.08.12）接触到的移动端适配方案中，「利用视口单位实现适配布局」是最好的方案。不过使用rem作为单位会遇到以下两个难点： 微观尺寸（20px左右）定位不准 逐帧动画容易有抖动...
css background和animation精灵图实现帧动画，如何控制暂停和播放
PrimaryColor
12-15 774
效果图： 示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .fis
H5Css3动画 背景图 制作帧动画
百九
05-11 1352
.running{ height:60px; width:90px; position:absolute; top:50%;left:70%; background:url(http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0; visibility
页面适应手机端的方法+css3动画
m0_63341952的博客
12-05 592
一、页面适应是手机端的方法 1.使用css中的媒体查询 ==@media screen and (max-width:___ ){ } == 对电脑端的数据，属性进行修改从而来适应手机端 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <tit
基于CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果
都随它大小便吧
09-02 2521
还记得序列帧技术在2018年的时候很火的，那时做H5很吃香的...那么在此记录一下用纯CSS3、原生JS、Vue3.0，这3种方式来设计几个例子。需要自己去找一下雪碧图哦，比如阿里云、腾讯云官网有很多雪碧图的~
CSS3 SVG悬停按钮水墨背景动画特效
06-11
CSS3中的关键帧动画（@keyframes）是实现这种水墨动画的基础。 SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，可以在任何分辨率下清晰显示，且文件大小较小。SVG图像可以通过CSS进行样式控制，非常...
Android源码——逐帧动画源码_new_70.zip
10-08
4. 对不同屏幕密度和尺寸的适配，确保动画在各种设备上表现一致。 5. 可能存在的性能优化，如使用异步加载图片，减少主线程负担。 通过对源码的深入学习，开发者不仅可以掌握Android逐帧动画的实现原理，还能了解到...
动画的逐帧播放
05-12
- 使用9-patch图像可以允许图片根据内容自动拉伸，减少不同屏幕尺寸下的适配问题。 - 对于大量帧的动画，考虑使用更高效的动画系统，如`Property Animation`或`Lottie`库。 6. **其他扩展**： - 如果动画需要...
高仿墨迹天气背景动画
08-30
1. **动画原理**：背景动画通常基于帧动画或者精灵图（Sprite Sheets）技术，通过连续播放一系列图像来创建动态效果。在Android或iOS平台上，可以使用Canvas、UIView动画、Core Animation等工具来实现。 2. **天气...
GKA 一款高效、高性能的帧动画生成工具
HVENLY的博客
06-03 1473
本篇文章用于介绍gkajs/gka工具
css制作序列帧动画
空&白的博客
09-08 1553
css制作序列帧动画
CSS或JS实现逐帧动画方案
weixin_48003149的博客
01-29 3291
使用css或js绘制可控制的逐帧动画
CSS3序列帧动画
热门推荐
Joyce的前端日常
12-04 2万+
本文介绍了CSS3种的animation以及如何实现帧动画
前端实现序列帧_使用javascript和css模拟帧动画的3种方法分析
weixin_30758169的博客
01-17 3587
我们平时在开发前端页面的时候，经常会播放一段帧序列。这段帧序列就像gif图片那样，反复循环播放。那大家可能会说，直接用gif图片就好了，干嘛还去模拟呢？那是因为要做得更加灵活，我们要做到以下几点：1、我们希望这段帧动画只循环播放所指定的次数。2、我们希望帧动画结束的瞬间执行某种操作。这个在游戏中大量存在。3、我们想自如的控制播放的速度。4、我们想尽可能让这个帧动画的实现方式兼容大部分浏览器，在移动...
CSS 之 帧动画（Keyframe Animation）
最新发布
weixin_45092437的博客
05-13 3045
帧动画允许你通过指定 CSS 属性在不同时间点上的行为来创建动画效果，这些时间点被称为关键帧，所以又被称为关键帧动画。帧动画需要通过@keyframes来创建。@keyframes`仅仅是定义了在所在作用域内全局都可以使用的关键帧动画，定义好了动画的过程，但是其并不能自动应用。还需要通过CSS的animation属性来显式的指定关键帧动画应用的元素，以及一系列相关的动画属性。
CSS3中animation中的steps()逐帧动画
zbwroom的博客
08-23 1万+
首先我们先看一下效果图 //这里是HTML代码 <div class="birdBox"> <div class="bird"></div> </div> //这里是css代码 *{margin: 0;padding: 0;} html ,body{ width: 100%; height: 100%;
利用CSS关键帧实现文字动态背景
qq_61955502的博客
10-30 1791
文字动态背景
css3帧（雪碧图）动画实现
似水流年QC的博客
06-29 2732
所谓雪碧图就是一张图，包含了很多小图，可以通过这些小图实现一个动作，如下是一张雪碧图，我们可以通过CSS的animation来设置背景图片的位置，呈现出一种动态效果。代码实现 注意几点： steps(7) 是关键哦 关键帧只需设置0%（ background-position:0 0;），100%（ background-position:-700px 0;） 动画均匀地分7帧执行，每次都有固定相等的偏移量 雪碧图由7张图片拼成的 雪碧图的宽度是设置动画盒子的7倍 infinite 循环执行 bot
HTML5 Canvas实现透明雪花飘落背景动画效果
H5页面尤其需要考虑到不同设备屏幕尺寸和分辨率的适配问题。这可能意味着在创建动画时，需要考虑到如何在不同尺寸的屏幕上都能保持动画效果和性能的平衡，同时也要保证用户体验的连贯性。 8. 用户自定义与交互: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值