ae时钟转动效果(ae怎么做时钟转动指针)

本文主要介绍ae时钟旋转效果(ae如何制作时钟旋转)，下面跟着东辰网详细了解一下吧。

1.使用软件:AdobePhotoshop，AdobeAfterEffect。

版本:当然是越新越好。建议CC。注意，AECC只能安装在Windows下的64位系统上。如果是32位系统，只能用CS4版本。

让s以Windows的AECC和PSCC为例。其他版本也差不多。用MAC的同学可以自己改快捷键~

由于我习惯用英文版的AE，你可能会更多的用中文版，所以我会尽量把他们都照顾好。中文翻译以AECC的官方中文版本为准。

2.关于GIF动画

GIF会动是因为它是用很多单张图片打包在一起播放的，所以会很大，一次就要好几兆。在线播放的话很容易卡顿，影响效果。当然，适当的优化可以减少体积，做之前更重要的是要知道数量，在保证效果的前提下尽量避免臃肿的情况。

那么什么参数会影响GIF图片的体积呢？

①大小②动画时长③帧率④颜色数

大小和动画时长很好理解；

帧率是指每秒播放多少张图片。帧数越大，动画就越流畅，但代价是体积更大。一般超过30就没有意义了。

颜色的数量是很多人忽略的一个关键因素。颜色数量越少，尺寸越小，画质越差。但是很多动画本身并没有使用几种颜色，而且头文件的压缩空间相当可观，所以真实感背景复杂的GIF通常要么体积巨大，要么画质很差。

我建议用dribbbles400x300像素为尺寸，长度控制在10秒以内，帧率25，颜色数根据动画尽量在128以下。

3.事前准备移动

除非你非常熟练，否则想拍出好看的动画，三遍五遍两遍敲脑子的行为，往往事倍功半，甚至一无所获。在这里，我强烈建议大家拿出笔和纸，画个分解图，整理一下思路。透视画法并不是什么高深的东西，只要你能简单的画几张关键的图，简单的描述一下物质是如何运动的就可以了。关键是你在做的时候不会忘记要做什么，这样才能提高效率。下图是一个学生开始次分享时画的一面镜子的草图。这是一个非常简单的天气图标动画。她一个下午就完成了她的GIF作。

成品:

然后我在PS里画的。玩UI的人应该都不陌生。这里要注意的是按照之前分镜设计的动作来分材质。分组和图层命名越清晰越好(或者可以记住哪个图层是什)。图层样式保持栅格化，最终存储为PSD文件。

4.将PSD文件导入AE。

最后给AE！！！激动，有木有！！！唐不要担心，在这里导入PSD文件一步很重要，很多新手都卡在这里。

启动AE，文件→导入→文件，或者直接按CTRLI选择要导入的PSD文件:

注意，唐不要按导入键。选择组成视网膜层大小及从导入为下拉菜单，然后按导入，这样就可以保持图层的独立性。

另外两个选项，素材，是将PSD作为图片导入，而构图与我们的选择非常相似，只是每个导入的图层与画布大小相同，中心点相同。

然后A——，但在此之前，我们必须设置它。右键点击构图→构图设置。

长度和宽度自动继承自PSDcanvas的设置。像素长宽比是方形像素，帧率设置为25，时长设置为10秒，其他默认都可以。然后单击确定。

构图设置也可以在这里找到:

然后开始我们的动漫之旅！唐不要忘记保存磁盘！

5.在A——的所有材料和合成都在这里。

此面板显示打开的合成中的层。注意，ps中划分的组是以组合的形式存在的。双击它进入开始组和第二组。

预览面板，你可以了解我们的小图图，甚至参考线可以导入。事实上，AE可以导入ps中的所有路径、图层样式、参考线和组，它真的是Adobe他的亲哥哥！

时间轴对于UI设计师来说可能是比较陌生的东西。唐别害怕，西西会带你参观的！

