likes
comments
collection
share

⚡CSS3优雅做动画系列，人物走路动画

作者站长头像
站长
· 阅读数 16

我想实现一个小动画，我该选择什么技术更快，更好，更强？

答：具体选什么技术得看业务场景，但是大部分开发在工作中无脑选CSS3就完事啦。

这又衍生出几个问题，你得告诉我啊！！！（ps: 我知道你很急，但是你先别急...）

一、为什么无脑选CSS3

因为CSS3 更适合简单的动画效果，写法简单，提供给我们的API不会又臭又长，利于开发者上手，而且擅长把复杂效果简单化。 复杂效果简单化的核心就是animation，css3中的 animation 在处理动画方面很强大，动画核心的变化速度、播放次数、不同帧表达的内容都可以简单的实现。你要做的就是找到动画的规律！！！

第二，CSS和CSS3的关系

CSS（Cascading Style Sheets）是用来描述网页上组织和样式的语言。CSS刚开始从1996年问世，它的作用是分离网页文档的内容和样式，使得文档只关注内容，而样式则由CSS来规定。 CSS3则是CSS的最新版本，在CSS3中增加了许多新的特性和模块，比如弹性布局Flex、网格布局Grid、动画、盒子模型box-sizing、圆角、阴影、渐变色、媒体查询、选择器、伪类::before 和 ::after等

第三，CSS、Canvas、WebGL、Three.js都能实现动画，区别是什么？

  1. CSS

CSS动画是一种基于浏览器处理的技术，通过改变 CSS 属性来实现动画效果。CSS动画可以实现一些简单的动画效果（如悬停、颜色变化和基本的过渡效果等），而且代码简单、易于维护和优化。

  1. Canvas

Canvas 是一种基于绘制的技术，通过 JavaScript 代码动态生成图形与图像，实现动态效果。Canvas可以实现更加复杂的绘画，可以绘制各种形状、线条、图形和图像，但适用于复杂、细节丰富的动画效果。 亲自体验：canvas坑多，代码量也大

  1. WebGL

WebGL 是一种基于OpenGL的3D绘图标准，可以在浏览器中实现 3D 图形渲染。通过 WebGL 可以在浏览器中实现更加复杂的高保真度的3D动画、图像和游戏效果等。

  1. Three.js

Three.js 是一种基于 WebGL 的框架，它封装了 WebGL 中的许多底层细节，提供了更加简单易用的接口，让开发人员可以在浏览器端实现高质量的3D动画、交互和游戏等。相比于 WebGL，使用 Three.js 更加方便和简单，可以更快捷地实现各种复杂的3D效果。 （ps: WebGL和Three.js工作中没用过，不是很了解，抽时间学习下）

⚡CSS3优雅做动画系列，人物走路动画

正文

使用HTML + CSS3 实现一个'人在行走'的动画

省流，先上效果

⚡CSS3优雅做动画系列，人物走路动画

第一步，把背景图贴上

⚡CSS3优雅做动画系列，人物走路动画

⚡CSS3优雅做动画系列，人物走路动画

// 星空
#sky {
   background: url(https://i.imgur.com/PhHVjgw.png) repeat-X;
   animation: movebg 9s linear infinite;
}
// 海洋 + 路道
#sea {
    background: url(https://i.imgur.com/h75XWy8.png) repeat-x;
    animation: movebg 6s linear infinite;
    /* Posicionamos el mar, para que no solape al cielo */
    position: relative;
    top: 145px;
    /* Pequeño degradado interior para suavizar el mar. Puede consumir muchos recursos */
    box-shadow: 10px 10px 45px RGBA(0, 0, 0, 0.85) inset;
}

第二步，让背景图动起来

@keyframes movebg {
    0% {
        background-position: 550px;
    }
    100% {
        background-position: 0;
    }
}

因为最终要实现随着人走动，背景也要动起来的效果。所以这里使用了animation: movebg 6s linear infinite 这里解释一下四个属性分别对应着什么意思

  • movebg: 背景图位置改变的动画，animation里调用, @keyframes movebg 处定义
  • 6s: 顾名思义，动画执行一次持续的时间
  • linear: 变化速度，这里是匀速的意思
  • infinite：播放次数，这里是无限播放

