在 2016 年都柏林 DrupalCon 大会上，Nikhil Sukul 和 Vidit Anjaria 将讨论 使用 Drupal 进行动画制作。
动画基础
历史
最早的“动画”痕迹来自大约 5000 年前伊朗的一个陶碗。快进到 16 世纪，列奥纳多·达·芬奇有一些描绘动画的画作。而今天，你可能会想到沃尔特·迪士尼是现代动画大师。
定义
为了确保我们理解一致：动画是“拍摄连续的图画或木偶或模型的位置以产生运动错觉的技术。” 我们的眼睛无法看到快于每秒 60 帧的单个物体移动，因此 Web 动画是以快于每秒 60 帧的速率连续显示的计算机图形系列。
原理
动画中有 12 个基本原理：挤压与伸展、预期、分镜头、直线前进动作和姿势到姿势、跟随动作和重叠动作、慢入和慢出、弧线、次要动作、时间掌握、夸张、扎实的绘画和吸引力。以下是其中四个原理的更多信息。
-
预期：从先前的动作预测到的动作称为预期。例如，用斧头劈砍一堆木头需要一个动作，即先将斧头举过头顶，然后用巨大的力量劈砍木头。将斧头举过头顶被认为是预期。另一个例子可以是棒球比赛中投手在实际投球之前的身体动作。根据投手的身体动作，可以预期球将被投出。
-
次要动作：动作的反应称为次要动作。例如，当球接触地面并扬起灰尘时。在这种情况下，球接触地面是主要动作，扬起灰尘是次要动作。另一个例子可以是，当一个人跳入游泳池时溅出的水花，这是次要动作。
-
分镜头：当我们需要从所有动画对象组中仅显示或突出显示一个动画对象时，我们使用分镜头方法。例如，如果我们正在创建一个模态弹出窗口，该窗口被分镜头显示在浏览器屏幕的中间，并禁用背景中的所有其他控件。
-
慢入慢出：在动画中，每个对象开始时速度较慢，然后达到其适当的速度，然后应减速以完成动画。或者可能是它开始很快，但在结束时减速以完成。在 CSS 中，这被称为缓动。
使用 Flash
Web 上的动画始于 1987 年动画 GIF 或图形界面格式的发明。GIF 主要用于网站上的广告，但存在一些像素化问题。然后，在 1990 年代，Adobe 推出了 Flash，这是一款用于制作带有音频动画的工具。这引发了一场革命，并在很长一段时间内成为在网站上制作动画的最佳方式。但 Flash 存在一些问题。
-
闭源：用户必须从 Adobe 购买 Flash，并且不能对软件进行修改。
-
安全：Flash 允许在网站上编写和运行复杂的脚本，并且可以编写直接访问计算机内存的脚本。
-
性能：Flash 网站可能需要很长时间才能加载。
-
资源占用：Flash 使用大量的计算资源，如果同时打开多个应用程序或 Flash 网站，实际上可能会导致系统挂起或崩溃。
-
插件依赖性：您需要在浏览器中安装 Flash 插件。并且每个月或更长时间，您需要更新它。
使用 CSS 和 JavaScript
为了在网站上实现动画，我们可以使用 CSS 和 JavaScript 等开源技术。
使用 CSS，我们使用动画、过渡和变换属性作为参数。当使用动画属性时，必须使用关键帧属性将动画分成小块。然后，我们对每个块应用必要的过渡或变换属性。
使用 JavaScript 和 jQuery，我们使用 animate() 函数并应用变换和过渡属性。jQuery 中还有其他函数可用，我们可以直接使用它们：它们是 fadein()、fadeout()、slidedown()、slideup()，以及 show() 和 hide() 函数，用于添加少量延迟，这将有助于实现动画。
Web 动画的关键是点击对浏览器渲染能力影响较小的属性。
网站的性能完全取决于我们选择用于实现的技术。在实现强大的逻辑时，CSS 动画始终比 JavaScript 动画更轻量。大多数浏览器都非常轻量地使用位置、缩放、旋转和不透明度。如果我们保持 60 fps（每秒帧数），它不会对性能产生太大影响。我们在时间轴瀑布上开始得越高，浏览器将像素显示到屏幕上需要做的工作就越多。
从商业角度来看，我们可以几乎在任何地方使用动画，但主要用于推广产品的功能，例如在线教程和课程、在线游戏、电子商务网站、交互式作品集等等。
3 条评论