css svg视频自适应_使用SVG和CSS步骤进行自适应的动画步行周期

css svg视频自适应

In the previous article I talked about steps() in CSS animation, and provided a simple example (the ticking second hand of an analog watch). The same core techniques can be used for more complex animation, including a cartoon figure’s walk cycle.

在上一篇文章中，我讨论了 CSS动画中的 steps() ，并提供了一个简单示例(模拟手表的秒针)。 相同的核心技术可用于更复杂的动画，包括卡通人物的行走周期。

叠放 (Stack)

Traditional cartoon animation creates the impression of motion by showing a series of quick sequenced drawings. During the design and creation phase of the animation these drawings are stacked vertically in “onionskin” layer, allowing the artist to compare them quickly. The same can be achieved by placing drawings on different layers in a modern illustration tool like Adobe Illustrator, as shown in Figure 1:

传统的卡通动画通过显示一系列快速排序的绘图来营造运动感。 在动画的设计和创建阶段，这些图纸垂直堆叠在“洋葱皮”层中，从而允许画家快速进行比较。 通过将图形放置在Adobe Illustrator之类的现代插图工具中的不同图层上，可以实现相同的目的，如图1所示：

Note that no part of the figure remains in the exact same position during the walk cycle: for example, the figure’s head bobs slightly up and down, adding to the sense of motion.

请注意，在行走过程中，图形的任何部分都不会保持在完全相同的位置：例如，图形的头部略微上下摆动，增加了运动感。

Figure 1: Stacked figure drawings

图1：堆叠图

I’ll be exporting the drawings as an SVG in order to take advantage of the format’s small (the final size of the optimized file is just over 13K) scaleless nature, but the same technique could be used with a bitmap image.

我将把图形导出为SVG ，以便利用格式的小尺寸(优化文件的最终大小刚好超过13K)无比例缩放的特性，但是位图图像也可以使用相同的技术。

步行 (Walk)

Extending the traditional method, the individual drawings are then distributed in a horizontal “filmstrip”, shown in Figure 2:

扩展了传统方法，然后将单个图形分布在水平“胶片”中，如图2所示：

Figure 2: Figure drawings distributed into even “frames”

图2：将图形分布成均匀的“框架”

The sequence remains the same, but now “reads” from left to right.

顺序保持不变，但是现在从左到右“读取”。

You can achieve this distribution in Illustrator by selecting the path on each layer and using Object / Transform / Move with increasing values that are multiples of the original artboard width.

您可以在Illustrator中实现这种分布，方法是选择每个图层上的路径，然后使用“ 对象” /“变换” /“移动”，并将其值增大为原始画板宽度的倍数。

The “canvas” area is extended to cover all of the drawings. In this case, each individual “frame” has an area of 250 × 320 pixels.

“画布”区域被扩展为覆盖所有图形。 在这种情况下，每个单独的“帧”都具有250×320像素的面积。

步 (Step)

Our next task is to switch quickly between one drawing and the next, like film running through a camera. Ideally, we would be able to animate the viewBox to move quickly across the scene from one “frame” to the next, but unfortunately we can’t yet animate that with CSS. Instead, we’ll create a container element that is the same aspect ratio as one of the drawings, and apply the exported SVG as a background-image to an element inside it:

我们的下一个任务是在一个图纸和另一个图纸之间快速切换，就像通过相机运行的胶片一样。 理想情况下，我们可以对viewBox进行动画处理，以使其在场景中从一个“框架”快速移动到下一“框架”，但不幸的是，我们尚无法使用CSS对其进行动画处理。 相反，我们将创建一个容器元素 ，该容器元素的长宽比与其中一张图纸相同，并将导出的SVG作为background-image应用于其中的元素：

<div id="walk-container">
  <div></div>
</div>

The CSS:

CSS：

#walk-container {
    display: inline-block;
    position: relative;
    width: 20%;
    padding-bottom: 30%; 
    vertical-align: middle; 
}
#walk-container > div {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(walk-sequence.svg);
    background-repeat: no-repeat;
}

It so happens that the technique of a container-inside-a-container will also work to make the SVG responsive in IE9 - 11.

