Responsive Layout: Animation - Google Web DesignerYouTube↗  IA↗(long shot)
Science & Technology  27.6K views 82 likes 10 dislikes   03 May 2016
Google Web Designer 76.8K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
LUCAS: ผมชื่อ Lucas เป็นวิศวกรที่ดูแล
大家好！我叫Lucas 是一名Google Web Designer工程师
Google Web Designer
ในวิดีโอนี้ เราจะพูดต่อจากวิดีโอที่แล้ว
在本视频中，我们将接着之前的视频
เรื่องการสร้างเอกสาร ที่ปรับเปลี่ยนตามอุปกรณ์โดยใช้กฎสื่อ
介绍如何使用媒体规则制作自适应文档
วิดีโอนี้จะแสดงวิธีรวม ภาพเคลื่อนไหวและกฎสื่อ
本视频将展示如何结合使用动画和媒体规则
เราจะเริ่มจากเอกสารง่ายๆ
我们先从一个简单的文档入手
ที่มีเค้าโครงแนวตั้งเมื่อวิวพอร์ตแคบ
该文档在视口较窄时以纵向布局呈现
และเค้าโครงแนวนอน สำหรับวิวพอร์ตที่กว้างขึ้น
在视口较宽时以横向布局呈现
ผมจะขยายเอกสารนี้
现在我要拉大该文档
เพื่อให้เค้าโครงแนวนอน
这样，当其以横向布局呈现
มีความสูงพอ
并且高度也足够时
ที่จะวางรูปภาพได้ 2 ภาพ แทนที่จะวางแค่ภาพเดียว
该文档并非只显示一张图片，而是两张
โดยตอนแรกจะซ้อนกันอยู่ แล้วแยกออกด้วยภาพเคลื่อนไหว
这两张图片起初是重叠在一起的 然后会通过一段动画隔开
เนื่องจาก Web Designer ใช้คีย์เฟรม CSS3
由于Web Designer
ในการแทนภาพเคลื่อนไหว
使用CSS3关键帧来表示动画
คุณจึงเข้ารหัสด้วยกฎสื่อได้
因此这可以使用媒体规则来编写代码
ก่อนอื่น ผมจะสลับไปที่เนื้อหาหลัก
首先，切换到主内容
จากนั้นคัดลอกและวางรูปนี้
复制并粘贴这张图片
ที่นี้ ผมจะชี้ไปยังเนื้อหาอื่น บนรูปใหม่
然后，在新图片上 我会指向另一个素材资源
ด้วยการเปลี่ยนเส้นทางของเนื้อหาโดยตรง
直接更改素材资源的路径即可
แล้วซ่อนไว้โดยค่าเริ่มต้นด้วย
我再将该素材资源设为默认隐藏
ผมจะกลับไปที่กฎสื่อ
现在，我切换回媒体规则
และเพิ่มเบรกพอยท์ความสูง
并在高度上添加断点
คุณจะเห็นว่าเรากำลังปรับ ช่วงความสูงที่กว้างขึ้น
可以看出，我们编辑的高度范围变大了
ต่อไปผมจะเพิ่มคีย์เฟรม
接下来，我要为这两张图片
กับภาพทั้งสอง
各添加一个关键帧
ย้ายรูปในแนวตั้ง ด้วยเครื่องมือเปลี่ยนตำแหน่ง
我将使用平移工具垂直移动图片
แบบนี้
就像这样
และสุดท้ายนี้ ผมจะตั้งค่าการเปิดเผยของรูปที่ 2
最后，我将设置第二张图片的可见性
เพื่อให้เห็นรูปอีกครั้ง
也就是说，再次将其设为可见
ผมจะลากเพื่อดูตัวอย่างภาพเคลื่อนไหว
现在，我可以拖移时间轴来预览动画
ภาพเคลื่อนไหวนี้ ปรับเปลี่ยนได้ตามอุปกรณ์
该动画的自适应性体现在
คือรูปทั้งสองจะตรึงอยู่จุดเดิม
即使视口尺寸发生变化
แม้ว่าจะปรับขนาดวิวพอร์ตก็ตาม
这两张图片也仍然一起保持居中显示
แต่ถ้าออกจากกฎสื่อนี้ ไปยังกฎสื่ออื่น
不过，如果我从该媒体规则移到任何其他媒体规则
ภาพเคลื่อนไหวก็จะหายไป
动画则会消失
ซึ่งเห็นได้ในเส้นควบคุมเวลา
您也可以通过时间轴看出这一点
ว่าทุกแทร็กว่างหมด ยกเว้นว่าผมจะอยู่ใน
除非我位于右下方的媒体规则中
กฎสื่อด้านขวาล่าง
否则所有轨迹都是空白的
สมมติว่าผมอยากได้ ภาพเคลื่อนไหวเริ่มต้น
假设我想制作一个默认动画
ที่รูปนี้ค่อยๆ ปรากฏขึ้นจาก ความโปร่งแสง 0 เป็น 1
让这张图片由不透明度“0”向不透明度“1”淡入
ผมก็จะต้องแทรกคีย์เฟรม
那么，在主规则中
ในกฎหลัก
我需要插入一个关键帧
ผมจะตั้งความโปร่งแสงพื้นฐานเป็น 0
我要将底层不透明度设为“0”
และตั้งค่าความโปร่งแสงเป็น 1 ที่คีย์เฟรม
在关键帧处，我要将不透明度设为“1”
เราจะเห็นรูปภาพค่อยๆ ปรากฏขึ้น ในเนื้อหาหลัก
这样在主内容中 我们就可以看到图片呈现淡入效果
พอเปลี่ยนกลับไปเป็นกฎสื่อ
如果我们切换回媒体规则
คุณจะเห็นว่าในกฎสื่อแต่ละรายการ
则可以看到，在各个媒体规则中
ก็มีภาพเคลื่อนไหว แบบค่อยๆ ปรากฏเช่นกัน
图片都会呈现相同的淡入淡出动画效果
นี่รูปที่ 1
这是第一个媒体规则
รูปที่ 2
这是第二个
แล้วก็รูปที่ 3
这是第三个
ข้อยกเว้นเดียวคือกฎสื่อด้านขวาล่าง
唯一不会呈现动画效果的 是位于右下方的媒体规则
ที่ผมต้องกำหนด ภาพเคลื่อนไหวที่มาลบล้าง
我在该媒体规则中定义了覆盖动画
จุดเดียวที่เราต้องแก้ไข
而我们唯一需要更正的就是
คือเราต้อง ระบุความโปร่งแสงของรูปแรกใหม่
将第一张图片的底层不透明度
ให้เป็น 0
由之前重新指定的“0”
ผมจะเปลี่ยนกลับเป็น 1
更改回“1”
แค่นี้ภาพเคลื่อนไหว ก็กลับมาเป็นเหมือนเดิมแล้ว
现在我们可以看到动画已经恢复
คุณจะรู้ได้ตลอด ว่ามีภาพเคลื่อนไหว
您始终都能判断
ที่ลบล้างกฎสื่อหรือไม่
自己是否有覆盖了媒体规则的动画
เพราะโปรแกรมจะไฮไลต์ ป้ายกำกับในเส้นควบคุมเวลา
因为这类动画的标签在时间轴中会突出显示
และถ้าคุณคลิกป้ายกำกับ
点击该标签后，系统会显示一个弹出式窗口
ก็จะเห็นป๊อปอัป ซึ่งใช้ลบภาพเคลื่อนไหวที่มาลบล้างออกได้
您可以通过该窗口移除覆盖动画
เพียงใช้ภาพเคลื่อนไหวพื้นฐาน ถ้ามีอยู่แล้ว
而仅使用底层动画（如果有的话）
ทั้งหมดนี้คือการรวมภาพเคลื่อนไหว
以上就是关于如何结合使用
กับกฎสื่อ
动画和媒体规则的介绍
ขอขอบคุณที่รับชมครับ
谢谢观看！
Similar videos:

