CSS3-Animotion抽丝剥茧，一步步画出跑男动画
时间：2023-03-31 00:34:44
CSS
作为真正的前端开发者，不能只关注前端逻辑部分。毕竟，“水银泄漏”式的页面设计和“炫酷逼真的”动画效果是我们区别于其他程序员的独特优势之一。力图100%还原视觉稿，搭建起UE设计灵感与用户视觉享受之间的桥梁：俗话说“晋帝祭祀北郊，欲出新版，工欲求新”。削之，笔三分。”用古人的书法来形容我们的代码，真是贴切准确又自恋。之前的文章大多分享了JS相关的内容。今天不急，说说前端页面的动画部分。通过分析一个《跑男》动画的例子，将CSS3中与动画相关的知识点剥离，穷尽所有知识点。如果读者有自己的感受或者不同的看法，欢迎一起讨论。整个项目的Github地址可以在这里找到。与线上效果相比，这个仓库减少了90%，但更适合实践和理解。欢迎有兴趣的读者自己拉下来玩玩。里面只有一层动画，可以像葫芦画画一样练习调试。项目介绍这是一个运营活动页面——“春季马拉松赛”：用户以闯关、角色扮演的形式参与。在某些情况下，您扮演的马拉松选手将绕着赛道（非正式赛道形状）移动并攻击终点线。部分页面动画效果如下：当然，这个动画并不完美。考虑到时间成本效益，我只用了两帧重复循环来模拟腿部摆动。但也满足了运营和产品妹子的需求。如果没有线上压力，我们可以多拆分几帧，把他打磨得越来越流畅。首先我们来看一下它的具体实现。动画方案这一系列的动画设计，为了表现和简洁，我使用纯CSS3来实现。CSS3中实现动画的方式主要有两种：transition属性和animation属性。前者用于“平滑地更改CSS值”。一般需要特定帧处理的动画效果明显较弱，这里就不过多介绍了。关注动画属性。animation动画属性其实是一个简写属性，就像大家比较熟悉的“背景”一样。它用来设置六个动画属性：1)animation-name2)animation-duration3)animation-timing-function4)animation-delay5)animation-iteration-count6)animation-direction最重要的是animation-name，它指定了需要要绑定的关键帧的名称。关键帧，我们用来定义几个关键节点帧。具体我就不搞科研了。如果初学者不懂，社区里有很多关于这些的资料。跑男开始跑步，回到具体的业务场景，我们来分析一下。跑男的动画其实可以拆分成两部分：1）两腿交替摆动；2）另一种是移动位置。这两项行动应紧密结合。如果你能把这个想清楚，那么你就能理解基本的想法。那么，如何让这两个动画一起应用到“静止”的跑男身上呢？我采用了添加一个div标签作为父节点wrapper的方法：
/div>'man-wrapper'这个div和'man'这个div大小一模一样，视觉上绝对重叠。父节点处理位移，子节点负责交替腿：.man-wrapper{display:inline-block;宽度：46px；高度：75px；位置：绝对；}.man{显示：内联块；宽度：46px；高度：75px；背景：url(img/sprite.png)；位置：绝对；顶部：0；left:0;}当需要触发移动并开启运行状态时，父节点要添加“start-run”类：$('.man-wrapper').addClass('start-run');同时子节点添加“running”类：$('#man').addClass('running');动画实现了“start-run”的位移动画设计，跑道上的直线部分比较简单，我们的思路是使用transform:translate3d。但是，目视稿中不规则弯曲不少于5处。在不改变原图、不添加多余图片的基础上，我们可以使用transform:rotate3d让跑男侧身。具体设计如下图所示：1）1-2和4-5，只需要改一下transform：translate3d；2）2-4部分，即为曲线准备了2、3、4三个阶段。当然，如果时间充裕，我们可以拆分成更细更细分的。3）其中3为在曲线中心转45度：rotate3d(0,0,1,45deg)；4）其中4是一个完整的转：rotate3d(0,0,1,90deg);具体代码：.start-run{动画：start-run5000ms;动画填充模式：转发；animation-timing-function:linear;}@keyframesstart-run{0%{transform:translate3d(0,0,0);}35%{转换：translate3d(0,155px,0)rotate3d(0,0,1,0deg);}50%{transform:translate3d(20px,224px,0)rotate3d(0,0,1,-45deg);}70%{transform:translate3d(80px,242px,0)rotate3d(0,0,1,-90deg);}100%{transform:translate3d(200px,243px,0)rotate3d(0,0,1,-90deg);}}为什么是35%、50%、70%？这是我调试的，可以达到比较流畅的效果。如果追求更严谨，可以通过列出一个极坐标来计算位移和时间。当然，这会花费更多。还有一点值得一提的是animation-timing-function:linear;总的来说，马拉松的中段类似于匀速跑~解决了位移的问题，再来看摆腿。这实际上是两张图片交替播放。就是gif图的原理。我使用改变背景位置的方法来切换精灵图像：.running{animation:running-man1200mssteps(2)infinite;}@keyframesrunning-man{0%{background-position:00;}50%{背景位置：92px0;}}不要只看代码，有一些最重要的细节需要注意。首先是“无限”的使用，这应该不足为奇。另外，大家关注过steps功能吗？steps()函数实现步进动画。我们知道动画定义的关键帧是“平滑过渡”。如何理解这种平稳过渡？我做了一个“反例”图来说明。当使用关键帧改变Sprite图片的background-position时，得到的效果是：这样的“平滑过渡”显然不是我们想要的。因此，在切换Sprite图片背景的方案下，steps()就派上用场了。顺便说一句，最近有受访者提到他们对CSS3动画很熟悉，但他们中的大多数人还不知道stepsstep函数。如果不清楚，可以参考这里。借助steps()函数，我们实现了交替跑动的分解动画：这里还不够完美，其实还没有完全结束。有一些问题值得我们思考。1）真的需要多一个tag相互组合生成动画吗？事实上，它不是。动画的神奇和强大之处在于它可以接受多个序列的动画属性。比如我们可以这样实现上面的情况：.running{animation:start-run5000msforwardslinear,running-man1200mssteps(2)infinite}2）如果刻意追求更好更完美的动画，我们需要什么储备？不得不说数学和物理知识。比如二次曲线、三次曲线、五次方曲线、正余弦、圆弧、抛物线、回弹曲线、弹簧曲线等，如果你有兴趣研究这些，这里安利一下：高性能动画实现与可视化1、可视化2、除了数学公式，我们还需要掌握样式预处理器函数的使用。毕竟我们不可能自己手动去实现这么多的框架。综上所述，流畅高效的动画制作不是一蹴而就的，需要各方面乃至跨领域的积累。如果您对此感兴趣，欢迎讨论。最后，本文截图使用本厂UE视觉稿：设计师徐冬，交互设计PM：田晓天小姐姐。PS：百度知识搜索部前端持续招兵买马，有意者速速联系。..
