工具与技术:如何使用工具创建和实现导航栏图标动效

news2024/11/29 4:41:58

这篇教程的目的主要是带领大家做UI交互的入门引导,让大家理解做交互动效的一些基本逻辑思维,利用原型交互动画做导航栏icon动画效果。

导航栏icon动效的详细教程:

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。icon-default.png?t=N7T8https://js.design/f/UGlsPN?p=QCQXXqJX-0&y=hd&j=9&mode=design&source=csdn&plan=smt0621技巧要点

智能动画会自动帮你补全所有中间帧,我们只要做好一段动画的初如始结束态就可以。

智能动画的原理是从一个画板变化到另一个画板,一个为初始态,一个为结束态。

智能动画可以对形状的大小、颜色和位置进行智能过渡动画补充。

两个形状之间进行智能动画过渡,需要保证两个形状图层名字一致

定时事件一个画板只能链接到另一个画板,不能链接到多个个画板。

绘制背景

新建画板尺寸为:800PX^600PX,设置背景色#FFC300,并在画板中绘制背景四角所需要的元素装饰,让整个画面版式看起来更工整精美。

绘制导航栏背景

使用矩形工具在画板中心绘制一个尺寸为:600^140px的钜形,并填充颜色为白色#FFFFFFF,四边圆角分别设为20、20、40、40。并给此图层命名为:导航背景(命名是为了后面做动画时方便查找图层,不易混乱。)

绘制图标

在导航栏背景上绘制我们需要的动画图标,并分好组各自命好名字。(命名是为了后面做动画时方便查找图层,不易混乱。)这里我附上图标文件,大家可以直接下载复用,你也可以绘制自己喜欢的图标来做动画。

绘制圆形背景

大家看动画预览,背景会有一个从黄色变成蓝色的动画。所以我们需要在画板中心绘制一个60px^60px的圆形,

颜色填充#2E54FF。放在图层的最底下,来做后面动画的准备。

调整初始画板参数

智能动画的原理是从一个画板变化到另一个画板,一个为初始态,一个为结束态。复制画板1做结束态(后面需要用到)。调整初始态画板1的元素参数。

我们想让主页icon进行从小到大的变化,所以要将主页图标的初始态缩小。使用等比缩放,缩小至30px。

调整导航背景的大小,使用等比缩放将导航背景形状缩小至570^133 px

复制画板调整参数

智能动画的原理是从一个画板变化到另一个画板,一个为初始态,一个为结束态。

所以现在需要调整结束态画板2的参数。将图标颜色调成蓝色色#2E54FF文字颜色调成蓝色#2E54FF

将之前绘制的背景蓝形状放大到1040^1040px。注意移动到图层最底下,不然会遮住文字。

添加交互动画

切换到「原型」面板,添加交互。事件类型为:定时,时长:!50,行为:跳转到画板2,过渡动画:智能动画

线性回弹,时长:500

直接Ctrl/Command+P「预览」,就能看到刚刚做的智能动画效果了。

复制画板调整参数

复制画板2复制出一份新的画板3。将画板3的主页icon颜色调整为为#BFCCDE,文字颜色调整为#BFCCDE

绘制一个圆形图层,尺寸60^60px命名为背景绿,填充颜色为#00BAAD,移动至图层背景蓝上方。

将我的icon等比缩小至30^30px。并调整导航背景的大小,使用等比缩放将导航背景形状缩小至570^133px

添加交互动画

选中画板2切换到「原型」面板,添加交互,事件:定时,时长:400,行为:跳转到画板3,过渡动画:智能

动画,线性回弹500

复制画板调整参数添加动画

继续复制画板,并调整参数,添加交互动画,设置动画参数,这里继续重复之前上面的操作。

设为循环播放

将最后一个画板与第一个画板设置交互连接,预览就可以实现循环播放动画了。大家在做的注意开始状态与结束状态的效果。然后连接交互线,设置智能动画就可以了。最后直接Ctrl/Command+P「预览」,就能看到刚刚做的智能动画效果了。

