在 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，我们使用 animation、transition 和 transform 属性作为参数。 当使用 animation 属性时，必须使用 keyframe 属性将动画分成小块。 然后，我们将必要的 transition 或 transform 属性应用于每个块。
使用 JavaScript 和 jQuery，我们使用 animate() 函数并应用 transformation 和 transition 属性。 jQuery 中还提供了其他函数，我们可以直接使用它们：它们是 fadein()、fadeout()、slidedown()、slideup()，以及用于添加少量延迟的 show() 和 hide() 函数，这将有助于实现动画。
Web 动画的关键是命中对浏览器渲染能力影响较小的属性。
网站的性能完全取决于我们选择用于实现的技术。 在实现强大的逻辑时，CSS 动画将始终比 JavaScript 动画更轻。 大多数浏览器都非常轻量地使用 position、scale、rotation 和 opacity。 如果我们保持 60 fps（帧每秒），它不会对性能产生太大影响。 我们在时间线瀑布中开始得越高，浏览器就必须做更多的工作才能将像素显示到屏幕上。
从商业角度来看，我们几乎可以在任何地方使用动画，但主要用于推广产品的功能，例如在线教程和课程、在线游戏、电子商务网站、交互式作品集等等。
3 条评论