安卓动画入门_网络动画入门

安卓动画入门

无论您是刚刚开始使用基础知识还是想探索更高级的技术，我们已经构建了完整的指南来帮助您学习CSS和为CSS 设置动画 。

网络动画入门

近年来，Motion已成为Web设计领域中非常重要的部分。 运动和动画在界面上增加了层次，可以帮助用户，在整个过程中提供反馈，令人愉悦和参与。

在本文中，我将通过简单的过渡，更复杂的动画和有用的资源，逐步介绍学习网络动画的所有步骤。 将会有一些实用的互动练习来向您介绍要点。 到最后，您将对当前的Web动画景观以及如何掌握它有一个扎实的了解。

我们将关注以下内容：

• 什么，为什么？
• CSS过渡
  
• CSS关键帧动画
• 真实动作
  
• 三次贝塞尔函数（定时）
  
• CSS库和工具
  
• SVG
  
• JavaScript
  
• 原型制作
  

什么，为什么？

Web设计学科日新月异，近年来出现的一个方面就是动画能力。 浏览器变得越来越强大，处理器速度越来越快，手持设备已经为“手势”铺平了道路。 滑动，捏紧并用力触摸。

Motion为界面提供了许多可改善用户体验的功能，包括：

• 因果关系 ：强调行动和React，一件事引起另一件事。
• 反馈 ：告诉用户他们已成功（或未成功）完成某项操作，例如单击某项或输入表单数据。
• 进步 ：说明一件事情跟着另一件事情发生，串联加载中的事件-旋转棒是一个很好的例子。
• 愉悦 ：好的设计通常被认为是不可见的，但是执行得当的动作可以真正使您的用户满意并吸引他们。

Motion改善了用户体验，并为网络带来了活力。 考虑到所有这些，作为界面设计师，重要的是要考虑动画。 让我们开始做基础！

学习资源

• 为什么要设置动画？ 由多诺万·哈钦森（Donovan Hutchinson）
• Rachel Nabors创作的网络动画

CSS过渡

CSS过渡通常是Web设计人员进入运动世界的门户。 它们指示浏览器采用元素的初始状态，然后采用结束状态，并在两者之间平稳过渡。 语法相对直接，包含四个属性和一个缩写形式：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

让我们从一个按钮开始。 在这个例子中，我们有一个带有一些基本样式的按钮，使它看起来好像是从页面上抬起的一样。 默认情况下，如果将鼠标悬停在它上面，它将更改颜色。 然后，如果您单击它，它似乎被向下推。 我们使用background ， position-top和position-left属性来完成此操作，但是每种情况下的更改都是瞬时的：

现在，通过向.button元素添加transition效果，使效果更微妙。 例如，添加transition: all 1s; 将确保所有属性更改将在1秒钟内平稳过渡。

在CSS窗格中取消注释第一条规则，您将看到它生效：

现在您已经看到了这项工作，请尝试取消注释第二条规则。 在第二个示例中，我们分别列出了每个更改的属性，因此我们可以为每个属性定义不同的过渡速度。

最后，尝试取消对第三个示例的注释，在该示例中您还将看到我们还添加了计时功能 。 这些都会影响过渡速度-我们将在短期内详细讨论。

学习资源

• 通过CSS过渡启动并运行

CSS关键帧动画

随着CSS过渡的到来，现在是时候将其提升一个级别了。 CSS关键帧动画提供了更多控制权，使您可以在整个时间轴上指定更改。 关键帧动画需要两个步骤； 自己定义关键帧，并将动画分配给您选择的元素。

假设我们从一个球开始。

现在我们可以定义一些关键帧，设置一个from状态和一个to状态。 在这里，我们说它的left位置属性将从5％开始，动画到85％，从而有效地使球在屏幕上移动。

@keyframes move {
    from {
        left: 5%;
    }
    to {
        left: 85%;
    }
}

您可以看到我们在@keyframes声明中嵌套了from和to 。 并且我们将动画move命名为。 现在我们需要将此动画分配给我们的球，我们这样做：

