你将构建： 一个页面：首屏在加载时动画入场，卡片在滚动时依次显现，按钮在悬停时放大，并且全部在时间轴中调好
在本教程中，你将用预设为页面添加动画，然后在交互时间轴中塑造动效：移动和拉伸步骤、拖动查看并回放。你需要一个页面，包含首屏（一个标题和一个副标题）、一个按钮和一个卡片集合列表。交互在预览和已发布的站点上运行；在设计模式下，元素保持最终状态，方便你继续编辑。
首屏加载动画
打开 Interactions 标签页
选中标题。在检查器中打开 Interactions 标签页。它会列出以选中图层为目标的交互。
添加加载预设
点击 Add，选择 Fade in on load。会出现一个新交互，触发器为 Page load，带有一个让标题淡入的步骤。
同时加上滑动
点击该交互将其展开。在步骤中，From 行保存起始值。点击 +（Add from property）添加一行，把属性设为
y，值设为40。现在标题在淡入的同时上移 40 px。预览
点击交互上的播放图标（Preview）在画布上播放它，或按 ⌘↵ 预览整个页面。再按一次 ⌘↵ 回到编辑状态。
滚动时显现卡片
选中一张卡片
选中集合列表中的卡片。列表会为每个条目重复一次这张卡片，所以给它添加的动画会作用于每一张卡片。
添加滚动预设
在 Interactions 中点击 Add，选择 Slide up on scroll。触发器为 Scroll into view，Start 为
top 80%：当触发元素的顶部到达窗口高度的 80% 时，动画开始。以列表为触发对象
把 On 设为集合列表。这样只要列表滚入视野，整组动画就会开始。
让卡片交错出现
在步骤的 Stagger 行中，保留 Each，把 S 设为
0.1。现在每张卡片都比前一张晚 0.1 秒开始。把 From 设为 Center，则从中间的卡片开始。
添加悬停效果
添加预设
选中按钮，点击 Add，选择 Hover scale。触发器为 Hover，On 是按钮本身：指针移入时它放大到
scale1.05，移出时恢复原状。选择在哪里运行
在 Runs on 下取消勾选 Phone。手机没有可以悬停的指针，所以这个效果只在 Desktop 和 Tablet 上运行。
Interactions 标签页显示此页面上的三个交互。在预览中，标题淡入上移，滚动时卡片依次滑入，悬停时按钮放大。
在时间轴中微调
打开时间轴
选中标题，点击其交互上的图表图标（Open in timeline）。时间轴会在画布下方打开。你也可以按 ⌥T 或点击工具栏中的 Timeline 按钮。在左上角的菜单中可以选择其他交互；旁边的徽标显示触发器。
认识面板
Layers 列显示每个步骤所动画的图层。标尺以秒为单位，每个步骤是一根从开始到结束的条块。拖动面板的上边缘可以把它拉高。
加入副标题
在画布上选中副标题，然后点击时间轴标题栏中的 +（Add step）。一根新的条块会在标题之后让副标题淡入。
移动和调整条块
把副标题的条块向左拖，让它在标题还在移动时就开始。拖动它的右边缘让它更长。条块会吸附到 0、播放头和其他条块的边缘；拖动时按住 ⌥ 可关闭吸附。
拖动查看和播放
在标尺上拖动来移动播放头：画布会显示该时刻的动画。点击播放控件中的播放按钮观看，点击 Loop 循环播放，点击速度按钮在 0.25x、0.5x、1x 和 2x 之间切换。
设置缓动
点击一根条块使其成为当前步骤，然后在标题栏中选择缓动，例如
power3.out。Duplicate step 和 Delete step 就在旁边。
时间轴显示两根重叠的条块：先是标题，然后副标题在标题结束前稍早开始。在标尺上拖动时，两者都会在画布上移动。
用键盘编辑
微调条块
点击一根条块使其获得焦点。 ← 和 → 每次移动 0.01 秒；按住 ⇧ 则每次移动 0.1 秒。按住 ⌥ 再按方向键，则改为调整它的长度。
调整步骤顺序
⌥↑ 和 ⌥↓ 在列表中上移或下移步骤。 ⌘D 复制步骤， ⌦ 删除步骤。 ↵ 在画布上选中它的图层。
使用步骤菜单
右键点击条块可使用同样的操作：Select layer、Duplicate step、Move up、Move down 和 Delete step。
用按键移动播放头
点击标尺，然后用方向键逐步移动播放头，用 Home 或 End 跳到开头或结尾。
测试悬停和滚动
播放悬停动画
在时间轴菜单中选择悬停交互。播放控件会多出 Hover in（正向播放）和 Hover out（从播放头反向播放），与指针离开时站点上的表现一致。
检查滚动显现
选择滚动交互。卡片的条块带有一段交错尾巴，长度与列表中的卡片数量相符。拖动查看卡片逐一出现。
关闭时间轴
按 ⌥T 或点击标题栏中的关闭按钮。然后按 ⌘↵ 预览页面，看看所有动画在真实触发器下运行。
页面在加载时动画入场，滚动时依次显现卡片，并对悬停做出反应，节奏由你在时间轴中亲手调整。
你学到了什么
- 预设一键为你提供可用的加载、滚动或悬停交互；触发器和步骤仍然可以编辑。
- 在重复的图层上使用交错，可以让集合列表的每个条目依次动画。
- 时间轴把步骤显示为条块，你可以拖动、拖动查看、播放，并用键盘编辑。
继续学习后面的教程，或阅读本教程背后的指南：