万事开头难。让让我们先制作最简单的动画。在这种情况下，它是一个时钟，所以让指针转一次。将时间轴上的指针移动到0秒，找到指针所在的图层(第)，点击小三角形，点击变换旋转(TransformRotatio))旁边的小秒表，所以我们在0秒处添加了一个关键帧，如图:

然后将指针移动到10秒，旋转值设置为360(会自动变成1x0)，也就是转了一圈。好了，按空格键玩，可以看到旋转的效果。

如何做出炫目的效果不是本教程的目的。让咱们搬家成功就翻过这一页~

再次提醒:一定要随时保存！

6.输出动画，生成GIF。

不管这部动画有多棒，它失去它是没有用的。AE虽然是专业的电影动画软件，但输出选项其实少得可怜(当然，它可以用自带的MediaEncoder输出更多格式，但这不在本教程讨论范围)。反正没有直接输出GIF的选项，只能曲线救国了。

方法一:输出视频到GIF。

确保我们的无题1构图被选中(边框变为黄)。

已选择和未选择

按快捷键Ctrl+M，合成将被添加到渲染队列中。

渲染是从动画生成动画文件的过程。让s做一些设置:点击无损的黄色字(不是三角)。

在弹出对话框的格式中选择Quicktime:

点按它旁边的“格式”选项，并选择视频编解码器。

选择PNG，质量选择100，这样输出几乎可以无损。

如果你能如果找不到Quicktime选项，请先安装Quicktim。

好，默认保留其他选项。单击“确定”两次，然后返回到渲染队列。单击输出为黄色小字母(不是小三)，并设置生成的文件路径和文件名。我我将保留默认值无标题1.mov这里，然后唐不要忘记点击渲染按钮。进度条运行完后，我们再回到熟悉的PS~

拖动无标题1.mov我们直接生成到PS中，你会看到一个额外的时间线。

其实PS可以简单的做视频，但是我我也不擅长。我当我有时间的时候，我会再研究它。好了，现在点击文件→另存为web格式:

最后，它这是最后一步。这里有许多优化选项，老实说，我还没有我没有彻底研究它们。左下角可以看到输出的大概大小(此图为381.)，右下角可以播放观看动画。注意这里有一个循环选项。记得改变一次致永远或者它只会停止一次。

右上方的这些参数是优化的重点。你可以自己调整一下，试试看有哪些参数可以调小而不失真。最后，点击另存为输出，而你我们完成了！

这种药方这种的优点是生成的文件少，直观，管理方便，中间生成的视频文件也可以作为展示素材。

方法2:输出图像序列(序列)

有时候因为某些原因，AE输出视频失败或者PS无法导入，可以试试图像序列。

在AE中，渲染设置时选择PNG序列。

然后输出路径指定一个文件夹存储输出的图像序列，这样点渲染后就会生成一组带有序列号的PNG文件。

然后打开PS。如果是PSCC以上，可以直接文件打开，然后在图像序列中选择一张图像，勾选图像序列选项。

那么帧率就是25。

以下步骤参考方法1即可。

如果你的PS是以前版本的CC，会有点繁琐，主要是导入序列帧比较麻烦。打开PS，文件脚本加载文件到堆栈

弹出面板选择浏览。

然后选择所有序列帧。

然后耐心等待图像加载到PS层(如果你有很多图像序列，加载时间会很)

点击创建帧动画，时间线会变成这样(有时候加载图层后，你的时间线直接如下图，所以你不不需要点击创建帧动):

然后单击时间轴右上角的选项菜单，并选择从层创建帧:

就这样，动画终于推出来了。可以点击下面的播放按钮播放一下，看看播放顺序是否正确。

如果发现是反了(大多数情况下都是)，点击刚才的小菜单，选择反框纠正:

在弹出的面板中输入0.04，这是按照我们的动画设置每秒25帧来计算的(想想如果动画设置为每秒30帧或者其他值，这里要填多)，

确认后的步骤和之前一样。单击文件→另存为web格式:

