返回

从零开始学Figma

#UI设计通识
89%
进度
0/4
知识点
0
笔记
概述
Figma的基础认识
Figma的初识和学习准备
Figma的注册和安装
Figma的会员说明和教育版使用
Figma的主要界面认识
Figma的基本操作
Figma的工具栏
Figma的属性设置
Figma的图层和编组类型
Figma的字体设置详解
Figma的图片设置介绍
Figma的蒙版设置
资源社区和组件库使用
开始使用Figma设计界面
Figma的矢量应用
关于矢量和位图认识
矢量中的钢笔工具
矢量中的布尔运算
使用Figma绘制图标
Figma的布局功能
约束响应式功能的使用
Figma自动布局基本认识
自动布局中的自适应逻辑
并列布局的自适应类型
自动布局的相互嵌套
Figma中的格线系统
Figma的样式与组件
Figma的图层样式管理
Figma的组件功能入门
Figma的组件变体入门
Figma的变体功能进阶
Figma组件的管理方式
Figma中的变量定义
Figma的交互功能
Figma的交互基础认识
Figma的页面滚动设置
Figma的页面基础跳转
Figma的智能动画应用
Figma的弹窗效果
Figma交互中的变量和条件
Figma 的插件部件
Figma的插件认识
Figma中的小部件
首页知识库UI设计通识从零开始学Figma

Figma的智能动画应用

酸梅干超人 编辑于 2025-04-013人正在学
00

动画效果中的Smart Animate 是用于实现复杂动效的功能,它可以让两个具有相同图层的画板 Frame跳转实现关键帧补间效果。

使用该功能需要先理解关键帧的补间效果,在一段动画中具有开始帧和结束帧,两个帧内包含的元素相同。设置补间动画以后,系统会自动生成从开始帧到结束帧的中间过度帧,实现一个完整的动画效果

比如下面这些案例:

在Figma中使用 Smart Animate,需要满足以下条件:

  • 要创建交互的起始画板和结束画板并添加连线
  • 两个画板中类型、名称完全相同的图层才能实现补间效果
  • 相同图层之间需要有属性的差异,才有形成动画的基础

实现 Smart Animate实现的动画效果

在 Figma中并不是所有属性都能实现补间效果,如渐变、投影、模糊等特殊属性无法生效,所以在设计过程中发现某些想要的属性补间无法实现,就要想额外的方法替代。

Smart Animate实现的逻辑很简单,但有个非常容易搞混的地方。如果要实现页面跳转的动画效果,结束画板的显示内容和起始画板完全不同的话,那么添加连线前就要:

  • 要复制所有结束画板的图层进起始画板,并设置好初始隐藏的状态
  • 要复制所有起始画板的图层进结束画板,并设置好结束隐藏的状态

简单来说,就是关键帧动画的起始和结束画板都要包含整个效果中出现的所有图层,如果有图层仅在一个画板中存在,那么它就会自动使用渐隐渐现 Dissolve,而没有补间效果。

所以对于实现Smart Animate的画板来说,要额外复制很多静态展示中不需要的图层进来,会扰乱实际的源文件设置。所以建议要额外复制需要实现Smart Animate效果的画板进行操作,而不要在源文件中进行。

点赞
收藏
学会
304003
下一篇: Figma的弹窗效果
针对UI中出现频率极高的弹窗,Figma提供了 overlay 系列的动作,包括: 首先理解 Open overlay弹窗,它的实现逻辑是将目标画板的内容,覆盖到当前的画板中。 该功能对目标画板的尺寸没有限制,想用什么弹窗尺寸都可以,我们可以在交互设置中对该弹窗的显示做出进一步的设置。 首先 Pos...
笔记 (0)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