每个屏幕尺寸和设备的响应动画

>我进入网络开发的旅程是在多年的运动图形作用之后起作用的。 尽管经历了这种经验，但Web动画最初感到艰巨。 视频图形定义了导出设置； Web动画必须动态适应各种设备。 让我们探索响应式动画技术。

动画目的：至关重要的第一步

在编码之前，请考虑动画的预期用途（如Zach Saucier在响应式动画上的出色文章中所建议）。

>是可重复使用的模块吗？它需要缩放吗？ 了解这些因素可以指导您的方法并阻止浪费的努力。

>

动画通常属于以下类别：

>

• 固定：图标或装载机在所有设备上保持一致的尺寸和纵横比。 简单的基于像素的值就足够了。
• 流体：动画无缝地适应不同的屏幕尺寸。 布局动画常见。
针对性的
• >动画特定于某些设备或断点（例如，仅桌面效果或触摸/悬停相互作用）。
>

>流体和有针对性的动画需要不同的策略。

>流体动画：授权浏览器

安迪·贝尔（Andy Bell）的智慧：“成为浏览器的导师，而不是其微管理器。”提供明确的指南，然后让浏览器为每个用户优化。>

>流体动画利用浏览器功能。 适当的单位是关键。 使用视口单元允许动画通过浏览器调整大小的浏览器进行流畅。

>

避免动画布局属性（例如

>和

），该属性可能导致倒流和生动画。 优先级left>和top属性。transform opacity超越视口单元，探索以下选项：

SVG单元：固有的响应

SVG的固有可伸缩性简化了响应动画。

属性定义了SVG画布的可见部分。 在此空间中进行动画确保行为一致，无论SVG尺寸如何。

相对于HTML中父容器的孩子元素的动画元素更为复杂。 通常需要使用JavaScript调整调整大小的位置，以防止性能问题。

>viewBox>容器单元：一个有希望的新功能（当前具有有限的浏览器支持）允许相对于父元素的动画，简化了响应式设计。

浏览器对容器单元的支持：

桌面：

移动/平板电脑：

流体布局过渡的

翻转

>动画复杂布局变化（例如，相对定位和固定定位之间的过渡）具有挑战性。 翻转技术优雅地解决了这一点：

1. 首先：>捕获初始元素位置。
>
2. >最后一个：>将元素移至其最终位置。
>
3. 倒置：>应用逆变换以在视觉上维护初始状态。
4. >播放：从（伪造的）初始状态到最终状态的动画。

gsap的翻转插件简化了此过程。 要更深入地了解香草JavaScript实施，请参阅Paul Lewis的博客文章。

>流畅的缩放SVG和画布

> svg's preserveAspectRatio属性微调缩放行为，提供meet（contail）和（cover）选项。 汤姆·米勒（Tom Miller）的方法使用slice和一个包含元素来揭示更多较大屏幕尺寸的SVG动画。 overflow: visible画布虽然高表现要复杂动画，但仍需要更多的手动管理来响应。 固定的长宽比和自定义单元系统可以模仿SVG的易用性。 请记住要在调整大小上汇总Redraw操作。 像乔治·弗朗西斯（George Francis）这样的图书馆可以简化此过程。

>目标动画：针对特定设备进行优化

>移动设备通常受益于简化或缺席的动画，以增强性能和用户体验。 媒体查询目标特定的视口大小：

CSS动画可以通过媒体查询来控制。 GSAP的

简化了在不同断点上管理JavaScript动画的管理，从而自动处理清理和资源管理。 超出屏幕尺寸，考虑

，

和

媒体功能。gsap.matchMedia()> prefers-reduced-motion超越屏幕尺寸：交互考虑orientation max-resolution不同的设备提供不同的交互方法。

>媒体功能检测悬停功能：

杰克·怀特利（Jake Whiteley）的建议强调了在设计布局和动画时优先考虑输入设备（触摸与悬停）。 hoverscrolltrigger增强

@media (hover: hover) {
  /* CSS hover state */
}

> gsap的scrolltrigger插件

属性标识触摸功能：

0：无触摸

isTouch1：仅触摸

2：触摸和指针
• >对于滚动触发的动画，请使用
重新计算依赖浏览器大小的屏幕尺寸的值。 GSAP 3.10's
• 可防止由于在移动上的栏更改而导致的不必要的刷新。

运动原理：增强可信度

• 距离和宽松：动画速度应与行进的距离有关。 更长的距离证明了更加戏剧性的宽松合理性。 基于屏幕宽度动态调整持续时间。
基于屏幕尺寸的
• >间距和数量：调整元素间距和数量。 将动画视为一个阶段，将元素添加和删除为编舞的一部分（Opher Vishnia的方法）。
记住汤姆·米勒（Tom Miller）的最后建议：“在构建之前最终确定所有动画”，以避免昂贵的改造。 提前计划！

以上是每个屏幕尺寸和设备的响应动画的详细内容。更多信息请关注PHP中文网其他相关文章！