如有任何问题或建议，欢迎讨论！

1.使用软件:AdobePhotoshop，AdobeAfterEffect。

版本:当然是越新越好。建议CC。注意，AECC只能安装在Windows下的64位系统上。如果是32位系统，只能用CS4版本。

让s以Windows的AECC和PSCC为例。其他版本也差不多。用MAC的同学可以自己改快捷键~

由于我习惯用英文版的AE，你可能会更多的用中文版，所以我会尽量把他们都照顾好。中文翻译以AECC的官方中文版本为准。

2.关于GIF动画

GIF会动是因为它是用很多单张图片打包在一起播放的，所以会很大，一次就要好几兆。在线播放的话很容易卡顿，影响效果。当然，适当的优化可以减少体积，做之前更重要的是要知道数量，在保证效果的前提下尽量避免臃肿的情况。

那么什么参数会影响GIF图片的体积呢？

①尺子英寸②动画时长③帧率④颜色数

大小和动画时长很好理解；

帧率是指每秒播放多少张图片。帧数越大，动画就越流畅，但代价是体积更大。一般超过30就没有意义了。

颜色的数量是很多人忽略的一个关键因素。颜色数量越少，尺寸越小，画质越差。但是很多动画本身并没有使用几种颜色，而且头文件的压缩空间相当可观，所以真实感背景复杂的GIF通常要么体积巨大，要么画质很差。

我建议用dribbbles400x300像素为尺寸，长度控制在10秒以内，帧率25，颜色数根据动画尽量在128以下。

3.事前准备移动

除非你非常熟练，否则想拍出好看的动画，三遍五遍两遍敲脑子的行为，往往事倍功半，甚至一无所获。在这里，我强烈建议大家拿出笔和纸，画个分解图，整理一下思路。透视画法并不是什么高深的东西，只要你能简单的画几张关键的图，简单的描述一下物质是如何运动的就可以了。关键是你在做的时候不会忘记要做什么，这样才能提高效率。下图是一个学生开始次分享时画的一面镜子的草图。这是一个非常简单的天气图标动画。她一个下午就完成了她的GIF作。

成品:

然后我在PS里画的。玩UI的人应该都不陌生。这里要注意的是按照之前分镜设计的动作来分材质。分组和图层命名越清晰越好(或者可以记住哪个图层是什)。图层样式保持栅格化，最终存储为PSD文件。

4.将PSD文件导入AE。

最后给AE！！！激动，有木有！！！唐t放心，导入PSD文件很重要，很多新手都卡在这里了。

启动AE，文件→导入→文件，或者直接按CTRLI选择要导入的PSD文件:

注意，唐不要按导入键。选择组成视网膜层大小及从导入为下拉菜单，然后按Import，这样可以保持图层的独立性。

另外两个选项，素材，是将PSD作为图片导入，而构图与我们的选择非常相似，只是每个导入的图层与画布大小相同，中心点相同。

然后A——，但在此之前，我们必须设置它。右键点击构图→构图设置。

长度和宽度自动继承自PSDcanvas的设置。像素长宽比是方形像素，帧率设置为25，时长设置为10秒，其他默认都可以。然后单击确定。

构图设置也可以在这里找到:

然后开始我们的动漫之旅！唐不要忘记保存磁盘！

5.在A——的所有材料和合成都在这里。

此面板显示打开的合成中的层。注意，ps中划分的组是以组合的形式存在的。双击它进入开始组和第二组。

预览面板，你可以了解我们的小图图，甚至参考线可以导入。事实上，AE可以导入ps中的所有路径、图层样式、参考线和组，它真的是Adobe他的亲哥哥！

时间轴对于UI设计师来说可能是比较陌生的东西。唐别害怕，西西会带你参观的！

万事开头难。让让我们先制作最简单的动画。在这种情况下，它是一个时钟，所以让指针转一次。将时间轴上的指针移动到0秒，找到指针所在的图层(第)，点击小三角形，点击TransformRotation旁边的小秒表，这样我们就在0秒添加了一个关键帧，如图:

