Maison> interface Web> tutoriel CSS> le corps du texte

新手篇:如何用CSS实现简单骨骼动画(代码分享)

奋力向前
Libérer: 2021-09-18 14:05:21
avant
2234 Les gens l'ont consulté

之前的文章《教你怎么使用shell脚本实现服务器快速设置(附代码)》中,给大家介绍了怎么使用shell脚本实现服务器快速设置。下面本篇文章给大家介绍如何用CSS实现简单骨骼动画,我们一起看看怎么做。

新手篇:如何用CSS实现简单骨骼动画(代码分享)

1、背景

某天设计师来找我说,“这个心愿牌傻傻地挂在那不好看,加个动效呗,就左右摆动一下就行,很简单的!”,我一想,行呀,提升用户视觉体验,开搞。

微信截图_20210918134731.png

十分钟后,不对呀,这个左右摆动好假,不像现实中风吹的效果。

注:此处加快了动画的速度和摆动的幅度。

.animate-1 { animation: swing1 1s ease-in-out infinite; transform: rotate(-5deg); transform-origin: top center; } @keyframes swing1 { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg);} 100% { transform: rotate(-5deg);} }
Copier après la connexion

14.gif

冷静思考,为啥这个摆动会没有灵魂。于是拿起工卡开始摆动,看看现实中的摆动效果是咋样的,最后豁然开朗:原来现实中的心愿牌(和工卡同理)在受力的时候,并不会整体摆动,而是会根据节点位置分成几部分有关联地摆动,这其实是个简单的骨骼动画!那到底怎么去实现呢?

2 、骨骼动画

这里将以这个心愿牌摆动动画为例,和大家一起研究如何使用css来实现。

2.1 分离元素

要让动画元素分开运动,首先需要拆分元素。拆分的依据是上面提到的节点,也就是骨骼动画中所谓的关节。例如这个心愿牌就有两个关节,分别在牌的上面和牌的下面,于是我们能拆分出3个动画元素:

微信截图_20210918135020.png

2.2 拼接元素

Copier après la connexion

这里看似简单,但是如果对骨骼动画不了解的话,会掉到坑里,上面就是错误的示范。为了加深大家的理解,特地挖了一个坑

2.3 添加动效

在上面的基础上,我们就可以为每一部分添加不同幅度和方向的摆动动效啦。

Copier après la connexion
.animate-2 .item-1 { /* 设置margin是为了定位,使其部分重叠在一起 */ margin-bottom: -8px; margin-left: 18px; position: relative; z-index: 1; animation: swing2-1 1s ease-in-out infinite; transform: rotate(-3deg); transform-origin: top center; } .animate-2 .item-2 { animation: swing2-2 1s ease-in-out infinite; transform: rotate(5deg); transform-origin: top center; } .animate-2 .item-3 { margin-top: -5px; margin-left: 17.5px; position: relative; animation: swing2-3 1s ease-in-out infinite; transform: rotate(-5deg); transform-origin: top center; } @keyframes swing2-1 { 0% { transform: rotate(-3deg); } 50% { transform: rotate(3deg);} 100% { transform: rotate(-3deg);} } @keyframes swing2-2 { 0% { transform: rotate(5deg); } 50% { transform: rotate(-5deg);} 100% { transform: rotate(5deg);} } @keyframes swing2-3 { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg);} 100% { transform: rotate(-5deg);} }
Copier après la connexion

大功告成?来看一下效果吧

14.gif

我的天,这是啥啊!!!看起来摆动确实要比整体摆动真实,不同元素有不同的摆动幅度和方向。但是错位了呀。

再继续冷静思考,问题出在,骨骼动画的每一个子动画都是有关联的,而我们上面设计的每一个动画都是独立的。举个例子,顶部的红绳摆动时,会牵引住下面的牌子,导致下面牌子位置发生变化。下面的牌子在位置发生变化的同时,播放自己摆动的动画,这才是骨骼动画!

2.4 填坑 - 从js实现骨骼动画来理解其原理