Responsive Layout: Overview - Google Web Designer
Google Web Designer
106.5K views 444 likes 8 dislikes 03 May 201674% match


Easing functions (Step start/end) - Google Web Designer
Google Web Designer
25.5K views 43 likes 5 dislikes 16 Nov 201667% match


Responsive Layout: Advanced Techniques - Google Web Designer
Google Web Designer
54.7K views 200 likes 4 dislikes 03 May 201667% match


Google Web Designer - Animation Updates
Google Web Designer
53.6K views 136 likes 9 dislikes 17 Nov 201558% match


Responsive Ad Workflow - Google Web Designer
Google Web Designer
21.8K views 208 likes 5 dislikes 24 Aug 201857% match


Responsive Overview - Google Web Designer
Google Web Designer
7.2K views 126 likes 2 dislikes 31 Aug 202057% match

Ad Validator - Google Web Designer
Google Web Designer
4.8K views 16 likes 1 dislikes 07 Sep 201843% match


Google Web Designer - Text Overview
Google Web Designer
13.1K views 25 likes 9 dislikes 17 Nov 201543% match

An Overview of the updated Google Web Designer
Google Web Designer
89.8K views 346 likes 14 dislikes 04 Aug 201443% match


A Google Web Designer Thought Experiment
Google Web Designer
330.9K views 345 likes 20 dislikes 04 Aug 201443% match


