在2016年都柏林DrupalCon上，Nikhil Sukul和Vidit Anjaria将与Drupal讨论动画 。

动画基础

历史

“动画”的最初迹象来自大约5000年前的伊朗一个陶碗。 跳到1500年代，莱昂纳多·达·芬奇（Leonardo Da Vinci）拥有一些描绘动画的图画。 而今天，您可能会认为沃尔特·迪斯尼是现代动画大师。

定义

为了确保我们在同一页上：动画是“对连续的图形或木偶或模型的位置进行摄影以创建运动幻觉的技术”。 我们的眼睛无法观察到每秒移动速度超过60帧的单个对象，因此网络动画是一系列以每秒60帧以上的速度连续显示的计算机图形。

原则

动画中有12条基本原则：挤压和拉伸，预期，登台，直接动作和姿势到姿势，跟随和重叠动作，慢进和慢出，弧线，辅助动作，定时，夸张，实体绘制，和上诉。 下面是其中四个的更多内容。

1. 预期：从之前的动作预测的动作称为“预期”。 例如，用斧头击打一堆木头需要采取以下行动：将斧头向后退，然后用巨大的力击中木头。 把斧头往后退被认为是期待。 另一个示例可以是，在棒球比赛中，在投手实际扔球之前，其投手的身体动作。 根据投手的身体动作，可以预计会掷出球。

2. 次要作用：该作用的React称为次要作用。 例如，当球接触地面并踢起灰尘时。 在这种情况下，接触地面的球是主要动作，扬起灰尘是次要动作。 另一个例子是，当一个人在游泳池里潜水时，从水里溅出是次要动作。

3. 分段：当我们只需要显示或突出显示所有动画对象中的一个时，可以使用分段方法。 例如，如果我们要创建一个模式弹出窗口，该窗口暂存为显示在浏览器屏幕的中间，并在后台禁用所有其他控件。

4. 慢进慢出：在动画中，每个对象开始缓慢，然后达到其适当的速度，然后应减速以完成动画。 也可能是它启动快，但最终却变慢了。 在CSS中，这称为缓动。

使用闪光灯

网络动画始于1987年，当时发明了动画GIF（即图形界面格式）。 GIF主要用于网站上的广告，但像素化存在一些问题。 然后，在1990年代，Adobe推出了Flash（动画动画工具）。 这引发了一场革命，并且是很长一段时间以来在网站上制作动画的最佳方法。 但是Flash有一些问题。

1. 封闭源代码：用户必须从Adobe购买Flash，并且不能对软件进行修改。

2. 安全性： Flash允许在网站上编写和运行复杂的脚本，并且可以编写直接访问计算机内存的脚本。

3. 性能： Flash网站可能需要很长时间才能加载。

4. 资源消耗： Flash 占用大量计算资源，并且如果同时打开多个应用程序或Flash站点，则Flash实际上可能使系统挂起或崩溃。

5. 插件依赖性：您需要在浏览器中安装Flash插件。 而且每个月或更长时间，您都需要对其进行更新。

使用CSS和JavaScript

要在网站上实现动画效果，我们可以使用CSS和JavaScript等开源技术。

使用CSS，我们将动画，过渡和变换属性用作参数。 使用动画属性时，必须使用关键帧属性将动画分成小块。 然后，我们将必要的过渡或变换属性应用于每个片段。

对于JavaScript和jQuery，我们使用animate（）函数并应用转换和过渡属性。 jQuery中有其他可用的函数，我们可以直接使用它们：fadein（），fadeout（），slidedown（），slideup（）以及show（）和hide（）函数，以增加一点延迟，这将帮助实现动画。

Web动画的关键是点击该属性，该属性对浏览器的渲染功能影响较小。

网站的性能完全取决于我们选择实施的技术。 在实现强大的逻辑时，CSS动画将始终比JavaScript动画更轻便。 大多数浏览器非常轻便地使用位置，比例，旋转和不透明度。 如果我们保持60 fps（每秒帧数），则不会对性能产生太大影响。 我们在时间轴瀑布上开始的位置越高，浏览器就需要进行更多的工作才能将像素显示在屏幕上。

从业务角度来看，我们几乎可以在任何地方使用动画，但是大多数情况下，它是用于宣传产品的功能，例如在线教程和课程，在线游戏，电子商务网站，交互式产品组合等等。

翻译自: https://opensource.com/life/16/9/basics-web-animations