@keyframes上文说了是定义动画的，此处把动画分为了两针。 第一帧是动画刚开始的时候，背景图在水平方向550px处，第二帧是动画结束时，背景图在水平方向0px处。 这两帧的位置形成了背景图后移动感觉。 如果background-position: 550px;的数值变大，效果就是背景图后退的更快了

第三步，加上人走路的分解图

⚡CSS3优雅做动画系列，人物走路动画

这个图是分解人走路的各个姿势。理论上姿势分解的越多，效果越流畅，代码细节越多。如果小伙伴们要在项目中用到人走路的动画，人物姿势分解图需要问你们的UI小姐姐要的。

#bern {
    width: 112px;
    height: 156px;
    margin: auto;
    background: url(https://i.imgur.com/ifk0SLH.png) repeat-x;
    animation: walk .8s steps(6) infinite;
    position: relative;
    bottom: 34px;
}

第四步，让人动起来

@keyframes walk {
    0% {
        background-position: 0
    }
    100% {
        background-position: -672px
    }
}

这里使用了animation: walk .8s steps(6) infinite 这里解释一下四个属性分别对应着什么意思

  • walk: 背景图位置改变的动画，animation里调用, @keyframes walk 处定义
  • .8s: 顾名思义，动画执行一次持续的时间
  • steps(6): 用于在动画中创建离散的关键帧，将动画过程分为若干个阶段运行，使动画看起来更具有节奏感和变化的速率不规则性
  • infinite：播放次数，这里是无限播放

此处重点说下以下几点 一，steps，说人话就是你人物姿势分解图有几个姿势，这里就写几。 说的太直白了？没懂？那再说详细点。此处是分为了6个步骤，每个人物分解姿势持续时间为0.8s/6，6次变化被相等地分配到动画持续时间0.8s中。

二，background-position: -672px中的672是图片的宽度，这个小伙伴的人物分解图如果和我不一样，此处的672也要跟着你们的图片宽度来，不然在实操过程中应该也会遇到很多鬼畜场面...

此处是评论区小伙伴提出的细节点，希望对其他小伙伴学习过程中也有帮助。

我这里，0是展示第一个姿势，672是刚好一套姿势走完又变成第一个姿势的位置。

三，0.8s的时间里，人物从第一个姿势走到第6个姿势，再走到第一个姿势。然后循环。

第五步，大功告成，下面贴上全部代码

<!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>css动画</title>
</head>

<body>

    <div id="sky">
        <div id="sea">
            <div id="bern"></div>
        </div>
    </div>
    <style>
        html,
        body {
            margin: 0;
            background: #000;
        }

        #bern {
            width: 112px;
            height: 156px;
            margin: auto;
            background: url(https://i.imgur.com/ifk0SLH.png) repeat-x;
            position: relative;
            bottom: 34px;
            animation: walk .8s steps(6) infinite;
        }

        @keyframes walk {

            0% {
                background-position: 0
            }

            100% {
                background-position: -672px
            }
        }
        #sky {
            background: url(https://i.imgur.com/PhHVjgw.png) repeat-X;
            animation: movebg 9s linear infinite;
        }
        #sea {
            background: url(https://i.imgur.com/h75XWy8.png) repeat-x;
            animation: movebg 6s linear infinite;
            position: relative;
            top: 145px;
            box-shadow: 10px 10px 45px RGBA(0, 0, 0, 0.85) inset;
        }
        @keyframes movebg {
            0% {
                background-position: 550px
            }

            100% {
                background-position: 0
            }
        }
    </style>
</body>

</html>

完结

这篇文章是我在网上冲浪的时候发现的效果，其实我一直蛮感兴趣走路动画，只是一直没时间搞，都用来刷某音和某站了。这里把动画效果和实现方式整理了一下，希望对小伙伴有帮助。 后续，我可能还会更新其他CSS3动画方面的，因为的确很感兴趣。 欢迎转载，但请注明来源。 最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。

⚡CSS3优雅做动画系列，人物走路动画

转载自:https://juejin.cn/post/7219943233798684728
评论
请登录