Principle交互之标签切换动画

用户头像
常州/手工艺人/6年前/868浏览
Principle交互之标签切换动画

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


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


5
举报
|
3
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
金色颗粒质地的平面
空的平台平面和自然景观
平面插画设计女孩喝咖啡
古风平面仕女与瓷器
平面设计 吊牌设计
空的平台平面和自然景观
倒计时,海报,平面
平面书法字手写
中国传统纹样创新图案设计
牛奶乳液层次梯田平铺平面
平面插画情侣/矢量
海底世界插画
金色颗粒质地的平面
金色颗粒质地的平面
“知识宅急送”外卖,快递,平面,海报,素材,教育
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
城阙凡花
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
金色颗粒质地的平面
牛奶乳液层次平面平铺平面
平面花卉图案扁平简约无缝拼接插画
城市园林平面布局航拍
课程海报,平面素材
城市园林平面布局航拍
平面风格黄绿色系花朵装饰
你可能喜欢
相关收藏夹
大家都在看
登录注册