新手篇：如何用CSS实现简单骨骼动画「代码分享」

简介

骨骼动画（Skeletal Animation）又称为关节动画（Jointed Animation），是一种基于骨骼结构（Skeleton）的动画技术，可以通过调整绑定在某些骨骼上的图像来进行动画制作。在本文中，我们将通过使用 CSS 和一些 关键帧（keyframes）来实现简单的骨骼动画效果。

准备工作

HTML:

首先，我们需要一个 HTML 页面来包装我们的 CSS 和图像。为了方便，我们可以创建一个 div 元素，并且设置它的宽度、高度、背景颜色以及这个 div 元素的自身位置居中（使用 margin 属性）。

<div class="wrapper">
  
</div>

CSS：

接下来，我们需要为 div 元素添加一些样式来让它变得更加美观。在这里，我们可以使用 background-image 属性将我们的图像作为 div 元素的背景，并设置背景大小为 cover 以便它可以自适应屏幕尺寸。我们还可以使用边框（border）来为它添加一些额外的细节。

.wrapper {
  width: 300px;
  height: 300px;
  margin: auto;
  background-image: url('https://picsum.photos/300/300');
  background-size: cover;
  border: 1px solid black;
}

实现骨骼动画

首先，我们需要定义一些关键帧（keyframes）。

这些关键帧用于描述动画过程中的各个步骤。例如，在我们的骨骼动画中，有两个骨骼，我们需要为每个骨骼定义两个关键帧，用于描述它们在动画过程中的位置。

@keyframes bone1-move {
  0% {
    transform: rotate(0deg) translate(0px);
  }
  50% {
    transform: rotate(30deg) translate(50px);
  }
  100% {
    transform: rotate(0deg) translate(0px);
  }
}
@keyframes bone2-move {
  0% {
    transform: rotate(0deg) translate(0px);
  }
  50% {
    transform: rotate(-30deg) translate(50px);
  }
  100% {
    transform: rotate(0deg) translate(0px);
  }
}

在这里，我们为每个骨骼定义三个关键帧，分别在动画开始、中间和结束时设置不同的 transform 值，从而创建出动画效果。

接下来，我们需要将骨骼和它们的位置放进文档中。

因为我们是想要用骨骼动画来产生动画效果，所以我们需要先把骨骼放进文档中。我们可以将它们作为 div 元素的背景图片，然后设置它们的大小和位置，使它们刚好放在 div 元素的中心。

.wrapper {
  width: 300px;
  height: 300px;
  margin: auto;
  background-image: url('https://picsum.photos/300/300');
  background-size: cover;
  border: 1px solid black;
  background-position: center center;
}
.bone1,
.bone2 {
  width: 50px;
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/png/128/149/149071.png');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
.bone2 {
  background-image: url('https://image.flaticon.com/icons/png/128/149/149069.png');
}

在这里，我们为骨骼元素定义了一个宽度、高度、背景图片、绝对定位位置、margin 属性，使它在 div 元素的中心位置居中。我们使用 transform 属性将它们在水平方向平移了 50%，垂直方向平移了 50%，以便将它们对准 div 元素的中心位置。

最后，我们需要将关键帧应用到骨骼元素上，以便它们能够动起来。

在这里，我们需要使用 animation 属性将关键帧应用到骨骼元素上，从而为它们创建出动画效果。我们还可以使用各种不同的属性来控制动画元素的行为，例如 animation-delay、animation-direction、animation-fill-mode、animation-iteration-count 和 animation-timing-function 属性等。

.bone1 {
  animation: bone1-move 1s ease-in-out infinite;
  animation-delay: 0.2s;
}
.bone2 {
  animation: bone2-move 1s ease-in-out infinite;
  animation-delay: 0.2s;
}

在这里，我们将关键帧应用到骨骼元素上，设置了一些动画属性，从而创建出一个平滑流畅的骨骼动画。我们还设置了 animation-delay 属性，使得第二个骨骼动画在第一个骨骼动画完成之后才开始运行。

总结

在本文中，我们通过使用 CSS 和关键帧来创建了一个可以产生简单骨骼动画效果的页面。我们首先创建了一个包含单个 div 元素的 HTML 页面，并且使用样式为它添加了背景和边框。然后，我们使用相对定位将两个骨骼元素放在页面中心位置，并使用关键帧来控制它们的动画效果。为了增加动画的可维护性、扩展性和可读性，我们将骨骼元素样式分开处理，并将动画逻辑单独定义到关键帧中。