Text Fitting - Google Web Designer
Google Web Designer
8.2K views 33 likes 6 dislikes 28 Nov 201842% match

Outliner - Google Web Designer
Google Web Designer
4.1K views 15 likes 6 dislikes 18 Jun 201841% match


Responsive Campaign Tutorial - Google Web Designer
Google Web Designer
3.1K views 84 likes 0 dislikes 15 Oct 202040% match

UI Overview - Google Web Designer
Google Web Designer
4.5K views 35 likes 1 dislikes 20 Aug 201839% match


Google Web Designer - Spritesheet Component Overview
Google Web Designer
18.6K views 52 likes 4 dislikes 17 Nov 201539% match


Google Web Designer - Streetview Component Overview
Google Web Designer
7.3K views 24 likes 0 dislikes 17 Nov 201539% match


Advanced Preview Configuration - Google Web Designer
Google Web Designer
14.3K views 68 likes 3 dislikes 28 Nov 201837% match

Code View - Google Web Designer
Google Web Designer
7.2K views 55 likes 4 dislikes 14 Oct 201936% match

Multiple keyframe & thumbnail selection - Google Web Designer
Google Web Designer
5.6K views 11 likes 2 dislikes 16 Nov 201635% match


Dynamic in Studio - Google Web Designer
Google Web Designer
10.5K views 54 likes 1 dislikes 31 Aug 201835% match


Focal point for responsive images - Google Web Designer
Google Web Designer
5.7K views 68 likes 2 dislikes 29 Jul 201935% match


Timeline Advanced Mode Overview - Google Web Designer
Google Web Designer
12.2K views 93 likes 3 dislikes 18 Jun 201834% match


Hiding and Locking Timeline Layers - Google Web Designer
Google Web Designer
5K views 10 likes 6 dislikes 16 Nov 201633% match


Parallax Overview - Google Web Designer
Google Web Designer
31.9K views 285 likes 6 dislikes 28 Nov 201832% match


Text Overview - Google Web Designer
Google Web Designer
7.1K views 18 likes 3 dislikes 03 Jan 201829% match


Publish to Display & Video 360 - Google Web Designer
Google Web Designer
7.1K views 19 likes 3 dislikes 28 Nov 201829% match

Groups Overview - Google Web Designer
Google Web Designer
2.6K views 11 likes 2 dislikes 03 Jan 201829% match


Timeline Enhancements - Google Web Designer
Google Web Designer
13.2K views 68 likes 3 dislikes 21 Jun 201729% match


Google Web Designer Certification - 1. Basics
Google Web Designer
7.2K views 10 likes 0 dislikes 29 Jun 201529% match


Outliner Overview - Google Web Designer
Google Web Designer
6K views 47 likes 1 dislikes 31 Mar 202029% match


Settings Privacy About Contact Donate