源码在这里,因为在油管,为了避免某些同学没能科学上网看不到,所以以下面的跑步动作为例,讲解一下js实现过程

https://github.com/bit101/CodingMath/tree/master/episode44

  • 根据大腿的初始状态,当前旋转速度,计算大腿下一帧的位置;

  • 根据当前大腿的位置和小腿当前的速度,计算小腿下一帧的位置;

  • ...无限循环...

1452F.gif

从这里可以看出,小腿的位置是依赖大腿的位置的,这就不会出现我们上面的错位情况。所以说白了,骨骼动画的特性就是:

关键元素带着子元素一起运动,子元素在此基础上自己运动。

那么js实现中是通过先计算大腿位置,再由大腿位置计算小腿位置来实现联结的,而css该怎么实现呢?

2.5 纯css实现

回顾最关键的地方:关键元素带着子元素一起运动,子元素在此基础上自己运动。,要实现关键元素和子元素一起运动,在css里面,只要关键元素包裹子元素即可!,这就是css实现骨骼动画的基石。

Copier après la connexion
.animate-3 .s-1 { animation: swing3-1 1s ease-in-out infinite; transform: rotate(-3deg); transform-origin: top center; } .animate-3 .s-2 { animation: swing3-2 1s ease-in-out infinite; transform: rotate(-5deg); transform-origin: top center; } .animate-3 .s-3 { animation: swing3-3 1s ease-in-out infinite; transform: rotate(-5deg); transform-origin: top center; } @keyframes swing3-1 { 0% { transform: rotate(-3deg); } 50% { transform: rotate(3deg);} 100% { transform: rotate(-3deg);} } @keyframes swing3-2 { 0% { transform: rotate(5deg); } 50% { transform: rotate(-5deg);} 100% { transform: rotate(5deg);} } @keyframes swing3-3 { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg);} 100% { transform: rotate(-5deg);} }
Copier après la connexion

1445F.gif

这次终于大功告成了。这里有三个元素,更多元素也是同理的,不断嵌套即可。

3、最终动效演示

细心的同学会发现上面实现的骨骼动画看着也别扭,归根结底是各个元素摆动的方向和幅度没有调节好,这里附上调整完的效果,用心感受:

.animate-4 .s-1 { animation: swing4-1 5s ease-in-out infinite; transform: rotate(-2deg); transform-origin: top center; } .animate-4 .s-2 { animation: swing4-2 8s ease-in-out infinite; transform: rotate3d(0, 1, 0, 20deg); transform-origin: top center; } .animate-4 .s-3 { animation: swing4-3 8s ease-in-out infinite; transform: rotate(3deg); transform-origin: top center; } @keyframes swing4-1 { 0% { transform: rotate(-2deg); } 50% { transform: rotate(2deg);} 100% { transform: rotate(-2deg);} } @keyframes swing4-2 { 0% { transform: rotate3d(0, 1, 0, 20deg); } 50% { transform: rotate3d(0, 1, 0, -20deg);} 100% { transform: rotate3d(0, 1, 0, 20deg);} } @keyframes swing4-3 { 0% { transform: rotate(3deg); } 50% { transform: rotate(-3deg);} 100% { transform: rotate(3deg);} }
Copier après la connexion

14F.gif

4、End

纯CSS确实能实现骨骼动画,但仅限于简单的场景。在复杂场景中,例如前端游戏里面的骨骼动画,涉及到的节点比较多,用CSS虽然能实现,但效率不高,所以社区有很多从设计工具直接导出可用的骨骼动画信息,再用js来加载运行的方案,大家感兴趣可以Google一下。

本文主要通过简单的案例来加深大家对骨骼动画的原理性的认识,至于最后大家用CSS还是用JS来实现,就是“杀鸡要不要用牛刀”的问题了。

个人认为,只要屠龙刀在手,用不用已经不重要了。加油,希望大家能在各个方向找到自己的屠龙刀。

推荐学习:CSS视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:juejin.im
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!