美文网首页
Principle交互之标签切换动画(Tap)

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

作者: 别具慧眼的泽塔凯瑟尔 | 来源:发表于2019-11-24 22:00 被阅读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,最后将顶部所有的线设置弹性值,完成标签切换动画。

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

    相关文章

      网友评论

          本文标题:Principle交互之标签切换动画(Tap)

          本文链接:https://www.haomeiwen.com/subject/yxhrwctx.html