Timeline Advanced Mode Overview - Google Web Designer
-
0:03 - 0:05大家好
我是 Natalie -
0:05 - 0:08在 Google Web Designer 團隊擔任工程師
-
0:08 - 0:10這次我要示範
-
0:10 - 0:13如何使用進階模式時間軸來建立動畫
-
0:15 - 0:18根據預設，時間軸面板會顯示在工作區底部
-
0:18 - 0:20我們有兩種時間軸工具
這是其中一種 -
0:20 - 0:22還有一種快速模式時間軸
-
0:22 - 0:25很多檔案開啟後
預設會顯示快速模式 -
0:25 - 0:26只要按下右上角的這個按鈕
-
0:26 - 0:28就可以切換不同模式
-
0:28 - 0:29就像這樣，這是快速模式
-
0:29 - 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:00將圖片拖曳到中心區域
-
1:02 - 1:05放在動畫一開始應該出現的位置
-
1:05 - 1:06大概是這裡
-
1:06 - 1:08我們之後會讓圖片像這樣滑過去
-
1:11 - 1:14你看，時間軸上出現了一段小小的軌道
-
1:14 - 1:15這是一個時間軸層次
-
1:15 - 1:18我們將用這裡的 UI
-
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 - 1:59將圖片完全滑出畫面
-
2:01 - 2:03現在只要拖曳播放頭
就可以來回查看整個過程 -
2:03 - 2:06預覽動畫的效果
-
2:06 - 2:09你也可以按下左邊角落的 [播放] 按鈕
-
2:09 - 2:12在中心區域播放預覽動畫
-
2:14 - 2:16看起來沒有問題
-
2:16 - 2:17接下來
-
2:17 - 2:18我們可以在成品中看到
-
2:18 - 2:21圖片一開始是先淡出
-
2:21 - 2:23然後才滑過去
-
2:23 - 2:26所以接著要做的
就是淡出的動畫 -
2:29 - 2:32首先使用點線框工具
選取所有主要畫面格 -
2:32 - 2:35將它們滑過去一些
好在開頭建立淡入動畫 -
2:36 - 2:38在 0 秒的位置
插入新的主要畫面格 -
2:38 - 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:43所以先要把文字方塊
一開始的透明度設為 0 -
3:43 - 3:44因為這樣是起始狀態
-
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: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:32 - 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: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如你所見，每組主要畫面格之間
都顯示了 Linear 的字詞 -
5:53 - 5:56這是一個 CSS 加/減速函式
-
5:56 - 5:57它的作用是計算
-
5:57 - 5:59每組主要畫面格的中間值
-
5:59 - 6:03Linear 代表值是以等速方式改變
-
6:04 - 6:05我們還有其他選項
-
6:05 - 6:07只要按一下右鍵就能看到
-
6:07 - 6:10可以用 CSS 規格指定的
所有標準加減速函式 -
6:11 - 6:14也就是說，針對圖片在 1.5 秒開始滑動的動畫
-
6:14 - 6:17我們可以採用不同的轉換方式
-
6:17 - 6:20選擇不同的加/減速函式
可以創造不錯的效果 -
6:20 - 6:22像是 ease-in-out
就是在一開始微微加速動作 -
6:22 - 6:24要停止時再減速
-
6:24 - 6:27這樣可以更貼近現實中的運動
-
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就可以自訂這條貝茲曲線
-
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感謝收看
|
Amara Bot edited Chinese, Traditional subtitles for Timeline Advanced Mode Overview - Google Web Designer |