即时设计基础教程！NO.11 交互（二）交互动画

本集讲师：@YY

免费使用即时设计，请点击右侧链接👉 即时设计

获取海量免费设计资源，请访问👉 资源广场

获取本集课程课件及演示案例源文件，请访问👉 教程文件

什么是即时设计

即时设计是一款全平台覆盖、可云端编辑的专业级 UI 设计工具，为中国设计师量身打造，是 Windows 也能用的「协作版 Sketch」，它设计功能强大，能一站完成设计师所有需求。无论是多位设计师协同创作，还是产品经理随时随地评审、沟通反馈，或是研发人员查看实时更新的设计稿获取切图标注，都可得到满足。

不受系统限制，打开浏览器即可开始创作，同时让设计师在工作中每一个步骤都能拥有更高效愉悦的体验。即时设计支持导入 Figma、Sketch、XD 等文件，无缝衔接以往工作内容；还可导出 Sketch 文件满足跨工具协作，并且所有功能都能免费使用。

本集简概

本集是即时设计系列基础教程第 11 集，本集讲师 YY 继续为大家介绍一些原型功能，包括交互动画和溢出滚动的设置等内容。

编者按：图文内容简概为视频内容的提炼总结，想要了解详细教程内容，请观看文章顶部完整的视频教程。

1、过渡动画

首先我们来看看 淡入淡出 效果，有线性、缓入缓出、缓动等，或者点击自定义设置，可以自由设定动画曲线。右边有动画时长的输入框，单位是毫秒。

下方有预览效果框，如果不确定实际效果如何，可以先在这边进行预览。

弹入效果 可以选择上下左右四个方向，选好后同样可以修改一下曲线形式和动画时长。

弹出、推入、滑入滑出同理，大家可以自己尝试一下，看看更喜欢哪一种动画效果。

2、智能动画

与普通的动画相比，智能动画可以帮我们自动补全所有中间帧，让动效更丝滑和丰富。

添加智能动画之前，要注意给初始状态和结束状态的元素一个相同的命名，系统才能正确识别并补帧。

3、溢出滚动

我们工作中的设计稿，经常会需要显示超过一屏的内容，这时候就可以开启溢出滚动，演示时就能展示出更多的滚动内容，使设计图更逼真。

第 11 课关于 交互动画 的介绍就到这里，下节课我们将为你介绍一些 即时设计的综合使用技巧 ，敬请期待～