在 After Effects 中创建类似内容需要了解的事项：

如何制作项目和作曲

启动 AE 时，您可以按Cmd+N以创建一个新项目，其中包含一个合成。

如果您已经打开了一个项目，按下Cmd+N只会创建一个新的合成。

在这个项目中，我使用了 2 个组合。GUIcomp 保存 GUI 及其动画。iphonecomp 同时保存背景和GUIcomp。

带有 GUI 动画的第二个合成应该与屏幕大小相同，或者至少具有相同的纵横比。稍后，当您将其放置在屏幕上时，如果纵横比关闭，它可能会拉伸到看起来很奇怪。

将图像导入 AE

After Effects 有一个非常好的导入 .psd 文件的系统，但我不喜欢使用它，因为如果您放错位置、移动或重命名 .psd 文件，After Effects 找不到它，您必须为每个文件替换素材单独分层。

例如，如果您将图像文件夹导入项目和您。重命名图像文件夹，您只需替换一个图像片段即可恢复所有丢失的图像（只要所有丢失的图像都存在于同一文件夹中）。这样也减少了混乱。

如何将图像导入项目

在左侧的“项目”面板内右键单击选择：Import > Multiple files

...或者您可以将文件拖到该面板中

我使用slicy将图像从 Photoshop 中导出。

您应该将哪些对象保存为单独的图像文件

本质上，您需要分别保存所有移动对象。您可能还需要单独保存一些静态对象。

^{在这个项目中，我可能将页眉和页脚保存为一个，但页眉有一个阴影覆盖第一个按钮，所以我必须单独保存它们。}

以下是我在将图像文件导入 AE 之前如何在 Photoshop 中保存图像文件的细分。

动画 101

位置动画：

1. 位置动画：
   • 在时间线左侧的列表中选择您的对象。
   • 按P
   • 单击现在位于所选图层下方的秒表图标。这会自动添加第一个关键帧，无论您的时间指示器在哪里（它是时间线中的红线）。
   • 
   • 在时间线中向前移动时间指示器。拖动它或Cmd+{Arrow left or right}或Cmd+Shift+{Arrow left or right}
   • 在合成查看器中，将您的对象拖到您希望它移动的位置（您也可以使用Shift+arrow keys，就像在 Photoshop 中一样，或者通过拖动数字值。）。
   • 另一个关键帧出现在时间轴中，现在您有了动画。
   • 
   • 您可以通过按来播放动画space

将关键帧彼此靠近以加快动画速度，或者将关键帧彼此远离以减慢动画速度。

暂停后继续动画。

一个场景：你已经动画了从 A 到 B 的东西，你想暂停 X 毫秒，然后从 B 移动到 C。

为 B 设置动画后，在时间轴中前进并单击左侧的关键帧图标，此处：

它应该看起来是灰色的，所以不用担心。这只是意味着该位置没有关键帧

由于关键帧 #2 和新创建的关键帧 #3 变换具有相同的值，因此现在这两个关键帧之间存在暂停。然后，您可以通过在时间线中向前移动并再次更改值来继续正常制作动画。

动画其他东西，如旋转或不透明度

我只是想借此机会告诉您，它们都像位置动画一样工作（...减去拖动）。

只需使用按下下面的热键时显示的数字滑块即可。

不同变换方法的热键：

• P- 位置
• T- 不透明度
• R- 回转
• S- 规模
• A- 锚点

只需选择对象并按下这些热键之一并开始制作动画。如果您不选择任何内容，它会显示合成中每个对象的变换方法。

如何将对象从属于其他对象

在 Comp 面板中，您会注意到每个对象上都有一个 Parent 下拉列表。

您可以使用它来定义对象的父对象。

如果您随后移动父元素，您会注意到子元素现在随之移动。附加到父元素的动画也是如此。

如果您为父对象设置动画以进行旋转，则子对象将跟随...

为动画添加弹性

所以也许你注意到按钮动画并没有停在墙上，而是以一种非常有弹性的方式停止。

After Effect Expressions 可以用来实现这一点（它也可以做更多的事情）。

要将表达式脚本应用于动画，Alt+{mouse click}请在脚本中粘贴秒表。

我在按钮动画中使用的表达式

amp, freq, decay可以编辑前 3 个变量以获得不同的结果。

您可以将此相同的脚本应用于基于运动的动画。例如，不透明动画不受影响。

也可以在这里找到。

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}

缓解....

所以这是另一个可以使动画看起来不那么线性的东西，就像上面的表达式脚本一样。

我在那个“触摸指示圈”中使用了 Ease Ease，让它看起来更像人类的运动。