然后将指针移动到10秒，旋转值设置为360(会自动变成1x0)，也就是转了一圈。好了，按空格键玩，可以看到旋转的效果。

如何做出炫目的效果不是本教程的目的。让咱们搬家成功就翻过这一页~

再次提醒:一定要随时保存！

6.输出动画，生成GIF。

不管这部动画有多棒，它失去它是没有用的。AE虽然是专业的电影动画软件，但输出选项其实少得可怜(当然，它可以用自带的MediaEncoder输出更多格式，但这不在本教程讨论范围)。反正没有直接输出GIF的选项，只能曲线救国了。

方法一:输出视频到GIF。

确保我们的无题1构图被选中(边框变为黄)。

已选择和未选择

按快捷键Ctrl+M，合成将被添加到渲染队列中。

渲染是从动画生成动画文件的过程。让s做一些设置:点击无损的黄色字(不是小三)。

在弹出对话框的格式中选择Quicktime:

点按它旁边的“格式”选项，并选择视频编解码器。

选择PNG，质量选择100，这样输出几乎可以无损。

如果你能如果找不到Quicktime选项，请先安装Quicktim。

好，默认保留其他选项。单击“确定”两次，然后返回到渲染队列。单击输出为黄色小字母(不是小三)，并设置生成的文件路径和文件名。我我将保留默认值无标题1.mov这里，然后唐不要忘记点击渲染按钮。进度条运行完后，我们再回到熟悉的PS~

拖动无标题1.mov我们直接生成到PS中，你会看到一个额外的时间线。

其实PS可以简单的做视频，但是我我也不擅长。我当我有时间的时候，我会再研究它。好了，现在点击文件→另存为web格式:

最后，它这是最后一步。这里有许多优化选项，老实说，我还没有我没有彻底研究它们。左下角可以看到输出的大概大小(此图为381.)，右下角可以播放动画。注意这里有一个循环选项。记得改变一次致永远或者它只会停止一次。

右上方的这些参数是优化的重点。你可以自己调整一下，试试看有哪些参数可以调小而不失真。最后，点击另存为输出，而你我们完成了！

这种方法的优点是生成的文件少，直观，管理方便，中间生成的视频文件也可以作为展示素材。

方法2:输出图像序列(序列)

有时候因为某些原因，AE输出视频失败或者PS无法导入，可以试试图像序列。

在AE中，渲染设置时选择PNG序列。

然后输出路径指定一个文件夹存储输出的图像序列，这样点渲染后就会生成一组带有序列号的PNG文件。

然后打开PS。如果是PSCC以上，可以直接文件打开，然后在图像序列中选择一张图像，勾选图像序列选项。

那么帧率就是25。

以下步骤参考方法1即可。

如果你的PS是以前版本的CC，会有点繁琐，主要是导入序列帧比较麻烦。打开PS，文件脚本加载文件到堆栈

弹出面板选择浏览。

然后选择所有序列帧。

然后耐心等待图像加载到PS层(如果你有很多图像序列，加载时间会很)

单击创建帧动画。，时间轴就变成这样了(有时候加载图层后，你的时间轴直接如下图，所以你不不需要点击创建帧动画的步):

然后单击时间轴右上角的选项菜单，并选择从层创建帧:

就这样，动画终于被带进来了。可以先点击下面的播放按钮，看看播放顺序是否正确。

如果发现是反了(大多数情况下都是)，点击刚才的小菜单，选择反框纠正:

在弹出的面板中输入0.04，这是按照我们的动画设置每秒25帧来计算的(想想如果动画设置为每秒30帧或者其他值，这里要填多)，

确认后的步骤和之前一样。单击文件→另存为web格式:

如有任何问题或建议，欢迎讨论！

了解更多ae时钟旋转效果(ae如何制作时钟旋转指)相关内容请关注东辰网。