新手篇：如何用CSS實作簡單骨骼動畫（程式碼分享）

在

之前的文章《教你怎麼使用shell腳本實現伺服器快速設定（附程式碼）》中，跟大家介紹怎麼使用shell腳本實作伺服器快速設定。以下這篇文章跟大家介紹如何用CSS實作簡單骨骼動畫，我們一起看看怎麼做。

1、背景

某天設計師來找我說，「這個心願牌傻傻地掛在那邊不好看，加個動效唄，就左右擺動一下就行，很簡單的！”，我一想，行呀，提升用戶視覺體驗，開搞。

十分鐘後，不對呀，這個左右擺動好假，不像現實中風吹的效果。

註：此處加快了動畫的速度和擺動的幅度。

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

冷靜思考，為啥這個擺動會沒有靈魂。於是拿起工卡開始擺動，看看現實中的擺動效果是咋樣的，最後豁然開朗：原來現實中的心願牌（和工卡同理）在受力的時候，並不會整體擺動，而是會根據節點位置分成幾個部分有關聯地擺動，這其實是個簡單的骨骼動畫！那到底怎麼去實現呢？

2 、骨骼動畫

這裡將以這個心願牌擺動動畫為例，和大家一起研究如何使用css來實現。

2.1 分離元素

要讓動畫元素分開移動，首先需要分割元素。拆分的依據是上面提到的節點，也就是骨頭動畫中所謂的關節。例如這張心願牌就有兩個關節，分別在牌的上面和牌的下面，於是我們能拆分出3個動畫元素：

2.2拼接元素

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

這裡看似簡單，但是如果對骨骼動畫不了解的話，會掉到坑里，上面就是錯誤的示範。為了加深大家的理解，特地挖了一個坑

2.3 添加動效

在上面的基礎上，我們就可以為每一部分加上不同幅度和方向的擺動效啦。

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

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

大功告成？來看看效果吧

我的天，這是啥啊！ ！ ！看起來擺動確實要比整體擺動真實，不同元素有不同的擺動幅度和方向。但是錯位了呀。

再繼續冷靜思考，問題出在，骨骼動畫的每一個子動畫都是有關聯的，而我們上面設計的每一個動畫都是獨立的。舉個例子，頂部的紅繩擺動時，會牽引住下面的牌子，導致下面牌子位置改變。下面的牌子在位置改變的同時，播放自己擺動的動畫，這才是骨骼動畫！

2.4 填坑- 從js實現骨骼動畫來理解其原理

源碼在這裡，因為在油管，為了避免某些同學沒能科學上網看不到，所以以下面的跑步動作為例，先來說明一下js實作過程

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

• #根據大腿的初始狀態，當前旋轉速度，計算大腿下一幀的位置；

• #根據當前大腿的位置和小腿當前的速度，計算小腿下一幀的位置；

• ...無限迴圈...

從這裡可以看出，小腿的位置是依賴大腿的位置的，這就不會出現我們上面的錯位狀況。所以說穿了，骨骼動畫的特性就是：

關鍵元素帶著子元素一起運動，子元素在此基礎上自己運動。

那麼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>

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

#

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

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

4、End

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

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

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

推荐学习：CSS视频教程

以上是新手篇：如何用CSS實作簡單骨骼動畫（程式碼分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！