unity3d之实现各种滑动效果
一、 点击滑动页面
新建了一个带mask的prefab,加上代码只需要将图片prefab、按钮prefab和所想添加的图片
拖进去会自动生成按钮,滑动速度可以随意调time,滑动效果用itween实现的,所以需要加上itween插件
效果如下:(图片是我最爱的马路小天使(¯﹃¯))
附上代码
using UnityEngine;
using System.Collections.Generic;
using UnityEngine.UI; public class Mask : MonoBehaviour { public List<Sprite> sprite = new List<Sprite>();
List<GameObject> image=new List<GameObject >();
public GameObject pic;
public Button but;
public float time;
float width, height;
int num;
void Start ()
{
num = sprite.Count;
width = this.gameObject.GetComponent<RectTransform>().rect.width;
height = this.gameObject.GetComponent<RectTransform>().rect.height;
pic.transform.GetComponent<RectTransform>().sizeDelta=new Vector2(width,height);
for (int i = ; i < num; i++)
{ GameObject p = Instantiate(pic,new Vector3(transform.position.x+i*width,transform.position.y,),transform.rotation)as GameObject;
p.transform.parent = this.gameObject.transform;
image.Add (p) ;
p.GetComponent<Image>().sprite = sprite[i];
Button b = Instantiate(but, new Vector3(transform.position.x- ( * num - ) / +*i, transform.position.y - height/ + , ), transform.rotation) as Button;
b.transform.parent = GameObject.FindWithTag("Button").transform;
System.Object obj = (System.Object)i;
b.onClick.AddListener(delegate(){this.MoveToPic((int)obj);});
} }
void OnGUI()
{
if (GUI.Button(new Rect(transform.position.x + + width / , Screen.height - transform.position.y - , , ), ">"))
{
if (image[].transform.position.x < transform.position.x-)
{
Move();
}
}
if (GUI.Button(new Rect(transform.position.x -width/-,Screen.height- transform.position.y- , , ), "<"))
{
if (image[num - ].transform.position.x > transform.position.x+)
{
Move(-);
}
}
}
public void Move(int dir)
{
for (int i = ; i <num; i++)
{
iTween.MoveAdd(image[i], iTween.Hash("x", width * dir, "time", time));
}
}
public void MoveToPic(int i)
{ float offset = transform.position.x - image[i].transform.position.x;
for (int j = ; j < num; j++)
{
iTween.MoveAdd(image[j], iTween.Hash("x", offset, "time", time));
}
} }
二、间隔时间自动滑动,也可点击滑动
using UnityEngine;
using System.Collections.Generic;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using System; public class ScrollPage : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{
ScrollRect rect;
//页面:0,1,2,3 索引从0开始
//每页占的比列:0/3=0 1/3=0.333 2/3=0.6666 3/3=1
//float[] pages = { 0f, 0.333f, 0.6666f, 1f };
List<float> pages = new List<float>();
int currentPageIndex = -; //滑动速度
public float smooting = ; //滑动的起始坐标
float targethorizontal = ; //是否拖拽结束 0 -结束 1-拖拽中 2-结束超过5s
int isDrag = ;
int curindex = ;
int dir = ;
float timecount = ;
/// <summary>
/// 用于返回一个页码,-1说明page的数据为0
/// </summary>
public System.Action<int,int> OnPageChanged; float startime = 0f;
float delay = 0.1f; // Use this for initialization
void Start()
{
rect = transform.GetComponent<ScrollRect>();
//rect.horizontalNormalizedPosition = 0;
//UpdatePages();
startime = Time.time;
} void Update()
{
if (Time.time < startime + delay) return;
UpdatePages();
//如果不判断。当在拖拽的时候要也会执行插值,所以会出现闪烁的效果
//这里只要在拖动结束的时候。在进行插值
if (isDrag == && pages.Count > )
{
rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, Time.deltaTime * smooting);
if (Mathf.Abs(rect.horizontalNormalizedPosition - targethorizontal) <= 0.001)
{ isDrag = ; timecount = ; }
}
if (isDrag == )
{
timecount += Time.deltaTime;
if (timecount > )
{
AutoMove();
rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, pages[curindex + dir * ], Time.deltaTime * smooting);
if (pages == null || OnPageChanged == null)
print("Error" + "," + (pages==null) + "," + (OnPageChanged == null));
OnPageChanged(pages.Count, curindex + dir * );
if (Mathf.Abs(rect.horizontalNormalizedPosition - pages[curindex + dir * ]) < 0.001)
{
timecount = ;
}
}
}
} public void AutoMove()
{
for (int i = ; i < pages.Count; i++)
{
if (Mathf.Abs(pages[i] - rect.horizontalNormalizedPosition) < 0.001)
{
curindex = i;
}
}
if (curindex == pages.Count - ) { dir = -; }
if (curindex == ) { dir = ; }
}
public void OnBeginDrag(PointerEventData eventData)
{
isDrag = ; }
public void MoveToPage(int target)
{
isDrag = ;
targethorizontal = pages [target];
if(target!=currentPageIndex)
{
currentPageIndex = target;
OnPageChanged(pages.Count, currentPageIndex);
}
}
public void OnEndDrag(PointerEventData eventData)
{
isDrag = ; float posX = rect.horizontalNormalizedPosition;
int index = ;
//假设离第一位最近
float offset = Mathf.Abs(pages[index] - posX);
for (int i = ; i < pages.Count; i++)
{
float temp = Mathf.Abs(pages[i] - posX);
if (temp < offset)
{
index = i; //保存当前的偏移量
//如果到最后一页。反翻页。所以要保存该值,
offset = temp;
}
} if(index!=currentPageIndex)
{
currentPageIndex = index;
OnPageChanged(pages.Count, currentPageIndex);
} targethorizontal = pages[index];
} void UpdatePages()
{
// 获取子对象的数量
int count = this.rect.content.childCount;
int temp = ;
for(int i=; i<count; i++)
{
if(this.rect.content.GetChild(i).gameObject.activeSelf)
{
temp++;
}
}
count = temp; if (pages.Count!=count)
{
if (count != )
{
pages.Clear();
for (int i = ; i < count; i++)
{
float page = ;
if(count!=)
page = i / ((float)(count - ));
pages.Add(page);
}
}
OnEndDrag(null);
}
}
}
unity3d之实现各种滑动效果的更多相关文章
- a 锚点跳转滑动效果
点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...
- Android Scroll分析——滑动效果产生
相对于在Android2.x版本上出现的长按.点击事件的效果,不得不说,滑动操作具有更好的用户体验.因此,从Android 4.X版本开始,出现了更多滑动操作的效果.越来越多第三方应用模仿这样的效果, ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件
bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...
- Android实现多页左右滑动效果,支持子view动态创建和cache
要实现多页滑动效果,主要是需要处理onTouchEvent和onInterceptTouchEvent,要处理好touch事件的子控件和父控件的传递问题. 滚动控制可以利用android的Scroll ...
- 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...
- 十六、Android 滑动效果汇总
Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...
- Android 滑动效果进阶篇(六)—— 倒影效果
上篇介绍了使用Animation实现3D动画旋转翻页效果,现在介绍图片倒影实现,先看效果图 本示例主要通过自定义Gallery和ImageAdapter(继承自BaseAdapter)实现 1.倒影绘 ...
- Android 滑动效果入门篇(二)—— Gallery
Gallery 是Android官方提供的一个View容器类,继承于AbsSpinner类,用于实现页面滑动效果. 从上面的继承关系可以看出,AbsSpinner类继承自AdapterView,因此我 ...
随机推荐
- php运行环境学习
web服务器,负责响应客户端请求.对于静态页面请求,会立即返回相应页面给客户端:如果是动态页面,web服务器会根据 httpd.conf中的AddType配置,提交给合适的动态脚本解析程序预处理,然后 ...
- Squid代理服务器(二)——配置Squid服务器
一.传统代理 (一)需求分析 局域网内,客户机访问自家的Web服务器,通过Squid代理服务器访问Web服务器,再由Squid反馈给客户机;在Squid主机上,构建Squid为客户机访问网站提供代理服 ...
- leetcode-551-Student Attendance Record I(判断是否出现连续几个相同字符)
题目描述: You are given a string representing an attendance record for a student. The record only contai ...
- 自己写的第一个Schema文件
<Schema name="FinSchema" description="财务模式" measuresCaption="财务模式"& ...
- FPGA基础学习(9) -- 复位设计
目录 1. 常见问题 2. 常见的复位方式 3. 合理的复位设计 3.1 复位电平 3.2 异步复位同步化 3.3 恰到好处的复位 4. 补充 4.1 所谓的上电初始化 参考文献 一开始接触到FPGA ...
- Maximum call stack size exceeded
写vue时报了如下错误 Maximum call stack size exceeded 栈溢出,因为在调用函数时使用了递归调用,而且没有写跳出条件,导致了该错误
- EndNote登陆Web账号时解决不断询问用户名密码
EndNote登陆Web账号时不断询问用户名密码怎么破?EndNote有个同步功能,在登陆Web账号时,EndNote不断的询问账号和密码,可是用户名和密码明明已经填写正确和完毕,就是登陆不上EndN ...
- Effective C++ 改善55个方法
美·Scott Meyers 候捷 电子工业 2011 刚才看到个会议时间有点晚,3.25论文都提交了 谷歌去广告的插件, 最后投了这个会议,刚刚好正合适.我说金钱与时间 ACCUSTOMING YO ...
- Vue.js 的精髓——组件
开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...
- javascript 将 table 导出 Excel ,可跨行跨列
<script language="JavaScript" type="text/javascript"> //jQuery HTML导出Excel ...