.ball {
    animation: 1s move;
}

这是以其最简单的速记形式实现的。 我们需要定义动画要持续多长时间，以及我们要应用哪个动画。 现在，当我们加载演示时，您将看到动画生效：

注意 ：动画会在页面加载时开始播放，因此您需要点击此嵌入式笔一角的重新运行按钮以查看发生了什么。

更多控制

超越简单的from和to阶段，我们可以定义点一直使用百分比的时间表。 使用0％和100％将为我们提供与之前完全相同的结果：

@keyframes move {
    0% {
        left: 5%;
    }
    100% {
        left: 85%;
    }
}

让我们在中间添加一个额外的步骤，并将球带回到起始位置。 我们还将使动画迭代计数为infinite ，从而使其不断循环播放。 编辑下面的笔中的值，然后看它们生效：

可以将多个动画添加到单个元素，更改动画方向，并完全更改时间。 查看这些资源以了解更多信息！

学习资源

• 使用CSS关键帧动画启动并运行
• CSS动画入门
• Val Head CSS动画口袋指南
• UI动画通讯
  

真实动作

运动使静态物体栩栩如生，而真正的运动可以使它产生巨大的变化。 运动赋予物体质量，将其放置在空间中，并且现实世界中的物理学突然应用于该物体。 如果一个物体以我们熟悉的方式移动，我们就更有可能建立起最重要的情感联系。 圆上下移动和球跳动之间的区别是：

两者之间的区别很明显（尽管反弹远非完美）。 学习如何赋予动画真实性至关重要。

“大多数自然动作都倾向于遵循弓形的轨迹，动画应遵循这一原则，遵循暗示的“弧度”以实现更大的真实感。” – 动画十二个基本原理

学习资源

• Google的《材料设计指南》中的实质性议案
  
• 在网络上的动画中增加吸引力
  
• 迪士尼的动画十二个基本原理
  

三次贝塞尔函数（定时）

我们已经在本文中讨论了两次“放松”； 它是事物移动的速率，可以表示为沿两个轴的曲线。 在CSS中，有一些内置的计时功能可以与它们的关键字一起使用（ linear ， ease-in ， ease-in-out等），但是您可以使用三次方贝塞尔函数更精确地描述这些计时，看起来像这个：

随着时间沿x轴不断移动，移动速度沿y轴加快和减慢。 上面的示例用于我们之前的弹跳球； 您可以想象球快速向上移动，然后在到达顶点时变慢。 在cubic-bezier.com上查看此曲线以帮助您可视化它。

曲线由两个控制柄控制（如果您曾经在Adobe Illustrator或Sketch中使用过钢笔工具 ，将会很熟悉），并且我们可以在CSS中使用的三次贝塞尔曲线功能可以反映这些控制柄。 因此，我们的函数如下所示：

cubic-bezier(.1,.25,.1,1)

有四个值，每个值的范围从0到1（出于论证目的）从0到1。它们表示：

• 手柄1（.1）的x坐标
• 手柄1的y坐标（.25）
• 手柄2（.1）的x坐标
• 手柄2（1）的y坐标

了解贝塞尔曲线功能如何工作将极大地改善您的动画效果，尤其是在您要实现真实运动的情况下。

学习资源

• 简化三次贝塞尔函数
  
• cubic-bezier.com由利·贝罗
  
• easings.net ，作者：Andrey Sitnik

CSS库和工具

手工编写漂亮CSS动画可能很困难，但是有许多可用的库可以帮您完成繁重的工作。 Dan Eden的Animate.css是一个样式表，其中填充了基于关键帧的动画，所有动画均具有自定义类名，可供使用。

学习资源

• 从上到下学习Motion UI
• 快速提示：通过Animate.css使您的网站栩栩如生

更多CSS库

• 魔术动画
  
• DynCSS
• CSS摇
• 悬停

SVG