碰巧的是，容器内部容器的技术也将使SVG在IE9-11中响应 。

By default the entire SVG “filmstrip” will be visible inside the inner container. We need to make this image large enough so that only one “frame” is visible. This value will be 100 times the number of frames, expressed as a percentage:

默认情况下，整个SVG“胶片”将在内部容器内可见。 我们需要使该图像足够大，以便仅可见一个“帧”。 该值将是帧数​​的100倍，以百分比表示：

#walk-container > div {
    background-size: 800%;
}

Now we need to move the filmstrip through the limited viewport of the #walk-container. That means moving to the end of the filmstrip, which we can express in a CSS keyframe animation that changes the position of the background:

现在，我们需要将胶卷移过#walk-container的有限视口。 这意味着移到幻灯片的末尾 ，我们可以用CSS关键帧动画来表达它，以改变背景的位置：

@keyframes walkanim {
  to { background-position: 100% 0; }
}

To run the animation, we’ll start with this:

要运行动画，我们将从以下内容开始：

#walk-container > div {
    animation: walkanim 2s infinite;
}

The result is not exactly what we’re after. You can see what happens in Figure 3:

结果不完全是我们所追求的。 您可以看到图3中发生的情况：

Figure 3: Filmstrip sliding inside container

图3：幻灯片在容器内滑动

行进到位 (Marching in Place)

What we need is the animation moving instantaneously between one frame and the next. To achieve this, we’ll divide the animation into separate steps. That way, each frame will be shown once, with no transition between them. The animation call shown above turns into:

我们需要的动画是在一帧和下一帧之间瞬时移动。 为此，我们将动画分为单独的steps 。 这样，每个框架将显示一次，并且在它们之间没有过渡。 上面显示的动画调用变为：

#walk-container > div {
    animation: walkanim 1.4s infinite steps(7);
}

Note that the number of steps is 1 less than the number of drawn frames. The duration of the walk cycle animation will depend on how many frames are on the filmstrip, and will usually require some experimentation.

注意，步数比绘制的帧数少1 。 步行周期动画的持续时间将取决于胶片上有多少帧，并且通常需要进行一些实验。

前进 (Stepping Forward)

So far what we have is only a figure marching in place. This can work if a background is moving behind the character to impart a sense of motion - think classic Saturday morning cartoons - but in this case we’ll say that we want the character moving from left to right across the entire width of the screen. To achieve this, we can “parent” the animation with another, a technique I previously demonstrated for a hypnosis logo. In this case, the added animation will translate the outer container using % units:

到目前为止，我们所拥有的只是行进中的人物。 如果背景在角色后面移动以赋予运动感，这可以起作用(想想经典的星期六早上的卡通片)，但是在这种情况下，我们要说的是，我们希望角色在屏幕的整个宽度上从左向右移动。 为此，我们可以将动画与另一个动画“父”化，这是我之前为催眠徽标演示的一种技术。 在这种情况下，添加的动画将使用%单位translate 外部容器：

@keyframes stroll {
  from { transform: translateX(-100%); }
  to { transform: translateX(500%); }
}

The time taken for this transformation will depend on how you want the animation to appear: too fast, and the figure will look like they are being pushed by a hurricane, while too slow will make it appear that their feet are slipping on an icy surface.

转换所需的时间取决于您希望动画的显示方式：太快了，人物看起来像是被飓风推动了，而太慢了，看起来好像他们的脚在冰冷的表面上滑了。

#walk-container {
  animation: stroll 60s linear infinite;
}

I don’t want the figure’s walk to speed up or slow down at the beginning or end, so I’ve used linear easing for the animation.

我不希望人物的行走在开始或结束时加速或减速，因此我对动画使用了linear 缓动。

结论 (Conclusion)

Once you understand the principles, it’s possible to use these techniques to create many kinds of complex animation on web pages, which I’ll demonstrate in future articles.

一旦理解了这些原理，就有可能使用这些技术在网页上创建多种复杂的动画，我将在以后的文章中进行演示。

翻译自: https://thenewcode.com/1082/Make-a-Responsive-Animated-Walk-Cycle-with-SVG-and-CSS-steps

css svg视频自适应