缩放响应动画-CSDN博客

本文探讨了如何在不同屏幕尺寸下保持动画效果的美观。介绍了根据容器调整动画大小、了解使用环境的重要性，以及响应单元扩展、比例缩放和自适应缩放等关键方法。建议使用响应单位和视口单位，结合SVG的向量性质，确保动画在所有场景下都有良好表现。

摘要由CSDN通过智能技术生成

扩展我们的网站和应用程序，以使其在每个屏幕上看起来都很漂亮可能很困难。这种困难的很大一部分可能是试图获得特定的组件，尤其是那些必须保持一定大小（例如动画）的作品，以便无论屏幕大小如何都看起来不错。在本文中，我们将介绍如何帮助使响应式动画保持所需大小的大小。

在介绍特定技术之前，我们需要牢记一些基本准则：

缩放响应动画的准则

1.根据容器调整动画大小

无论我们使用的是自适应缩放还是自适应缩放（请参见下文），我们都应尝试根据容器的大小调整动画大小。在响应式缩放中，这非常简单，但是在自适应缩放中，我们必须关注元素（容器）查询。唯一的例外是，如果我们知道在每种情况下元素都将相对于视口进行定位和调整大小。即便如此，明智的做法是根据容器确定每个零件的尺寸，以防我们以后改变主意。

有时候，我已经完全按照我只想意识到它仅适用于特定屏幕尺寸的方式完成了动画的抛光。那段时间包括犯下一些错误，例如使用绝对单位（如px ），仅在一个屏幕尺寸上查看它，使用响应单位但无法检查极端尺寸，以及其他两次不得不回头完全重构方法的场合。相对于父元素调整动画大小有助于防止这种情况的发生，以下几点也可以：

2.了解使用它的环境

动画将是在应用程序的多个部分中重复的模块吗？最初它仅用于页面加载器吗？是否需要扩展？牢记这一点可以帮助确定缩放动画的方法，并避免浪费您的精力。

现在，让我们看一下缩放动画的三种最重要的方法：以响应单位进行缩放，比例缩放和自适应缩放。

响应单元扩展

根据父项调整大小

当我们使用%或em类的响应单位时，动画会根据父级自动调整其大小，因为它们的值会随着父级的变化而变化。

如果是百分比，则子级的宽度值由该属性的父级值乘以该子级上设置的百分比值来设置。
对于em s，它将查看父级的font-size ，该font-size决定孩子的size值乘以em s的数量。

这使我们能够确保响应动画的每一部分都保留我们想要的相对于彼此的行为。

根据视口调整容器大小

从那里开始，如果我们相对于视口调整容器的大小，那么响应片段也将最终根据视口调整自身大小。

我们可以根据视口使用百分比来设置容器的大小，但这通常需要设置类似html, body { height: 100%; } html, body { height: 100%; } ，并确保相对于主体调整父对象的大小，这对于嵌套而言并非总是如此。添加此新规则也会影响其他样式更改。

另外，我们可以使用视口单位 ，它根据视口大小调整容器的大小，而不管其嵌套的深度。要记住的一件事是，对视口单位的支持并不是完美的，尽管绝对处于可以用于大多数项目的状态。

当它是一个非常简单的动画（例如这种幻觉）时，我倾向于仅将响应单元用作动画的标量。大多数情况下，它需要使用从下方采用的方法来对响应单元进行配对，以使动画保持比例。

比例缩放

我们可以通过三种主要方法在缩放比例时使响应动画保持比例。

1.尺寸根据宽度

为了使元素的大小基于容器的宽度，我们可以使用以下方法：

.container {
  height: 0;
  padding-top: 100%;
}

见笔无限山CSS扎克索西耶（ @Zeaklous ）上CodePen 。

但是，如果您要根据视口调整容器大小，则更直接的方法是像这样使用vw ，尽管在支持方面还不算太远。

2.基于高度的尺寸

我们也可以通过使用vh来根据高度调整容器的大小，如本演示中所示，但这是我见过的使用最少的技术。我唯一记得自己做过类似的事情是当我使用响应单元创建此加载器时，但即使如此，我也没有使用容器或视口单元。

3.尺寸基于较小的尺寸

到目前为止，基于较大的尺寸调整大小是我调整响应式动画（尤其是可视化效果）的最常见方式，因为我几乎总是希望我的所有响应式动画都能完全可见。这种方法确保了这种情况的发生。

.container {
  max-width: 100vh;
  max-height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.container::before {
  content: "";
  display: block;
  margin-top: 100%;
}

见笔袅袅点扎克索西耶（ @Zeaklous ）上CodePen 。

该技术没有利用vmax单位，因此任何支持视口单位（回到IE9）的浏览器都可以使用它。但是，它确实使用了一个伪元素（除非您想使用真实元素），这一点应牢记。

如果要在视口本身上缩放容器并且可以使用视口单位，则根据较大的尺寸来调整大小非常简单。所有你需要的是：

.container {
  width: 100vmin;
  height: 100vmin;
}

仅当相对于视口调整动画大小时，而不是某些较小的容器时，才可以使用此方法。

自适应缩放

自适应缩放在特定断点的变化之间切换。请参阅Geoff GrahamCSS-Tricks 文章，了解响应缩放和自适应缩放之间的区别。

有时，我们可能希望至少部分响应式动画更改它们在特定屏幕尺寸下的尺寸设置方式。这通常在使用文本或细线时完成，尽管有时在许多复杂的事物变得较小时也很适用。徽标可能是最常用的元素，因为它们需要精确。

有没有人做的东西自适应的方式，但我接近它以同样的方式我做响应式设计：通过扩大我的动画，直到事情开始看起来很丑，然后添加一个断点修复什么样子难看。

有时将响应片段与自适应片段混合在一起是适当的，例如下面的钢笔中。顶部是响应式的，但是文本是自适应的，以防止在字体大小介于中间的情况下文本缩放变得难看。

在CodePen上查看 Zach Saucier（ @Zeaklous ）的笔突破。

关于SVG的说明

SVG可以利用上面概述的任何方法。最常见的是，我将SVG像模块化动画一样对待，并确保SVG由SVG元素本身确定大小，如上所述，通常将其作为基于较大尺寸的容器来对待。通过这种方式，它利用了SVG的向量性质，使其可以缩放到所需的大小。

有关如何具体缩放SVG的更多信息，请查看CSS-Tricks上有关Amelia Bellay-Royds的有关缩放SVG组件的文章，或参阅Sara Soueidan的Codrops有关使SVG响应的文章。

使它在所有情况下看起来都很棒

经过一点规划，动画在小尺寸下的效果也一样好。不要使用像素单位，并确保每个宽度，高度和距离值都是基于一个或两个基于容器/视口尺寸或字体大小的变量定义的。

翻译自: https://css-tricks.com/scaling-responsive-animations/