您可以选择一个或多个关键帧并右键单击其中一个。

然后从列表中：Keyframe assistant > Easy Ease

我经常用Easy ease，因为我很懒...

图片或没有发生...

这是一个简单的位置动画，演示了缓动和这个特定的表达式脚本如何对动画产生巨大影响。

将动画合成/素材放入屏幕

因此，在 GUI 动画化之后，是时候将其放置在设备的屏幕上。

1. 将 GUI 合成放置在 iPhone 合成中，就像将图像放置在合成中一样。
2. 在“项目”面板中双击 iPhone comp
3. 选择 GUI 组合
4. 从顶部菜单Effects > Distort > Corner pin
5. 然后只需拖动每个角以匹配设备屏幕角。

导出为 .gif

AE 没有这样做的本地方法，但不用担心，有方法。

我更喜欢这样做：

1. 单击组合中的Projects panel
2. Composition > Add to render queue Cmd+Ctrl+M
3. 然后在时间线通常位于的底部，您可以选择要导出的内容和位置。
   • 我通常会导出无损 .mov
   • 如果单击“渲染设置”，则可以选择帧率，否则将使用 Comp 帧率
4. 然后只需按右上角或该面板上的渲染。
5. 找到导出的文件并在 Photoshop 中打开它。
6. 保存为网络Cmd+Shift+Alt+S
   • 另存为 .gif

说实话没那么糟糕...

导出为视频文件

因此，即使上述方法向您展示了如何导出无损文件，它也不是您应该导出视频文件的方式。

你这样做：

1. 保存您的项目文件。
2. 单击组合中的Projects panel（如果您有多个）
3. Composition > Add to adobe media encoder queue Cmd+Alt+M
4. 将预设从右列拖到左列
5. 按播放。
6. 如果你不选择导出文件夹，默认情况下它就在项目文件旁边。

如何更换镜头

所以AE找不到你的文件？做这个：

• 右键单击“项目”面板中缺少的素材之一
• 从列表中Replace footage > File...
• 找到你的镜头和东西

其他有用的热键

• U- 显示合成中所有使用的关键帧（如果您没有选择任何内容）。例如，当您需要一次移动多个关键帧时非常有用。
• U（双击） - 显示已更改的所有内容。
• E（双击） - 显示所有使用的表达式。
• J- 移动到上一个关键帧。
• K- 移动到下一个关键帧。
• space- 播放比赛
• I或home键 - 将当前时间指示器移动到时间线的开头。
• Cmd+K- 当前的构图设置。
• Cmd+I- 导入文件。
• Alt+{Arrow keys left and right}- 选择关键帧并按热键移动它们。
• Alt+Shift+{Arrow keys left and right}- 选择关键帧并按热键移动它们。

可以找到项目文件here。

这是一个免费的动画模型 .PSD 文件，网站滚动和菜单动画在 Photoshop 中完全编辑和动画 荒谬易于编辑和播放，您可以在此处免费下载文件，我还有一个教程视频易于编辑此免费赠品。

如果您查看该特定帖子的评论，那家伙说他使用了 Adob​​e After Effects http://www.adobe.com/uk/products/aftereffects.html

有两种方法可以做到这一点。

1. 在动画程序（After Effects 就是其中之一）中重新创建/模拟所需的动画，然后将其导出为动画 gif。显然（正如你已经意识到的那样）这将涉及创建“假”触摸和其他交互来演示正在发生的事情。

2. 创建一个功能原型，然后通过 AppleTV 或通过 HDMI 输出的类似方式记录设备的输出，因为它被传递到您的电视。

两者都非常耗时，而且旅程本身就是如此。

但是选项 2 比选项 1 具有巨大的优势。其中最重要的是您将学习一些基本的编程。

然而，更重要的是，通过一些非常基本的交互式编程能力，您将能够比使用动画软件的人更快地迭代变体和替代方法。

您将拥有真正互动的东西来展示您的设计。此外，该艺术品实际上已经在设备上的交互式环境中进行了测试，因此已经确保像素和色彩完美无缺。

但是等等，我知道。你很害怕。这会很难，对吧？

如果您有 iPad，则不会。

Codea 是用地球上最简单、最干净的脚本语言制作琐碎（和非常复杂）的动画和交互性的最便宜、最快的方法...... Lau。

http://codea.io

如果你没有 iPad，那就买一个。

在那之前，继续学习 processing.org，因为您将能够在其中制作类似有趣的模型：

http://processing.org/

处理使用另一种称为 Javascript 的脚本语言。它同样简单，但不如 Lua 优雅。