Principle交互之标签切换动画（Tap）

如今的市场上，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，最后将顶部所有的线设置弹性值，完成标签切换动画。

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