Unity3d学习笔记(8)-- 可展开公告牌
2017-05-07 14:34
120 查看
模仿这个网站制造一个可展开的公告牌 http://www.tasharen.com/ngui/example9.html(PS:请用ie打开)
一.首先上个最终的效果图:
二.首先创建一个ScollView,然后给Content添加一个VerticalLayoutGroup组件,并为Content创建三个Button和Text子对象,并把每个Button的Transition设为None,结果如下图所示:
三.给Canvas添加一个Image的组件,把公告牌的背景图片放上去(左图),还要给ScrollView加上一张背景(右图)
顺便提一下怎么把一张图片转化为Sprite,点击图片,把TextureType设置为Sprite(2D and UI):
四.之后设置一下ScrollView的Anchors
五.之后要弄的是设置各个Button的图片和ScrollBar的图片,颜色和设置各个Text(包括Button的Text)的内容,之后你可能
会发现文本不能全部显示和滚动条没能出现之类的问题,这是只要设置Text的高度和Content的高度就可以了,如果以上步骤都没问题的话,应该和下图差不多:
好了,到了这里,布局就完成了,剩下的就是点击button时,文本折叠起来和展开。
六.我这里是通过旋转文本和改变文本的高度来实现的,先看下代码
整个实现也完成了,以下是所有的代码
一.首先上个最终的效果图:
二.首先创建一个ScollView,然后给Content添加一个VerticalLayoutGroup组件,并为Content创建三个Button和Text子对象,并把每个Button的Transition设为None,结果如下图所示:
三.给Canvas添加一个Image的组件,把公告牌的背景图片放上去(左图),还要给ScrollView加上一张背景(右图)
顺便提一下怎么把一张图片转化为Sprite,点击图片,把TextureType设置为Sprite(2D and UI):
四.之后设置一下ScrollView的Anchors
五.之后要弄的是设置各个Button的图片和ScrollBar的图片,颜色和设置各个Text(包括Button的Text)的内容,之后你可能
会发现文本不能全部显示和滚动条没能出现之类的问题,这是只要设置Text的高度和Content的高度就可以了,如果以上步骤都没问题的话,应该和下图差不多:
好了,到了这里,布局就完成了,剩下的就是点击button时,文本折叠起来和展开。
六.我这里是通过旋转文本和改变文本的高度来实现的,先看下代码
IEnumerator rotateIn() { float rx = 0; float xy = 120; for (int i = 0; i < frame; i++) { rx -= 90f / frame; xy -= 120f / frame; text.transform.rotation = Quaternion.Euler(rx, 0, 0); text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy); if (i == frame - 1) { text.gameObject.SetActive(false); } yield return null; } }这是折叠的代码,因为刚学到协程,所以是通过协程来实现的,通过每帧来改变文本的角度和文本的高度,来实现折叠的效果,展开的也类似。好了,到了这里,
整个实现也完成了,以下是所有的代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Bulletin : MonoBehaviour {
private Button yourButton;
public Text text;
private int frame = 20;
// Use this for initialization
void Start()
{
Button btn = this.gameObject.GetComponent<Button>();
btn.onClick.AddListener(TaskOnClick);
}
IEnumerator rotateIn() { float rx = 0; float xy = 120; for (int i = 0; i < frame; i++) { rx -= 90f / frame; xy -= 120f / frame; text.transform.rotation = Quaternion.Euler(rx, 0, 0); text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy); if (i == frame - 1) { text.gameObject.SetActive(false); } yield return null; } }
IEnumerator rotateOut()
{
float rx = -90;
float xy = 0;
for (int i = 0; i < frame; i++)
{
rx += 90f / frame;
xy += 120f / frame;
text.transform.rotation = Quaternion.Euler(rx, 0, 0);
text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy);
if (i == 0)
{
text.gameObject.SetActive(true);
}
yield return null;
}
}
void TaskOnClick()
{
if (text.gameObject.activeSelf)
{
StartCoroutine(rotateIn());
}
else
{
StartCoroutine(rotateOut());
}
}
}
相关文章推荐
- [公告]涕淌居的bug:点击“《XXX》的全部存档”无法展开全部列表
- 可展开的TextView
- Unity3D学习笔记-----2015-07-24(GUI---01)
- CSS - toggle collapse 类似bootstrap的展开效果
- 顺查BOM(展开BOM清单、CS12)与逆查BOM(查上层物料、CS15)
- 与芝麻信用等业务展开合作
- 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第四节:3D公告板
- Linux学习日记--基础命令(2)--文件查看,命令历史,命令展开
- jQueryMobile的组件——可展开项(collapsible)
- jquery实现可点击伸缩与展开的菜单效果代码
- 如何将数组展开!
- error C2712: 无法在要求对象展开的函数中使用 __try
- 消除大厅的系统公告别人的QQ
- jQuery实现默认是闭合的FAQ展开效果菜单
- 公告:CSDN博客频道博乐重磅推出!
- DataGridView展开与收缩功能实现
- 全景:全景图像展开算法opencv代码
- CSS3学习笔记(4)—上下滑动展开的按钮
- 沪指可能展开一波3个交易日的调整
- jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果