本临摹教程供给大家一个思路,大家还可以通过智能动画举一反三做一些自己喜欢的效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1848065.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux入门攻坚——26、Web Service基础知识与httpd配置-2

http协议 URL:Uniform Resource Locator,统一资源定位符 URL方案:scheme,如http://,https:// 服务器地址:IP:port 资源路径: 示例:http://www.test.com:80/bbs/…

【mysql 安装启动失败】 没有网下 libssl.so.10 not found 如何解决?

问题描述: libssl.so.10 > not found libcrypto.so.10 > not found [rootmysql tools]# ls -l /usr/sbin/mysqld -rwxr-xr-x. 1 root root 64290024 Sep 14 2022 /usr/sbin/mysqld [rootmysql tools]# ldd /usr/sbin/mysqldlinux-vdso.so.1 (0x00007fff97105…

网络流量 数据包length计算

MTUMSSIP header(20 bytes)tcp header(20 bytes) lengthMTUEthernet header(14bytes) 其中MSS为Maximum Segment Size,即最大报文段长度,其受MTU大小影响,这里的MTU指的是三层的,二层的MTU固定为1500,不能修改。 MT…

SFF2004A-ASEMI无人机专用SFF2004A

编辑:ll SFF2004A-ASEMI无人机专用SFF2004A 型号:SFF1006A 品牌:ASEMI 封装:ITO-220AC 最大平均正向电流(IF):20A 最大循环峰值反向电压(VRRM):400V 最…

一种快速设计PCB外壳的方法

设计PCB外壳比较好用的工具是SW但是有时候需要快速设计外壳的情况下使用立创EDA的外壳设计功能很好用,设计完成之后可以直接导出STL文件: 可以看到设计的外壳还是蛮精美的: 特别注意,设计外壳的时候要考虑如何把PCB放进壳子中&…

市值3万亿英伟达的崛起:技术、坚持与市场的力量,厚积薄发的经典案例

在科技领域,英伟达(NVIDIA)的故事无疑是一个厚积薄发的经典案例。作为一家专注于图形处理单元(GPU)的公司,英伟达用31年的时间证明了技术的价值、计算的价值和坚持的价值。本文将详细探讨英伟达如何从一家市…

第7周作业——单片机定时器与串口通信的学习与应用

一、蜂鸣器 (一)蜂鸣器介绍 蜂鸣器是一种将电信号转换为声音信号的器件,常用来产生设备的按键音、报警音等提示信号,按照驱动方式可以分为如下两种: 1、有源蜂鸣器:内部自带振荡源,将正负极接上…

自动化测试:Autorunner的使用

自动化测试:Autorunner的使用 一、实验目的 1、掌握自动化测试脚本的概念。 2、初步掌握Autorunner的使用 二、Autorunner的简单使用 autoRunner使用方法 新建项目 a) 在项目管理器空白区域,右键鼠标,选择新建项目 b) 输入项目名后,点击[确定]. 在初次打开aut…

[java]集合类stream的相关操作

1.对list中的map进行分组 下面例子中&#xff0c;根据高度height属性进行分组 List<Map<String, Float>>originalList new ArrayList<>();originalList.add(new HashMap<String,Float>() {{put("lng", 180.0f);put("lat",90f);…

Eclipse使用TFS(Team Foundation Server) 超详细

Eclipse使用TFS 1、什么是TFS2、TFS和Git的区别3、签出代码4、签入代码4.1、签出以进行编辑4.2、修改本地代码4.3、签入挂起的更改4.4、签入 如果不能 签入挂起的更改&#xff0c;则先 签出以进行编辑如果 签入挂起的更改不可选中&#xff0c;则 如下操作 1、什么是TFS Team F…

阿里云使用域名访问部署网站【2024 详细版】