近年来，SVG（可缩放矢量图形）已成为Web设计师的最佳朋友，它为我们提供了清晰的图形，更浅的页面和可设置动画的元素。 我们已经讨论过的一些内容可以直接应用于SVG元素，但是许多属性的行为有所不同。

这是一个嵌入式SVG，在悬停时对其颜色应用了过渡。 但是，您会注意到我们使用的是fill属性，而不是HTML元素所期望的background-color ：

SVG可以使用CSS进行动画处理，就像我们在本文其余部分中讨论的一样。 如果可以使用HTML进行转换或翻译，则可以使用SVG进行相同的处理。

但是SVG也可以通过SMIL（ 同步多媒体集成语言 ）进行操作，该语言允许您直接在SVG内部使用<animate>元素之类的东西。 看看这个SVG圈子，可以在屏幕上切换：

这是一个圆圈，其中包含一个<animate>指定要动画的属性（在本例中为cx坐标），从50px到400px的位置，持续时间为2秒，并无限重复。

<circle cx="0" cy="50" r="50" fill="#2098d1">
        <animate attributeName="cx" from="50" to="400" dur="2s" repeatCount="indefinite" />
   </circle>

SMIL是一套非常强大的工具，请从下面开始阅读！

学习资源

• 如何将“ animateTransform”用于嵌入式SVG动画
  
• SVG动画指南（SMIL） ，作者：Sara Soueidan
  
• 使用Snap.svg制作动画
  
• 在虚线上签名：动画自己的SVG签名
  

喜欢动画SVG的想法，但不确定要制作什么动画？ 在Envato Studio上查看矢量插图服务 ，看看有什么优惠！

JavaScript

许多前端开发人员通过在网页上添加动画来首先使用JavaScript（或jQuery）。 浏览器对CSS替代品的支持是粗略的，而JS是一个不错的选择。

jQuery的UI库附带了许多现成的UI帮助器，包括effect()方法，如下所示（从下拉列表中选择一个效果，并观察将其应用于内容的效果：

除此之外，JavaScript的（在右手，不是我）能提供严重的动画，而且由于的Adobe Flash在其辞职正式移交了一些辉煌JavaScript库已经出现。 GreenSock的动画平台（GSAP）可以说是功能最强大的工具，它为开发人员提供了大量基于时间轴和补间的工具。

看看我们的初学者课程 ，看看您如何使用GSAP！

学习资源

• GreenSock动画平台：第一步
  
• 带有GSAP插件的高级动画
  

原型制作

静态设计交付物已经足够的日子已经一去不复返了-图像和流程图无法传达足够的信息。 如今，精明的客户希望看到并感受您的设计，体验机芯，这就是为什么原型能回答更多问题的原因。

“如果一张图片价值1000字，那么一个原型价值1000次会议。” — @ ideo说

— John Maeda（@johnmaeda） 2014年10月5日

原型可能是原始的，也可以相当准确地反映出最终产品，但是无论它们落在这个规模上的什么地方，都需要提高效率。 在涉及动作和动画的地方，有许多应用程序可以帮助您交流设计。

Adobe Animate是下一代Flash，提供高级动画工具。 Adobe After Effects是一种视频制作工具，但还提供了基于时间轴的高级运动。 但是，还有一些更简单的应用程序，例如适用于Mac的Principle，甚至是Keynote：

一旦运动设计成为您所做工作的一部分，找到最好的工具向世界展示是重要的一步！

学习资源

• Mac原理运动设计
  
• 使用Hype 3的基于时间轴的Web动画
• 如何对Web动画原型使用After Effects
  
• 琳达·董的主题运动图形实验
  

结论

我们终于得到它了！ 本指南应该使您对当今的Web动画格局有深入的了解。 掌握了所有这些学习资源后，您将获得一套全新的技能来探索运动设计的世界。

希望你觉得它有用。 请在下面的评论或Envato社区论坛中分享您自己的技巧和资源。

翻译自: https://webdesign.tutsplus.com/articles/get-started-with-web-animation--cms-26848

安卓动画入门