| ⚡CSS3优雅做动画系列，人物走路动画 | 您所在的位置：网站首页 › 走路动画模板 › ⚡CSS3优雅做动画系列，人物走路动画 |
⚡CSS3优雅做动画系列，人物走路动画
|
我想实现一个小动画，我该选择什么技术更快，更好，更强？
答：具体选什么技术得看业务场景，但是大部分开发在工作中无脑选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都能实现动画，区别是什么？ CSSCSS动画是一种基于浏览器处理的技术，通过改变 CSS 属性来实现动画效果。CSS动画可以实现一些简单的动画效果（如悬停、颜色变化和基本的过渡效果等），而且代码简单、易于维护和优化。 CanvasCanvas 是一种基于绘制的技术，通过 JavaScript 代码动态生成图形与图像，实现动态效果。Canvas可以实现更加复杂的绘画，可以绘制各种形状、线条、图形和图像，但适用于复杂、细节丰富的动画效果。 亲自体验：canvas坑多，代码量也大 WebGLWebGL 是一种基于OpenGL的3D绘图标准，可以在浏览器中实现 3D 图形渲染。通过 WebGL 可以在浏览器中实现更加复杂的高保真度的3D动画、图像和游戏效果等。 Three.jsThree.js 是一种基于 WebGL 的框架，它封装了 WebGL 中的许多底层细节，提供了更加简单易用的接口，让开发人员可以在浏览器端实现高质量的3D动画、交互和游戏等。相比于 WebGL，使用 Three.js 更加方便和简单，可以更快捷地实现各种复杂的3D效果。 （ps: WebGL和Three.js工作中没用过，不是很了解，抽时间学习下） 省流，先上效果 因为最终要实现随着人走动，背景也要动起来的效果。所以这里使用了animation: movebg 6s linear infinite 这里解释一下四个属性分别对应着什么意思 movebg: 背景图位置改变的动画，animation里调用, @keyframes movebg 处定义 6s: 顾名思义，动画执行一次持续的时间 linear: 变化速度，这里是匀速的意思 infinite：播放次数，这里是无限播放@keyframes上文说了是定义动画的，此处把动画分为了两针。 第一帧是动画刚开始的时候，背景图在水平方向550px处，第二帧是动画结束时，背景图在水平方向0px处。 这两帧的位置形成了背景图后移动感觉。 如果background-position: 550px;的数值变大，效果就是背景图后退的更快了 第三步，加上人走路的分解图这个图是分解人走路的各个姿势。理论上姿势分解的越多，效果越流畅，代码细节越多。如果小伙伴们要在项目中用到人走路的动画，人物姿势分解图需要问你们的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个姿势，再走到第一个姿势。然后循环。 第五步，大功告成，下面贴上全部代码 css动画 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 } } 完结这篇文章是我在网上冲浪的时候发现的效果，其实我一直蛮感兴趣走路动画，只是一直没时间搞，都用来刷某音和某站了。这里把动画效果和实现方式整理了一下，希望对小伙伴有帮助。 后续，我可能还会更新其他CSS3动画方面的，因为的确很感兴趣。 欢迎转载，但请注明来源。 最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。 |
【本文地址】