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

这篇教程的目的主要是带领大家做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.mzph.cn/news/857093.shtml

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

相关文章

2024年道路运输企业主要负责人证模拟考试题库及道路运输企业主要负责人理论考试试题

题库来源:安全生产模拟考试一点通公众号小程序 2024年道路运输企业主要负责人证模拟考试题库及道路运输企业主要负责人理论考试试题是由安全生产模拟考试一点通提供,道路运输企业主要负责人证模拟考试题库是根据道路运输企业主要负责人最新版教材&#…

【算法训练记录——Day32】

Day32——贪心算法Ⅱ 1.leetcode122买卖股票的最佳时机II2.leetcode55跳跃游戏3.leetcode45跳跃游戏II4.eetcode1005K次取反后最大化的数组和 目标: leetcode122买卖股票的最佳时机IIleetcode55跳跃游戏leetcode45跳跃游戏IIleetcode1005K次取反后最大化的数组和 1…

掌握数据魔方:Xinstall引领ASA全链路数据归因新纪元

一、引言 在数字化时代,数据是App推广和运营的核心驱动力。然而,如何准确获取、分析并应用这些数据,却成为了许多开发者和营销人员面临的痛点。Xinstall作为一款专业的App全渠道统计服务商,致力于提供精准、高效的数据解决方案&a…

MySQL中的客户端选项(三)

默认情况下,LOAD DATA的LOCAL功能是否可用取决于MySQL客户端库在编译时是否启用了该功能。 当只给出--local-infile(不带值)时,它启用LOCAL数据加载。当给出--local-infile0时,它禁用LOCAL数据加载。当给出--local-in…

工具分享:Search_Viewer

文章目录 前言Search_Viewer介绍安装方式使用方式 前言 本文推荐工具Search_Viewer,详细介绍其安装和使用方式。 Search_Viewer介绍 集Fofa、Hunter鹰图、Shodan、360 quake、Zoomeye 钟馗之眼、censys 为一体的空间测绘gui图形界面化工具,支持一键采…

2024数据库期末综合(第9关:索引)

第9关:索引(注意看下面的温馨提示!!) 任务描述 湖南人口hnpeople数据表结构如图所示,各字段含义如下 cs(城市)、qx(区县)、rk(人口)、man(男)、woman(女)、child(儿童)、adult(成人)、old(老人)…

PySide在QLabel上按住鼠标左键画方框

用于截图放大等 import sys from PySide6.QtWidgets import QApplication, QLabel, QMainWindow from PySide6.QtGui import QPixmap, QPainter, QPen, QColor from PySide6.QtCore import Qt, QRect, QPointclass ImageLabel(QLabel):def __init__(self, parentNone):super().…

python项目(课设)——飞机大战小游戏项目源码(pygame)

主程序 import pygame from plane_sprites import * class PlaneGame: """ 游戏类 """ def __init__(self): print("游戏初始化") # 初始化字体模块 pygame.font.init() # 创建游戏…

南卡、漫步者和Oladance开放式哪家强?无广避坑测评!

现在市面上的开放式耳机种类非常多,在购买的时候大多数人都没有非常确定的目标,这主要是因为大多数人对开放式耳机的认识程度不够。 作为一个有着多年数码产品测评经验的测评员,我刚好对开放式耳机也有比较深刻的理解,也借着大家…

策略模式:applicationContext.getBeansOfType()方法

applicationContext.getBeansOfType() 一般用来获取某个接口的所有实例Bean 方法定义如下: 入参一般是接口,即interface。响应是个Map结构,key bean在容器中的名称,value bean实列 开发步骤: 1.定义接口 2.定义…

智汇云舟成为中煤集团中煤智能创新联盟成员单位

6月21日,第八届世界智能产业博览会平行会议暨中煤智能创新联盟交流会在天津水游城丽筠酒店顺利举行。智汇云舟受邀参与,并由中国中煤能源集团授予荣誉证书,正式成为中煤智能创新联盟成员单位。会议上,清华大学、中国矿业大学&…

【SkiaSharp绘图08】SKPaint方法:自动换行、是否乱码、字符偏移、边界、截距、文本轮廓、测量文本

文章目录 SKPaint方法BreakText 计算指定宽度内可绘制的字符个数ContainsGlyphs字体是否包含文本字符(是否会乱码)GetGlyphOffsets 字符偏移量GetGlyphPositions 偏移坐标GetGlyphWidths 每个字符的宽度与边界GetHorizontalTextIntercepts 轮廓截距GetPositionedTextIntercepts…

CVPR 2024第三弹:李飞飞教授惊喜亮相,CVPR之家乐队火爆演奏惊艳全场

CVPR 2024第三弹:小编与李飞飞教授惊喜同框,"CVPR之家"乐队火爆演奏惊艳全场! 会议之眼 快讯 2024 年 CVPR (Computer Vision and Pattern Recogntion Conference) 即国际计算机视觉与模式识别会议,于6月1…

电脑ai写作软件,4款实用的软件!

在数字化时代,AI写作软件已经成为创作者们不可或缺的工具。它们利用先进的自然语言处理技术和大数据分析,能够快速生成高质量的文章,大大提升了创作效率。那么,市面上有哪些值得一试的电脑AI写作软件呢?让我们一起来盘…

mongodb嵌套聚合

db.order.aggregate([{$match: {// 下单时间"createTime": {$gte: ISODate("2024-05-01T00:00:00Z"),$lte: ISODate("2024-05-31T23:59:59Z")}// 商品名称,"goods.productName": /美国皓齿/,//订单状态 2:待发货 3:已发货 4:交易成功…

“神刊”CA再回巅峰!2024年JCR正式发布,共21848本期刊,附完整版EXCEL版下载!

2024 年 6 月 20 日,科睿唯安(Clarivate Analytics)发布了最新的《期刊引证报告》(Journal Citation Reports,JCR),以下简要介绍最新影响因子(IF)情况: 2023年完整版JCR…

容器之工具栏构件演示

代码; #include <gtk-2.0/gtk/gtk.h> #include <glib-2.0/glib.h> #include <gtk-2.0/gdk/gdkkeysyms.h> #include <stdio.h>int main(int argc, char *argv[]) {gtk_init(&argc, &argv);GtkWidget *window;window gtk_window_new(GTK_WINDO…

[Qt]Qt框架解析:从入门到精通,探索平台开发的无限可能

一、Qt的概述 Qt是一个跨平台的C图形用户界面应用程序框架&#xff08;GUI&#xff09;。它为应用程序开发者提供建立艺术级图形界面所需的所有功能。它是完全面向对象的&#xff0c;很容易扩展&#xff0c;并且允许真正的组件编程。开发环境为Qt creator5.8.0&#xff0c;下载…

项目经验——交通行业数据可视化大屏、HMI设计

交通行业数据大屏、HMI设计时要的注意点&#xff1a;清晰可读、简洁直观、适配性强。颜色对比度满足WCAG标准&#xff0c;深色背景减少干扰&#xff0c;实时展示交通数据&#xff0c;支持有线网络控制内容更新&#xff0c;保障驾驶安全与决策效率。

通过“BOSS”精通比特币,深入认识私钥、账户和钱包

来源:币界原创 作者:636Marx 无论当今数字货币技术如何发展&#xff0c;认识区块链技术幕后的关键机制至关重要。无论您是新手还是经验丰富的数字货币从业者&#xff0c;掌握钱包地址、公钥和私钥的复杂性都有无可替代重要性。进入 BOSS Wallet&#xff0c;这是一款尖端的 Web…