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

这篇教程的目的主要是带领大家做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.mfbz.cn/a/730788.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用Apache Flink实现实时数据同步与清洗:MySQL和Oracle到目标MySQL的ETL流程

使用Apache Flink实现实时数据同步与清洗:MySQL和Oracle到目标MySQL的ETL流程 实现数据同步的ETL(抽取、转换、加载)过程通常涉及从源系统(如数据库、消息队列或文件)中抽取数据,进行必要的转换&#xff0c…

开发中遇到的错误 - @SpringBootTest 注解爆红

我在使用 SpringBootTest 注解的时候爆红了&#xff0c;ait 回车也导不了包&#xff0c;后面发现是因为没有加依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId>…

噪声-降噪引脚如何提高系统性能

由于LDO是电子器件&#xff0c;因此它们会自行产生一定量的噪声。选择低噪声LDO并采取措施来降低内部噪声对于生成不会影响系统性能的清洁电源轨而言不可或缺。 识别噪声 理想的 LDO 会生成没有交流元件的电压轨。遗憾的是&#xff0c;LDO 会像其他电子器件一样自行产生噪声。…

详细解读“找不到mfc140u.dll无法继续执行代码”问题

当你打开某个软件或者运行游戏&#xff0c;系统提示mfc140u.dll丢失&#xff0c;此时这个软件或者游戏根本无法运行。其实&#xff0c;mfc140u.dll是动态库文件&#xff0c;它是VS2010编译的软件所产生的&#xff0c;如果电脑运行程序时提示缺少mfc140u.dll文件&#xff0c;程序…

网络虚拟化考题

vrrp讲过吗&#xff1f;&#xff1f;&#xff1f; d 每一层都是什么设备啊 abcd 为啥流量不可控不可视 c是啥意思 讲过吗 abc aNET网络虚拟化是啥啊 为啥&#xff1f;&#xff1f; 啥是CDN&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;

汇聚荣做拼多多运营口碑怎么样?

拼多多作为国内领先的电商平台&#xff0c;其运营口碑一直是业界和消费者关注的焦点。汇聚荣作为拼多多的运营服务商&#xff0c;其服务质量直接影响到拼多多平台的用户体验和品牌形象。那么&#xff0c;汇聚荣做拼多多运营口碑怎么样呢? 一、服务响应速度 汇聚荣在服务响应速…

聊聊JSON

引言 JSON的概念 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;它基于JavaScript的一个子集&#xff0c;但独立于语言&#xff0c;这意味着它可以被许多编程语言轻松解析。JSON的简洁性和易读性使其成为Web开发中数据交换的…

Focal Network for Image Restoration

Focal Network for Image Restoration 用于图像恢复的焦点网络 Yuning Cui1 Wenqi Ren2* Xiaochun Cao2 Alois Knoll1 1Technical University of Munich 2Shenzhen Campus of Sun Yat-sen University {yuning.cui,knoll}in.tum.de {renwq3,caoxiaochun}mail.sysu.edu.cn 论文…

【python】OpenCV——Color Correction

文章目录 cv2.aruco 介绍imutils.perspective.four_point_transform 介绍skimage.exposure.match_histograms 介绍牛刀小试遇到的问题 参考学习来自 OpenCV基础&#xff08;18&#xff09;使用 OpenCV 和 Python 进行自动色彩校正 cv2.aruco 介绍 一、cv2.aruco模块概述 cv2.…

【2024德国工作】外国人在德国找工作是什么体验?

挺难的&#xff0c;德语应该是所有中国人的难点。大部分中国人进德国公司要么是做中国业务相关&#xff0c;要么是做技术领域的工程师。先讲讲人在中国怎么找德国的工作&#xff0c;顺便延申下&#xff0c;德国工作的真实体验&#xff0c;最后聊聊在今年的德国工作签证申请条件…

网络与协议安全复习 - 电子邮件安全

文章目录 PGP(Pretty Good Privacy)功能 S/MIME(Secure/Multipurpose Internet Mail Extensions)DKIM(Domain Keys Identified Mail) PGP(Pretty Good Privacy) 使用符号&#xff1a; Ks&#xff1a;会话密钥、KRa&#xff1a;A 的私钥、KUa&#xff1a;A 的公钥、EP&#xff…

Android开发系列(六)Jetpack Compose之Box

Box是一个用来组合和控制子元素布局的组件。它可以在一个矩形区域内排列一个或多个子元素&#xff0c;并根据所提供的参数来控制它们的位置、大小和样式。 Box的功能类似传统的FrameLayout。 下面通过示例了解Box的使用方法&#xff0c;首先看一个最简单的示例&#xff0c;如下…

永磁同步电机驱动死区补偿

1 死区效应及补偿 1. 1 死区效应 在本文的电机控制嵌入式系统中,逆变器为三 相电压型桥式逆变电路,如图 1 所示。 在理想状态 下,上桥臂和下桥臂的控制信号满足互补通断原则, 即上桥臂开通时,下桥臂关断,反之亦然。 而在实际 应用中,开关管的通断需要一定的开通时…

大语言模型-Transformer

目录 1.概述 2.作用 3.诞生背景 4.历史版本 5.优缺点 5.1.优点 5.2.缺点 6.如何使用 7.应用场景 7.1.十大应用场景 7.2.聊天机器人 8.Python示例 9.总结 1.概述 大语言模型-Transformer是一种基于自注意力机制&#xff08;self-attention&#xff09;的深度学习…

如何使用Windows备份轻松将数据转移到新电脑?这里有详细步骤

序言 我们都知道那种买了一台新电脑,就想直接上手的感觉。我记得在过去的日子里,要花几个小时传输我的文件,并试图复制我的设置。在当今传输数据的众多方法中,Windows备份提供了一个简单可靠的解决方案。 登录到你的Microsoft帐户 Microsoft在传输过程中使用其云存储来保…

NGINX_六 nginx 日志文件详解

六 nginx 日志文件详解 nginx 日志文件分为 **log_format** 和 **access_log** 两部分log_format 定义记录的格式&#xff0c;其语法格式为log_format 样式名称 样式详情配置文件中默认有log_format main $remote_addr - $remote_user [time_local] "req…

二,SpringFramework

二、SpringFramework实战指南 目录 一、技术体系结构 1.1 总体技术体系1.2 框架概念和理解 二、SpringFramework介绍 2.1 Spring 和 SpringFramework概念2.2 SpringFramework主要功能模块2.3 SpringFramework 主要优势 三、Spring IoC容器和核心概念 3.1 组件和组件管理概念3…

超越GPT-4o!新王Claude 3.5 Sonnet来啦!免费使用

目录 01 比GPT-4o更智能&#xff0c;比Claude 3 Opus快两倍 02 最强视觉Model 03 使用Claude的新方式&#xff1a;Artifacts 04 安全性和透明度 Anthropic刚刚发布了全新大模型Claude 3.5 Sonnet&#xff0c;号称是迄今为止最智能的模型。一文几步教你注册使用Claude 3.5 S…

硬件开发笔记(二十一):外部搜索不到的元器件封装可尝试使用AD21软件的“ManufacturerPart Search”功能

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139869584 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…