Principle交互之标签切换动画(Tap)

2019-11-24  本文已影响0人  别具慧眼的泽塔凯瑟尔

如今的市场上,UI设计师已不仅仅只能在静态界面停留,随着工作项目的不断积累和为了减少与开发的重复沟通,我们可以用principle这款交互软件来提高项目开发的效率。

【软件介绍】Principle 是一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者 Gif 分享到 Dribbble、Twitter 等社交平台。此外 Principle 还支持多种尺寸的原型设计,包括 Apple Watch。

今天来给大家讲解-标签切换动画,首先你需要安装好软件,下载链接可自行下载。 [下载链接]:链接地址 【提取码】:7s6h 

[语言]:简体中文  [安装环境]:Mac OS10.11 或更高(不支持10.15)

今天要学习的是如下的切换效果GIF

P1:安装好后打开Principle

P2:开始绘制图层

打开软件后默认会有一个画板(绿框就是画板),我们选中矩形可以绘制,与sketch操作方式一样

如下图首先我们先绘制一个页面,底部绘制文字会作为切换,所以文字颜色要做一个区分,并且增加一个tab条丰富交互效果。

下面敲重点啦!!!选中文字会出现一个闪电的小图标,点击就可以设置交互操作方式

鼠标拖动选择【点击】 点击在该页面的空白处松鼠标

选中【点击】在该页面松开鼠标,会自动复制出相同的画板界面,并且上方会出现箭头指示(表示该文字会链接过去的画板)

将复制出的画板的内容进行修改文字属性,及矩形的颜色,注意:滑动tab的矩形不可以更改名称,否则会影响后面的操作

将每个页面的文字都进行点击操作的设置,设置好后,就可以在右侧的动效区进行点击操作展示了,接下来关键的一步是要让动效更加自然

将每个tab的文字进行关联页面点击设置

选中顶部的箭头,点击会出现下方的动画设置区,点击默认出现弹框

选择弹性,值的大小可以拖动感受,最佳推荐值设置:张力381.47;摩擦力20.17,最后将顶部所有的线设置弹性值,完成标签切换动画。

如果有帮到你们,请动动鼠标给我个赞支持下吧~

上一篇下一篇

猜你喜欢

热点阅读