Unity 图集 DoTween按钮动画

课程重点

项目资源的整理

制作账号系统的所有页面

完成页面的切换及数据传递

串接组件实现功能

账号系统页面及简单交互

课程知识点

资源整理

目录建立

资源目录

字体目录

预制体目录

场景预制体目录

UI预制体目录

UI图片切片目录

场景目录

脚本目录

第三方库目录

导入插件

把所有第三方库,移入ThirdParty中

搭建场景

建立Canvas

建立UICamera,去掉音频监听器

修改Canvas的渲染模式为相机模式,将UICamera拖给Canvas

UI相机清除填充改为深度优先,渲染层改为唯一UI,相机层改为UI

将Canvas到相机的距离,改为10米,将UI相机可视最远距离,调整为20米

将主相机不显示UI层的内容

注意保持UI相机的深度比主相机的深度高

Canvas子元素拉伸,设置参考分辨率,屏幕匹配方式修改为高度或宽度自适应

单元测试:UI元素和3D物体叠加正常显示

导入资源

将UI切片,放入Resources/UI目录下

将字体,放入Resources/Fonts目录下

注意不需要打包到用户手机的资源,不要放在Resources目录下,这样会导致

包体大小上升

资源的分类

根据系统,建立目录

UI切片转换为Sprite格式后再移动(首页移动后的效果)

建立图集(一般一个系统一个图集)

开启项目精灵图集生成功能

拖入精灵,调整质量(注意半透明渐变),并预览

资源命名及图集移动

按钮:btn_名称

背景:bg_名称

图标:icon_名称

单选按钮:tg_名称

头像:av_名称

进度条:pg_名称

页面制作

在场景中建立Panel并生成预制体

在UI最后方,放页面参考图

页面制作

功能需求

显示登录页

  1. 输入用户名和密码(选服信息页)
  2. 点击注册按钮(注册页)

注册页

  1. 输入用户名,密码,重复密码(登录页)
  2. 点击返回按钮(登录页)

选服信息页

  1. 点击选服按钮(选服页)
  2. 进入按钮(主页)

开发部分

DOTween的按钮动画

页面跳转

创建引导脚本(单入口的思想,场景中只有一个脚本,所以引导脚本中Start

会在程序一开始执行时运行,类似Main函数)

Login页面加载

  1. 通过Resources.Load()加载预制体
  2. 实例化预制体对象(Object.Instantiate())
  3. 让页面在场景中出现(将Object类型转化为GameObject类型)
  4. 将页面放置在Canvas物体下(transform.SetParent())

第一个页面的加载

由于Bootstrap是第一个运行的脚本,所以Login页面的加载写在Bootstrap

UI系统的脚本管理(1个Panel界面,1个控制脚本)

登录页面的脚本

  1. 需要交互的组件,公开成员变量或回调函数

  1. 编辑器配置成员变量,或回调函数

  1. 处理,注册按钮的事件响应

登录页面中注册按钮,实现的是注册页面的加载

其他页面切换逻辑以此类推

                   分析注册页面需要编写的代码逻辑

  1. 点击注册时需要编写逻辑代码

用户名,密码,重复密码,不为空

两次密码是否一致

用户名规则校验

密码规则校验

注册成功后,需要修改登录页的用户名及密码(跨页面传递数据

因为所有页面都在Canvas下,所以获取登录页,只需要获取父物体,

在获取Login页面下的UILogin控制脚本即可获得UILogin

  1. 获取父物体
  2. 查找父物体下的Login对象
  3. 获取Login对象下UILogin控制脚本
  4. 对成员变量操作(输入框),修改输入框的值

按钮事件中添加数据

编写回调函数脚本,编写带有参数的回调函数

编辑器中选中按钮,添加事件,事件回调中,可以配置数值(因为回调函数有参数

原文地址:https://www.cnblogs.com/DGJS/p/11052034.html

时间: 2024-10-23 08:46:03

Unity 图集 DoTween按钮动画的相关文章

Unity之UGUI初探—按钮动画

今天试了一下unity的新的UI系统—UGUI,感觉很强大,很多功能一目了然,使用起来相当方便接下来就是先试试使用他的动画吧 先创建一个UGUI的按钮,当然也可以先创建画布,然后在画布上创建按钮 然后点击按钮, 图中的transition的选项点开之后,有一项Animation的选项, 点击之后选择Auto Generate Animation 之后会弹出文件夹选项,就会意思是新建的这个动画的保存路径,自己选择路径命名即可,但要在Assets文件夹下 之后在window下,可以选择Animati

[Unity菜鸟] FBX模型动画提取

角色已经人形化(Humanoid)了,那它的动画可以用在其它的模型上了也就是可以共用一套模型动画了,但是你有没有发现那动画是和fbx模型绑在一起的,没关系你可以选中这几个动画文件按Contrl+D就可以提取出来了,然后你可以把整个fbx模型都删掉了,新生成的动画已经不再基于fbx了,这样可以大大减小资源大小. 如果是一个程序员的话你可能会想那这个实现代码是怎样的呢 using UnityEngine; using UnityEditor; using System.Collections; us

常用的css3鼠标悬停按钮动画特效

css3 按钮制作A标签属性hover css3带冒泡动画按钮 css3动画transform属性鼠标悬停图文列表动画效果 div CSS3动画带有的按钮_css3样式表属性动画按钮 创意CSS3属性鼠标悬停动画菜单 css3按钮动画特效大全鼠标滑过按钮动画特效 div css3 transition属性制作鼠标悬停图标导航菜单动画展示 21种css3 transition属性鼠标悬停导航条动画效果 纯div css3鼠标触碰图标背景渐变动画效果代码 css3动画鼠标滑过栏目图片滑动切换效果 c

按钮动画

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>.button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text

8款超酷而实用的CSS3按钮动画

1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图标,并且在鼠标滑过这些按钮时,利用CSS3的动画特性出现滑动的动画效果. 在线演示 源码下载 2.HTML5/CSS3悬浮按钮特效 Canvas彩球飞舞效果 这次要分享一个非常具有动画色彩的CSS3按钮,按钮的外观比较一般,但它有两个特别的地方:一.按钮悬浮,整个按钮看上去像是悬浮在半空中一样,很立

5个基于css3超炫的鼠标滑动按钮动画

今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="wrap"> <a href="#" class="btn-slide"><span class=&q

简单的UIButton按钮动画效果ios源码下载

这个是简单的UIButton按钮动画效果案例,源码,简单的UIButton按钮动画,可以自定义button属性. 效果图: <ignore_js_op> 使用方法: 详细说明:http://ios.662p.com/thread-2272-1-1.html

按钮动画控件----------WinForm控件开发系列

public partial class ButtonExt : Button { private AnimationTimer _Animation; /// <summary> /// 动画组件对象 /// </summary> [Description("动画组件对象")] [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)] public AnimationT

Unity经验之谈-DoTween动画结束匿名委托之巨坑

产生问题: 成百上千个物体放在List列表里面循环,每个物体都要使用移动和移动结束事件. BUG: 动画结束之后我想隐藏该物体,结果却没有正常的隐藏,代码如下 foreach (var item in lists) { if (item != null) { item .transform.DOLocalMove(AnchorBanker.transform.localPosition, 0.5f).OnComplete(() => { item .gameObject.SetActive(fa