专栏首页web秀纯CSS实现简单骨骼动画

纯CSS实现简单骨骼动画

背景

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

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

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

.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);}
}

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

骨骼动画

关于前端骨骼动画的实现可以参考《骨骼动画原理与前端实现浅谈》,里面简单提及了css和canvas两种实现方式。这里将以这个心愿牌摆动动画为例,和大家一起研究如何使用css来实现。

分离元素

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

拼接元素

<div>
    <!--元素1-->
    <div class="item-1"></div>
    <!--元素2-->
    <div class="item-2"></div>
    <!--元素3-->
    <div class="item-3"></div>
</div>

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

添加动效

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

<div class="animate-2">
    <!--元素1-->
    <div class="item-1"></div>
    <!--元素2-->
    <div class="item-2"></div>
    <!--元素3-->
    <div class="item-3"></div>
</div>

css

.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);}
}

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

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

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

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

这里又给大家推荐个学习资料:《coding-math》系列 - 用数学知识和canvas创造好玩的动画,其中这一集讲解了骨骼动画的原理,对应的源码在这里,因为在油管,为了避免某些同学没能访问外国网站看不到,所以以下面的跑步动作为例,讲解一下js实现过程:

根据大腿的初始状态,当前旋转速度,计算大腿下一帧的位置; 根据当前大腿的位置和小腿当前的速度,计算小腿下一帧的位置; ...无限循环...

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

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

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

2.5 纯css实现

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

<div class="animate-3">
    <!--运动模块1-->
    <div class="s-1">
        <div class="item-1"></div>
        <!--运动模块2-->
        <div class="s-2">
            <div class="item-2"></div>
            <!--运动模块3-->
            <div class="s-3">
                <div class="item-3"></div>
            </div>
        </div>
    </div>
</div>

css

.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);}
}

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

最终动效演示

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

.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);}
}

End

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

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

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

原文地址:https://juejin.im/post/5deb49a251882512302daa92

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    你肯定知道,动画在创建引人注目的 Web 应用程序中扮演着重要的角色。随着用户越来越多地将注意力转移到用户体验上,商户开始意识到完美、愉快的用户体验的重要性,结...

    Javanx
  • JavaScript数组去重(12种方法)

    数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看...

    Javanx
  • CSS机械齿轮Loading,爱的魔力转圈圈

    “爱的魔力转圈圈,想你想到心花怒放黑夜白天,可是我害怕爱情只是一瞬间,转眼会不见...”,嗨起来,小伙伴们,跟我一起来!

    Javanx
  • 关于移动web教程免费发布

    各位老铁大家好,最近经历了太多太多,精力一直不能集中做自己愿意做的事情。 移动Web课程一开始设置收费10块,其实本意是让大家感觉有支出,就会相对珍惜好好学习,...

    老马
  • Docker常用命令

    Docker中最核心最基本的概念就是镜像(Image),容器(Container),以及仓库(Repository),其常用的操作命令也就是围绕这三个进行。

    CodingDiray
  • 视频 | 英伟达发布新算法,可以重建缺失像素

    AI 科技评论按:本文由雷锋字幕组编译,原标题 New AI Imaging Technique Reconstructs Photos with Realis...

    AI科技评论
  • 超级智能的形式和战略

    在人类的历史上,大约12万年以前,从非洲走出的尼安德特人遍及了欧洲大陆的所有角落,如果历史上不出意外,尼安德特人将会不断发展壮大,智力会不断提高,最终发展为高级...

    iOSDevLog
  • 英伟达发布新算法,可以重建缺失像素

    日前,英伟达公司由 Guilin Liu 领导的研发团队发布了一种最先进的深度学习算法,可以编辑图像或复原那些像素有缺失的图像。

    AI研习社
  • PHP To Go 转型手记 (三)

    作为一名PHP程序员,我感到荣幸。但在时代不断的变迁中,要具备足够的知识才可生存。

    CrazyCodes
  • Github 2019 年最值得关注的数据科学项目 Virgilio(维吉尔) 中文版

    目前为止: [7,128] star [1,303] fork,希望你看到之后能给它添加一个 star 。

    iOSDevLog

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动