欢迎访问自学路径

您尚未登录

登录后即可免费访问自学内容

点击登录

即时设计基础教程!NO.11 交互(二)交互动画

时间:2022-05-20
B站视频:av939181177
类别:UI设计
水平:入门
观众:10.0k
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

即时设计基础教程!NO.11 交互(二)交互动画

本集讲师:@YY

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

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

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

什么是即时设计

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

即时设计基础教程!NO.11 交互(二)交互动画

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

本集简概

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

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

1、过渡动画

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

即时设计基础教程!NO.11 交互(二)交互动画

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

即时设计基础教程!NO.11 交互(二)交互动画

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

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

即时设计基础教程!NO.11 交互(二)交互动画

2、智能动画

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

即时设计基础教程!NO.11 交互(二)交互动画 即时设计基础教程!NO.11 交互(二)交互动画

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

即时设计基础教程!NO.11 交互(二)交互动画

3、溢出滚动

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

即时设计基础教程!NO.11 交互(二)交互动画 即时设计基础教程!NO.11 交互(二)交互动画

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

收藏 2

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 1

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了
/

支持键盘 ← → 键翻阅图片