粉丝498获赞4863
相关视频
01:27查看AI文稿AI文稿像是这种或者这种的数字动画效果可以很好的解决静态展示用户无法理解功能点的问题，那么本期就教大家如何制作这种数字动画效果。针对时间模块加入微动画，可以使用户很清晰的感觉到时光流逝， 数字模组也是同理，首次进入可以增加滚动动画，让用户感觉到数值的增长或者减少。这种动画制作起来原理很简单，其实就是把需要滚动的数字竖向排列开，然后通过蒙版进行裁切， 在另一个画板中进行变化。两个画板的内容都做好以后，我们就可以通过圆形工具进行连接了。圆形工具部分呢，我们可以选择点击或者 hold 作为出发指令， 然后跳转到画板。二、加入智能动画，如果是时间以秒为单位，我们则可以修改时长为一秒。如果是数字模组的滚动，不修改时间 也可以，然后我们预览就可以实现数字跳动的效果。那么除了数字滚动的动画，其实我们掌握动画的制作思路以后，我们还可以通过及时设计去完成多种花样的交互动画，比如这种仪表台的指针动画。首先我们绘制好素材， 这里需要注意的是，我们指针后面需要添加一层透明的正圆形或者正方形，这样做的目的是为了旋转的时候以中心点旋转，然后同样是在两个画板中做好动画前后的界面， 再通过原相工具进行连接，添加智能动画，这样仪表台的动画也制作完成。怎么样，是不是十分简单，快去试试看吧！
288梦想家Hyuk丨UI设计
00:35
04:51查看AI文稿AI文稿hello， 大家好，我是猫 sir， 今天呢我们来讲一个 figma 的 一个交互啊，这个是一个深色浅浅色的一个切换效果，那我们先看一下我们常规的这种切换效果是什么样的， 那我们常规的切换呢，它是在你的页面里，在你的网页或者 app 里啊，它有一个按钮，这个按钮呢当你点击哎，它就会切换到深色，再点击它就会切换到这个一个浅色，那这是一个常规的方式。那今天呢讲的主要就是一个这种，嗯，圆角啊，带圆弧的这样一个效果， 而且它是能根据你的这个呃圆弧的这个轨迹去进行一个滑动的一个效果。逻辑实际上是一样的，只不过你就看你这个效果是怎么做出来的。然后我们看一下我们用到的素材啊，首先呢是你需要有一个浅色和一个深色的模式，两个模式，然后把它放在两个 frame 里面， 然后这样的话他才有两个一面进行一个切换的效果，那我这个按钮呢，已经做成了一个呃组建，当我把组建拆开的时候，你可以发现他是这样的这样的一个结构，首先呢他是有一个底部的一个这样的一个边，那这个边呢，他实际上应该是和这个是对齐的。好，他是一个这样的效果，然后呢他还有一个 发光的效果，那就是在这个位置，然后呢他还有一个发光的效果，那就是在这个位置，然后呢他们两个应该是叠在一起， 叠在一起，然后给他放在这个位置，然后呢当你点击切过来的时候，这个浅色模式就会切换成深色模式，但是呢这里需要有图标来展示，哎，所以呢这里给他放个图标，包括下面这里也是给他放一个图标， 放好之后呢，给他把这两个给他挪过来，这个和这个好，调整好位置。然后呢我们需要注意一下它的分组啊，首先呢 这个灰色的，这个白色的这个，呃，圆弧形的这个滑轨，这个轨槽啊轨道，他和这个两个默认的这个固定的图标他是固定的，也就是这个和这个，还有这个他们三个是固定的。好看，我当我，当我把他们三个 拖走的时候，哎，可以看到他就这样的，这个是固定的，所以呢他们三个在图层下面，那这个圆弧以及上面这两个按钮，这个按钮和这个按钮他们三个一定要给他打一个组，打一个 group 旁 好，打好组之后我们把整体选中，给它打成一个组键，然后添加一个变体，那在变体的这个里面，那我们怎么操作？那在变体里面我们找到我们刚才打的这个组，这个组这个组里面有三个图层，一个是浅色按钮，一个深色按钮，还有个圆弧。好，我们直接选中这个 group， 注意啊是选中这个 group， 不是 选中这个， 这个组键啊，不是选择这个变体，我们选择 group， 然后按住 shift， 我 们给它旋转九十度，好，它就旋转完了，旋转完之后呢，哎，我们看一下它的效果是什么？首先这个滑轨它就应该变成一个深色，所以呢我们直接在这里给它改成一个黑色， 然后呢在这个位置这个浅色按钮它就应该不可见了，所以呢透明度我们就改成零，它就是这样的效果，但是这个深色背景和我们的这个，呃，深色的这个按钮稍微有点冲突，我们把颜色稍微再给它改轻一点， ok， 这样就行了。然后呢我们需要给它加跳转，我们选择 pro tab， 这里呢我们选择第一个按钮啊，注意图层啊，选中这个浅色按钮，然后呢我们给它增加一个效果，就是拖动效果，这儿要选择智能动画，那拖动它，它到这个位置，那在这个 变体里面我们要找到深色按钮，然后给它加一个返回的，返回也是拖动好，然后我们去创建一个窗口，我们去预览一下，我们创建一个一千二乘一千二的 颜色呢，稍微的改成灰色， ok， 直接把这个复制过来，放到我们的页面里，然后左右居中，上下居中，我们去给他添加一个播放的点，点击播放好，然后在这个播放里我们去拖动他，可以看到他现在已经根据我这个轨道这个滑轨，他去可以这样滑动了。 那这个圆的作用就是为了方便你方便整你的这个 group 七啊， group 十七去方便的去给他这样的按圆弧的这个程度去给他旋转，这个是它的作用。当你这个效果调整完之后， ok， 找到这个圆弧 和下面这个圆弧都找到它透明度给它改成一或者改成零点一，它不能消失啊，不能消失，你可以给它改成一或者零点一，都可以，然后实实际上肉眼你是不可见的。 然后你再去预览的时候啊，他就是这样的效果，当你拖动它，你表面上是这个在转，实际上它是中心轴，在这个位置，它以中心轴 这个圆的这个中心轴为基点来进行一个边缘的这样一个旋转，才能达到这样一个效果。如果说你发现你做的这个哎，他是直着划过去的，那你就需要第一啊，你要看一下你这个是不是选择的智能动画，如果你选择的智能动画他还是直线划过去的，那你就看一下你这个组是不是没打。对啊？ 这个圆弧和这两个按钮它就应该放在一个组里，一定要打组啊，不打组实现不了这个效果的。那最后效果呢？就是我们现在看到的这样， ok， 你 学会了吗？
88猫Sir不吃鱼
03:46查看AI文稿AI文稿如何用及时设计实现灵动岛的交互动巧？在教程开始之前，我们先来看看最终能实现的效果吧， 有没有心动的感觉呀？看完下面的教程，视频中的动向你也能轻松完成哦！ 首先我们要了解一下在节食设计中制作动画的基本原理，先绘制关键针，再给每一个关键针添加交互事件和动画效果。这样我们在预览模式下触发交互的时候， 会从一个关键针跳到另一个关键针，动画就产生了。我们以灵动岛的来电动效为例，在这段动画里，灵动岛一共七 经历了三次变化，需要画出三个关键，真为了节约时间，会这页面这一步我就省略了，这些素材我都会放在评论区分享给大家。 先选中第一个关键针的时间条，再点击界面右上角的圆形，添加交互，设置交互类行为，点击行为是跳转画板，跳转目标是关键争二。过度动画，选择智能动画，缓动 副以上操作让关键争二跳到三。选择跳转目标时，除了在右侧列表里选，还可以直接拖动这个小圆点进行连线设置完成后，我们点击右上角的小三角，右两动画效果，现在左侧选择关键争一，鼠标移动到离动挡上，点 击出现了放大动画，这时候看左侧的列表，我们已经跳到了关键争二，再点出现了缩小动画，跳到了关键争三，这就是制作动效的基本原理了。回到编辑页面，现在一 来电状态就要做三个画板，做完所有的动效岂不是要几十个画板？可以这样做，但是没必要啊，这里我再介绍一个干简便的方法，只需要准备一个关键真的画板，将三种灵动档的状态分别设为引用组件，全中所有组件创建变体， 给第一个时间条添加交互事件，连接到第二个交互事件。这次选择定时时长四百，这样无需点击就可以自动跳转播放动画。 然是智能动画，这次选择自定义时长六百，自定义设置里的缓动曲线参数按照我这个来填，这样设置会让动画效果更加顺滑。同样的操作呢，让第二个跳转第三个，第三个跳转第一个形成循环。最后一步，把画板上原有的时间条删除，变体里的时间条复制一个 移动到画板顶部，这样在变体里制作的动效就可以在画板上演示了。预览一下效果，无需点击动画就自动 循环播放了。回到编辑页面，除了来电状态呢，我们把音乐播放连接、耳机导航、人脸识别、秒表这几个状态的灵动导关键针都做出来，分别设置为引用组件。整体添加变体 是故意让变体中每一组的命名都相同的，因为这样会方便工具计算动效效果。按照我们刚刚讲的方法，逐个添加交互动效，从第一列的第一个开始，依次向下跳转，每一列的最后一个跳到第二列的第一个，最后一列的最后一个 跳转会第一个事件类型统一设置为定时四百。每一列的过渡动画设置上稍有差别，按照我图上标注的设置即可。全部设置完成后，我们就得到了一个完整版的灵动导动效。 最后是福利时间，现在进入及时设计官网的设计社区，每周零磨页面，参加最新一期的零动导动效零磨活动，跟着详细的图文教程进行练习，上传自己的练习作品，就有机会获得丰富的食物和现金奖品。好啦，今天的视频就到这里。
67璐璐Ps设计
01:01查看AI文稿AI文稿惊呆了我的产品经理，原来页面还可以这样展示！新建一个页面，绘制好我们所需的元素，然后复制这个画板，并且命名为画板币。接着我们调整画板币中需要发生变化的元素位置，可以支持位移、旋转、放大、缩小颜色等等。 故意发生变化的元素名称要相同，因为即时动画的原理是根据名称进行智能补建动画。 然后我们再新建一个页面，命名为画板 c。 在绘制好点开后的样式，接着切换到圆形设计页面，点击卡片，添加交互， 选择拖拽，跳转到画板 b。 过度动画，选择智能动画。最后在按钮上面添加交互选择，点击跳转到画板 c。 接下来就可以点击播放按钮预览了。然后我们点击右上角 小分享，就可以把动态页面分享给产品经理了。怎么样，兄弟们学会了吗？没学会的也没关系，安利我上传到中央广场了，快去试试看吧！
491梦想家Hyuk丨UI设计
01:04查看AI文稿AI文稿像这样的导航栏交互 ui 是怎样完成的？首先打开软件，创建一个画板，选中矩形工具，画出一个长方形，改变成圆角，填充为自己所需的颜色。之后我们添加图标，然后再画一个矩形放置在图标的底层，这里我们要花点耐心的调整好图标的间距， 将所有准备工作完成后，将画板复制出三份。接着我们选中二号画板，将蓝色的矩形移至到第二个图标，顺便修改图标的名称。其余的画板依次操作。 完成后，我们开始给所有的画板添加圆形交互动画，这里我们要注意是所有的画板的过度动画全部改为缓动。这里为了方 大家，我直接将连接的图放在视频里，大家可以仔细的研究一下交互的规律，完成后点击预览播放好了，一个简单的导航栏交互 ui 就完成了。关注我，从小白到大师，拯救你的设计之路！
467表妹谈设计
00:50查看AI文稿AI文稿今天一分钟来做个这样的交互小动画，首先打开我们的国产软件，从我们的插件库中找到插画插件，选张合适的插画素材放到我们的引导页上，然后把第二张和第三张的插画放到第一张上面， 关注加接边组，再依次排开，在第一个画板上画个句型，颜色和背景一样，选中这两个图层，右键设置为蒙版，这样就只显示当前图片了。然后按照 alt 键复制到第二个画板上，通通显示第二张插画，同样的方法， 找出第三张，然后选中右上角的圆形拖动这里的加号到第二个画板类型，选拖拽过度动画，选智能动画， 续时间七百毫秒。同样的操作，做后面两个的交互，最后点击预览，拖动画面就有交互效果了，也可以给下面的按钮加上交互，记得这里要选，点击预览一下，悄悄就搞定了， nice！
1187春草设计工作室
01:18查看AI文稿AI文稿大家是不是觉得这样一个微交互动画需要用 ae 才能做，其实在线就能完成。首先我们需要打开设计软件去画两个画板， 然后在两个画板中绘制好菜单图标，注意两个画板中的菜单图标需要名字保持一致，因为动画的原理是两个画板之间相同名称的元素自动进行补建动画， 那么现在我们就需要对画满二的菜单图标进行一些改变。首先我们需要对中间的圆角矩形添加一个等比缩放，缩放数值选择百分之一， 在为上下两个人道举行添加旋转四十五度与负四十五度，并上下居中。现在两个画板的元素就制作完成，可以为他添加交互动画。我们 选择右上角圆形设计界面，选中图标，点击加号为他添加一个，点击事件行为，选择跳转画板，跳转至画板二。过渡动画，这里选择智能动画， 缓动的话可以根据自己的喜好，我这里就选择默认的缓动。好，现在动画就制作完成，我们可以来预览一下效果，下期继续给大家带来一些微交互动画的制作教程，关注我了解更多。
868梦想家Hyuk丨UI设计
00:37查看AI文稿AI文稿一般公司官网顶多放几张图、几段介绍，但这个网站一上来就是电影感的三 d 场景，你会看到像素、小鸟、凤凰、异象、冰与火的视觉变化。页面不是一平一平翻，而是像走进一条会动的故事长廊， 把 salesforce、 amd coin based、 intel、 vogue 这些项目案例做成了一个个可以滑动穿过的空间。每一次下滑，镜头、光影、材质和文字都会跟着变化。最离谱的是， 他不是在告诉你什么叫数字叙事，而是直接用整个网页让你感受到什么叫数字叙事。做设计、品牌、官网、交互网页、作品集的人，真的可以把它当成灵感库。普通官网看多了，再看这个，你会发现网站也可以像电影一样被看完。
39阿远聊Ai
