中文：David Khourshid 翻译：码农 - 小风
今天，我想向您展示如何巧妙地使用 HTML、CSS 排序动画和 SVG 过滤器将生活中最甜蜜的事物之一 - 动物 - 绘制到网络上。 我们将说明两种绘制植物草图的技术：一种使用纯 HTML 和 CSS，另一种使用内联 SVG 背景图像。
该演示是高度实验性的 - 动画 SVG 滤镜目前仅在 Chrome 中可用。
涉及的动画也很复杂，因此本教程将重点介绍创建这种植物及其逼真运动所涉及的不同技术。 发挥你的创造力，自己创作奇异可爱的植物动画。
话不多说，让我们开始吧！
塑造植物外观
该演示使用两种不同的技术来创建鸟不同身体部位的形状。 哈士奇使用 CSS border-radius 属性，狐狸使用内联背景 SVG 图像，因为前者的形状更复杂。
HTML 标签
这两种昆虫都使用嵌套的 HTML 部分来对身体部位进行分组。 分组的概念对于创建逼真的动漫效果非常重要 - 当大脑连接时，眼睛和鼻子也应该保持连接在一起css3 曲线动画，因为它们生长在身体上。
每个部分可以独立连接，也可以与其父元素的连接相连，这样会形成更真实的效果。 如果您没有意识到，尾部深深地嵌套在其他尾部组件中。 当每个尾部部分相对于其父部分定位，然后旋转相同的量时，就会产生均匀曲线的视觉印象。
使用 CSS 创建图形
CSS 的 border-radius 属性被广泛用于创建小狗的图像。 对于许多基本特征，需要逐位边界直径控制。 例如，以下是如何构造猫的后腿：
.哈士奇后腿{
//...
左上边框半径：35% 100%；
右上边框半径：40% 100%；
第一个数字表示曲线距底部/下边缘的深度，第二个数字表示曲线距左/右边缘的深度。
其他形状，比如前腿，不能单独用 border-radius 来塑造，需要用 Transform 来塑造：
.husky-front-legs > .husky-leg:before{
变换：skewY(-30deg)skewX(10deg)；
变换原点：右上角；
一旦图形就位，每个元素就可以在其父元素中被赋予一个基于绝对比例的位置。 这确保了每个身体部位的精确放置和响应能力。
使用 SVG 创建图形
对于兔子，Sass-SVG 用于为每个身体部位创建复杂的 SVG 形状。 SVG 图像可以用作背景图像，甚至更好的是，只要它们是 base-64 或 UTF-8 编码的，就可以内联编译（以获得最大的浏览器支持）。
然而，手动编写 SVG 代码很困难。 我使用 Adobe Illustrator 创建初始形状：
然后我将每个身体部位保存为 SVG 图像。 SVG 代码通过 Sass-SVG 传输到 SCSS 样式表。 例如，这是兔子耳朵：
.狐狸鼻子：之前{
@include svg((viewBox: (00168168))){
// 鼻子
@include svg('路径',(
填充：$颜色鼻子，
d: 'M83.7,86.7c3.3,0,11.6-3.9,11.6-7.1c0-3.2-9.4-3.2-11.6-3.2c-2.2,0-11.6,0-11.6,3.2 C72.1,82.8 ,80.4,86.7,83.7,86.7z'
））；
// 连接鼻子和嘴巴的线
@include svg('路径',(
描边：$颜色鼻子，
填充：无，
d: 'M83.7,102.3V86.7'
））；
// 口
@include svg('路径',(
描边：$颜色鼻子，
填充：无，
d: 'M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7'
））；
这将在 url() 中生成一个编码的内联 SVG 字符串，如下所示：
.狐狸鼻子：之前{
背景图像: url("数据:image/svg+xml;,%3Csvg...");
由于 SVG 是背景图像，因此可以像 HTML 元素一样进行转换和动画处理。 通过 Sass-SVGcss3 曲线动画，Sass $variables 可用于完全控制 SVG 填充和画笔颜色。
使用内联 SVG 可以轻松让兔子做出响应。 viewbox 属性值 ((viewBox:(0 0 168 168))) 直接来自 SVG 文件，但包含 SVG 背景图像的元素可以是任何大小，只要保持高度/宽度百分比即可。 狐狸背部的所有部分都是绝对定位的，并且与 .fox-head 具有相同的高度和长度。
“Squigglevision”和 SVG 过滤器
Squigglevision 是一种动画技术，通过摆动形状的轮廓来模拟手绘动画。 这使得兔子和阿拉斯加等场景看起来更加动态和手绘，即使植物没有移动。
SVG 有一个名为 的过滤器，它会向应用该过滤器的任何地方提供“噪声”。 组合过滤器以指定像素在每个过滤器中的连接距离。
属性的任何元素。为了创建“squigglevision”效果，关键帧动画一次快速设置一个滤镜
@keyframesquigglevision{
0% {
-webkit-filter: url('#squiggly-0');
过滤器： url('#squiggly-0');
25% {
-webkit-filter: url('#squiggly-1');
过滤器： url('#squiggly-1');
50% {
-webkit-filter: url('#squiggly-2');
过滤器： url('#squiggly-2');
75% {
-webkit-filter: url('#squiggly-3');
过滤器： url('#squiggly-3');
100% {
-webkit-filter: url('#squiggly-4');
过滤器： url('#squiggly-4');
注意：这些 SVG 过滤器目前在 Firefox 中不起作用，因此请将这样的过滤器动画视为渐进式增强过程。
为植物添加动画效果
CSS 关键帧没有为我们提供一种方便的方法来排序和组合动画。 解决这个问题的最好方法是使用动画计划（故事板）作为时间轴，并使用预处理器（例如Sass）来生成关键帧。
例如兔子，在概述每个动画应该发生的故事板后，使用变换和绝对时间偏差（秒）来为每个身体部位设置动画。 以下是 SCSS 中概述的兔子耳朵示例：
$动画：(
//...
'鼻子'： （
// 静止位置
(4s,5s,7s): 旋转Y(-4deg),
// 鼻子朝下
4.5s：旋转Y（-4度）旋转X（-3度），
// 狐狸向左看
(7.5s,9s): 旋转X(-3度)旋转Y(-28度)旋转Z(-11度),
// 狐狸看起来是对的
(9.5s,12s): 旋转Y(7deg),
// 狐狸直视前方
13秒：旋转Y(0)，
),
//...
）；
这里，$animations 是一种 Sass 映射，其中键是动画的名称（例如“nose”）。 每个动漫名称的值是另一个映射，其中键是倾斜或以秒为单位的倾斜列表（例如 (7.5s,9s) ），并且该值是每个倾斜键的变换属性。
那么我们如何将这张地图变成@keyframe动画呢？ 首先，设置全局 $duration: 17s 变量 - 这将是每个动画的总持续时间。 然后，使用嵌套的 Sass @each ... in ... 循环，我们可以通过循环 $animations 映射为每个动画生成预期的 CSS @keyframe 声明：
@each $animation-name, $animation in $animations{
//关键帧声明
@keyframes#{$动画名称} {
@each $offsets, $transformin $animation{
@$offsets 中的每个 $offset{
// 偏移量声明块
#{百分比($偏移量/$持续时间)} {
// 变换属性
变换：#{$变换}；
这将生成如下所示的关键帧：
@keyframesnose{
14.70588% {
变换：rotateY(-4deg);}
23.52941% {
变换：rotateY(-4deg);}
29.41176% {
变换：rotateY(-4deg);}
41.17647% {
变换：rotateY(-4deg);}
26.47059% {
变换：rotateY(-4deg)rotateX(-3deg);}
44.11765% {
变换：rotateX(-3deg)rotateY(-28deg)rotateZ(-11deg);}
52.94118% {
变换：rotateX(-3deg)rotateY(-28deg)rotateZ(-11deg);}
55.88235% {
变换：rotateY(7deg);}
70.58824% {
变换：rotateY(7deg);}
76.47059% {
变换：rotateY(0);}}
如果不使用 SCSS，这些比率的估计可能会很复杂。 它们表示动画每个步骤中每比特所需时间值的总持续时间的偏移量之比。
然后可以将动画应用到它们各自的身体部位，例如动画：nose $duration noneInfinite;。 每个动画的持续时间需要相同，以便它们无缝循环。
现实的宽松曲线
制作动画的另一个重要部分是看起来逼真，因此请为动画的每个部分仔细选择（或创建）缓动曲线。 最生动的缓动曲线是“正弦”——换句话说，平滑的起伏缓动曲线。 这样，自然运动就不会麻木地开始和停止，动画计时功能应该反映这一点。
对于兔子和阿拉斯加，我使用三次贝塞尔曲线(0.645, 0.045, 0.355, 1)（在此处预览）。 这条曲线（见下文）开始时稍快一些，然后平稳地远离。 当然，最好尝试各种曲线来找到最适合动画的曲线。
最后：在 Chrome 中，您可以直观地检查所有按顺序排列的动画，以确保它们在正确的时间发生。 您只需打开控制台，单击“样式”选项卡，然后单击“播放”按钮：
希望本教程能帮助启发您创建更多序列 CSS 植物动画！
发表评论