目录 一、注册域名 1.创建信息模板 2.查询注册域名 二、域名设置 1.SSL证书 2.域名解析 3.宝塔设置 一、注册域名 1.创建信息模板 点击右上角【三】-【域名】-【信息模板】-【创建信息模板】- 填写信息 模板分为个人和企业两种&#xff0c;根据情况进行创建即可&…

c++ 里构造函数的形参与数据成员的同名问题

如题&#xff0c;这时&#xff0c;或许在 java 里&#xff0c;会报语法错误。但在 c vs2019 开了 c20语法规范。这不再是错误。这样的好处是解决了咱们的起变量名的麻烦&#xff1a;重名现在已不是错误&#xff0c;编译器可以解决了。测试如下&#xff1a; 我们看看 c 编译器是…

揭秘!速卖通、敦煌网、国际站出单背后的黑科技:自养号测评技术

在竞争激烈的跨境电商平台上&#xff0c;如亚马逊、速卖通、Lazada、Shopee、敦煌网、Temu、Shein、美客多和阿里国际等&#xff0c;稳定出单成为每位卖家共同追求的目标。为了实现这一目标&#xff0c;卖家需要从产品选择、运营策略和客户服务等多个维度进行全面考量&#xff…

【C语言】13.指针与数组的关系

一、数组名的理解 #include <stdio.h> int main() {int arr[10] { 1,2,3,4,5,6,7,8,9,10 };printf("&arr[0] %p\n", &arr[0]);printf("arr %p\n", arr);return 0; }通过上述代码输出结果我们发现结果相同&#xff0c;因此我们得出结论&a…

电脑开机后出现Aptio Setup Utility 处理方法

电脑开机后出现Aptio Setup Utility怎么处理 Aptio Setup Utility界面的原因&#xff1a; 这是由于 bios设置与真实的硬件情况不匹配硬盘故障找不到可启动的硬盘情况 我的问题是找不到可启动的硬盘情况 解决方式如下&#xff1a; 进入如下界面了&#xff0c;选择Boot选项…

SAP_ABAP模块-记录第三方通过Webservice调用SAP接口时的问题

一、业务背景&#xff1a; 最近SAP有个货物移动的接口需要优化&#xff0c;之前与第三方销售管理平台对接&#xff0c;一直都没有问题的&#xff0c;但是现在SAP这边优化后&#xff0c;然后对方平台的开发同事说&#xff0c;调用不成功&#xff0c;报错了&#xff0c;最开始一直…

vue3 antdv RadioButton默认值选择问题处理

1、先上官方文档&#xff1a; Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 官方代码&#xff1a; <template><div><div><a-radio-group v-model:value"value1"><a-radio-button value"a…

添加右键菜单(以git为例)

1、打开注册表编辑器 打开系统注册表&#xff0c;使用组合键“Win R”输入“regedit”。 依次展开”HKEY_CLASSES_ROOT\Directory\Background\shell”。 2、新建右键菜单项 在[Background]下找到“shell”如果没有则新建项shell&#xff0c;接着在“shell”下右键-新建项名…

M12单端I/O预铸法兰插座A-code

M12单端I/O预铸法兰插座A-code概述 M12单端I/O预铸连接器A-code是一种常用于工业自动化领域的连接器件&#xff0c;主要用于传感器和执行器之间的信号传输。它的设计遵循国际标准IEC 61076-2-101&#xff0c;具有良好的防水防尘性能&#xff0c;通常达到IP67的保护等级。M12连…

kettle无法启动问题_PENTAHO_JAVA_HOME

1&#xff0c;遇到spoon.bat启动报错&#xff1a;先增加pause看清错误信息 1.1&#xff0c;错误信息 1.2&#xff0c;因为本地安装jdk1.6无法支持现有版本kettle。只能手动执行kettle调用的java路径&#xff1b;如下 系统--高级系统设置--高级--环境变量 启动成功