⚡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都能实现动画,区别是什么?
- CSS
CSS动画是一种基于浏览器处理的技术,通过改变 CSS 属性来实现动画效果。CSS动画可以实现一些简单的动画效果(如悬停、颜色变化和基本的过渡效果等),而且代码简单、易于维护和优化。
- Canvas
Canvas 是一种基于绘制的技术,通过 JavaScript 代码动态生成图形与图像,实现动态效果。Canvas可以实现更加复杂的绘画,可以绘制各种形状、线条、图形和图像,但适用于复杂、细节丰富的动画效果。 亲自体验:canvas坑多,代码量也大
- WebGL
WebGL 是一种基于OpenGL的3D绘图标准,可以在浏览器中实现 3D 图形渲染。通过 WebGL 可以在浏览器中实现更加复杂的高保真度的3D动画、图像和游戏效果等。
- Three.js
Three.js 是一种基于 WebGL 的框架,它封装了 WebGL 中的许多底层细节,提供了更加简单易用的接口,让开发人员可以在浏览器端实现高质量的3D动画、交互和游戏等。相比于 WebGL,使用 Three.js 更加方便和简单,可以更快捷地实现各种复杂的3D效果。 (ps: WebGL和Three.js工作中没用过,不是很了解,抽时间学习下)
正文
使用HTML + 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;
的数值变大,效果就是背景图后退的更快了
第三步,加上人走路的分解图
这个图是分解人走路的各个姿势。理论上姿势分解的越多,效果越流畅,代码细节越多。如果小伙伴们要在项目中用到人走路的动画,人物姿势分解图
需要问你们的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动画方面的,因为的确很感兴趣。 欢迎转载,但请注明来源。 最后,希望小伙伴们给我个免费的点赞,祝大家心想事成,平安喜乐。
转载自:https://juejin.cn/post/7219943233798684728