< Return to Video

Timeline Advanced Mode Overview - Google Web Designer

  • 0:03 - 0:04
    大家好
  • 0:04 - 0:06
    我叫Natalie
    是负责开发Google Web Designer的
  • 0:06 - 0:08
    一名工程师
  • 0:08 - 0:09
    在本视频中
  • 0:09 - 0:11
    我将演示如何使用“高级”模式时间轴
  • 0:11 - 0:14
    来制作动画
  • 0:14 - 0:17
    默认情况下，时间轴面板
    会显示在工作区底部
  • 0:17 - 0:20
    我们有两种时间轴工具
    这是其中一种
  • 0:20 - 0:22
    还有一种是“快速”模式时间轴
  • 0:22 - 0:25
    很多文件打开后
    默认会处于“快速”模式
  • 0:25 - 0:27
    只要按下右上角的这个按钮
  • 0:27 - 0:28
    就可以在不同模式之间切换
  • 0:28 - 0:31
    就像这样，这是“快速”模式
    这是“高级”模式
  • 0:31 - 0:33
    我们会在另一个教程中介绍“快速”模式
  • 0:33 - 0:36
    今天我们主要介绍的是“高级”模式
  • 0:36 - 0:38
    这个模式更为复杂
  • 0:38 - 0:40
    功能也更为完善
  • 0:40 - 0:44
    出于示范的目的
    我准备了这个简短的动画广告
  • 0:44 - 0:46
    先是图片滑动出现
    接着两个文字方框
  • 0:46 - 0:50
    会淡入再淡出
    最后再出现徽标
  • 0:50 - 0:52
    在本视频中
    我们将逐步说明
  • 0:52 - 0:55
    如何在Google Web Designer中制作此广告
  • 0:55 - 0:57
    首先来处理滑动图片构成的动画
  • 0:57 - 1:01
    先将图片拖到场景上
  • 1:01 - 1:03
    放在动画
  • 1:03 - 1:05
    开始时它应该出现的位置
  • 1:05 - 1:06
    大概是这里
  • 1:06 - 1:07
    稍后我们要让图片像这样滑过去
  • 1:11 - 1:14
    可以看到时间轴上出现了一段小小的轨道
  • 1:14 - 1:15
    这是一个时间轴图层
  • 1:15 - 1:18
    我们将使用这里的界面
  • 1:18 - 1:21
    设置此对象的完整动画
  • 1:21 - 1:22
    制作动画的基本概念是
  • 1:22 - 1:24
    先定义关键帧
  • 1:24 - 1:27
    也就是为元素指定的属性值对应的时间点
  • 1:27 - 1:30
    接着定义这些值之间的转换方式
  • 1:30 - 1:32
    以及转换所用的时间
  • 1:32 - 1:36
    要让这张图片滑动
    我们会用到多个关键帧
  • 1:36 - 1:38
    我想让这张图片停住大概一秒时间
  • 1:38 - 1:40
    于是，先将关键帧放在一秒的位置
  • 1:40 - 1:44
    具体方法是点击右键
    选择“插入关键帧”
  • 1:44 - 1:45
    接着在1.5秒的位置
    再插入一个关键帧
  • 1:45 - 1:47
    这个关键帧的意义在于
  • 1:47 - 1:49
    我要让图片在这个时间点
  • 1:49 - 1:52
    滑到预定的位置
  • 1:52 - 1:54
    然后，我要让图片保持不动一秒钟
  • 1:54 - 1:57
    最后再用半秒钟时间
  • 1:57 - 2:01
    将图片完全滑出画面
  • 2:01 - 2:03
    现在只要拖动进度条指针
    就可以来回查看整个过程
  • 2:03 - 2:06
    预览动画的效果
  • 2:07 - 2:08
    你也可以按左角的“播放”按钮
  • 2:09 - 2:12
    在场景上播放预览动画
  • 2:14 - 2:16
    看起来没有问题
  • 2:16 - 2:17
    接下来
  • 2:17 - 2:20
    我们可以在完成的动画中看到
  • 2:20 - 2:22
    图片一开始是先淡入
  • 2:22 - 2:23
    然后才滑过去
  • 2:23 - 2:26
    所以接着要做的
    就是淡入的动画
  • 2:29 - 2:32
    首先使用“选取框”工具
    选取所有关键帧
  • 2:32 - 2:33
    将它们滑过去一些
  • 2:33 - 2:36
    以便在最后制作淡入动画
  • 2:36 - 2:38
    在0秒的位置
    插入新的关键帧
  • 2:38 - 2:43
    对于这个关键帧
    我们要把元素的不透明度
  • 2:43 - 2:44
    设为0
  • 2:49 - 2:53
    至于其余的关键帧
    不透明度则要设为100%
  • 3:02 - 3:03
    接下来，我们要加入文字
  • 3:03 - 3:07
    刚刚的广告有两个文字方框
  • 3:07 - 3:12
    它们随着图片的滑动
    先后淡入再淡出
  • 3:12 - 3:14
    我们先来制作第一个文字方框
  • 3:32 - 3:34
    这个文字方框要先淡入
  • 3:34 - 3:38
    在这段时间留在原位
  • 3:38 - 3:40
    然后随图片的滑动
    而淡出
  • 3:40 - 3:41
    所以先要把文字方框
    一开始的不透明度设为0
  • 3:41 - 3:46
    因为这样是起始状态
  • 3:46 - 3:50
    然后在0.5秒处
    制作一个关键帧
  • 3:50 - 3:52
    将不透明度设为100%
  • 3:52 - 3:55
    在1.5秒处
    不透明度仍然是100%
  • 3:55 - 3:58
    在2秒处
    则要将不透明度再次变成0
  • 3:58 - 4:00
    所以我们只要插入一个关键帧
  • 4:00 - 4:02
    然后重复刚才的操作就行了
  • 4:02 - 4:04
    你也可以利用复制关键帧的功能
  • 4:05 - 4:09
    只要按住Alt键
    即可复制关键帧
  • 4:09 - 4:10
    并拖到其他时间点
  • 4:10 - 4:14
    这可以节省处理一些动画的时间
  • 4:14 - 4:18
    最后再新增一个关键帧
    让文字方框完全
  • 4:18 - 4:19
    淡出
  • 4:19 - 4:20
    现在可以预览一下
  • 4:24 - 4:24
    完美
  • 4:24 - 4:25
    好了
  • 4:25 - 4:28
    第二个文字方框和第一个大同小异
  • 4:28 - 4:30
    只有文字不一样
  • 4:30 - 4:32
    它会在第一个文字方块淡出后出现
  • 4:33 - 4:35
    为了节省时间
  • 4:35 - 4:37
    我决定复制这整个图层和动画
  • 4:37 - 4:38
    为此，先在上面点击右键
  • 4:38 - 4:40
    然后选择“复制图层”
  • 4:42 - 4:46
    接着，我要再次使用“选取框”工具
  • 4:46 - 4:48
    选择所有关键帧
  • 4:48 - 4:50
    将它们移到动画需要的位置
  • 4:52 - 4:54
    然后调整这些关键帧
  • 4:54 - 4:56
    在第一个文字方框淡出时
    让第二个文字方框淡入
  • 4:56 - 4:58
    避免它们混在一起
  • 4:58 - 5:00
    每当遇到两个关键帧
    距离很近的情况
  • 5:00 - 5:03
    都可以使用缩放滑块
  • 5:03 - 5:05
    以更清晰的视图查看动画
  • 5:12 - 5:15
    接着还要更新文字
  • 5:15 - 5:17
    现在可以看到
    两个文字方框
  • 5:17 - 5:18
    是重叠在一起的
  • 5:18 - 5:20
    那么我点击这里的时候
    可能会不小心修改
  • 5:20 - 5:22
    上层的文字方框
  • 5:22 - 5:22
    我先把它固定住
  • 5:22 - 5:24
    以免不小心碰到
  • 5:25 - 5:27
    这样就能修改
    下层的文字方框了
  • 5:44 - 5:46
    这样动画就大致完成了
  • 5:46 - 5:47
    我们仔细来看看
  • 5:47 - 5:50
    每组关键帧转换的过程
  • 5:50 - 5:53
    大家可以看到，每组关键帧之间
    都显示了“线性”字样
  • 5:53 - 5:56
    这是一个CSS加/减速函数
  • 5:56 - 5:58
    它的作用是计算
  • 5:58 - 5:59
    每组关键帧的中间值
  • 5:59 - 6:02
    “线性”代表值是以等速方式改变
  • 6:03 - 6:04
    我们还有其他选项
  • 6:04 - 6:06
    只要点击右键就能看到
  • 6:06 - 6:09
    可以用CSS规范指定的
  • 6:09 - 6:10
    所有标准加/减速函数
  • 6:11 - 6:14
    也就是说
    针对图片在1.5秒开始滑动的动画
  • 6:14 - 6:17
    我们可以采用不同的转换方式
  • 6:17 - 6:19
    选择不同的加/减速函数
    打造不错的效果
  • 6:19 - 6:22
    比如先加速后减速
    就是在一开始微微加速动作
  • 6:22 - 6:24
    要停止时再减速
  • 6:24 - 6:26
    这样可以更贴近
  • 6:26 - 6:28
    现实中的运动
  • 6:30 - 6:32
    我想把预览范围限制在这个区间
  • 6:32 - 6:38
    因此需要将这两个黄色手柄拖到
    转换动画的时段
  • 6:38 - 6:42
    然后设置循环预览
  • 6:42 - 6:44
    就能反复预览这段动画
  • 6:44 - 6:46
    看看有没有不顺
  • 6:47 - 6:48
    看起来没有问题
  • 6:48 - 6:50
    我们还可以做一件事
  • 6:50 - 6:52
    就是不使用预先定义的函数
  • 6:52 - 6:53
    而是自己创建函数
  • 6:53 - 6:55
    只要点击右键
    然后选择“加/减速选项…”
  • 6:55 - 6:57
    就可以自定义这条Bezier曲线
  • 6:57 - 7:01
    调整成需要的效果后
    再保存为自定义预设值
  • 7:04 - 7:06
    然后点击“确定”进行应用
  • 7:09 - 7:11
    本教程到这里就结束了
  • 7:11 - 7:13
    如果感兴趣
    还可以再观看其他教程
  • 7:13 - 7:16
    进一步探索其他动画相关主题
  • 7:16 - 7:17
    本视频到此结束
  • 7:17 - 7:18
    谢谢观看
Title:
Timeline Advanced Mode Overview - Google Web Designer
Description:
more » « less
Duration:
07:20

Chinese, Simplified subtitles

Revisions

Our website uses cookies for analysis purposes.