NGUI 滑动翻页效果

using UnityEngine;
using System.Collections;

public class PageView : MonoBehaviour
{
    const int ITEM_NUM = 2;        //总页数
    const int PAGE_WIDTH = 2048;    //页宽
    const float DRAG_SPEED = 0.5f;    //翻页时间
    const int DRAG_OFFECT = 30;    //滑动的起点和终点的差需大于这个数才能触发翻页效果

    float beganX = 0;
    float beganY = 0;            //鼠标按下的坐标

    int curIndex = 1;            //当前页数,默认为第一页

    bool isPlay = false;        //是否正在翻页
    bool isPress = false;        //鼠标是否按下
    bool isPageFoot = false;    //当前是否处于页尾
    bool isHomePage = true;        //当前是否处于首页

    string left = "left";        //左滑动画的name
    string right = "right";        //右滑动画的name

    GameObject[] Item_Objects;

   // Use this for initialization
   void Start ()
   {
        this.Init ();
   }

    void Init()
    {
        Item_Objects = new GameObject[ITEM_NUM];

        for(int i = 1; i <= ITEM_NUM; ++i)
        {
            Transform trans = this.transform.FindChild("item" + i);

            if(trans)
            {
                GameObject spr = trans.transform.FindChild("Background").gameObject;
                spr.AddComponent<UIEventListener>();
                UIEventListener.Get(spr.gameObject).onPress = OnPressEvent;
            }
            Item_Objects[i - 1] = trans.gameObject;
        }
    }

    //鼠标按下事件监听
    void OnPressEvent(GameObject obj,bool isDown)
    {
        float endX;
        float endY;
        if (isDown)
        {
            beganX = UICamera.lastTouchPosition.x;
            beganY = UICamera.lastTouchPosition.y;

            isPress = true;
        } else
        {
            endX = UICamera.lastTouchPosition.x;
            endY = UICamera.lastTouchPosition.y;

            if (isPress)
            {
                if(isPlay == false)
                {
                    if(endX - beganX > DRAG_OFFECT)
                    {
                        if(isHomePage == false)
                        {
                            RightDrag();
                        }
                    }else if(endX - beganX < DRAG_OFFECT){
                        if(isPageFoot == false)
                        {
                            LeftDrag();
                        }
                    }
                }
            }
            isPress = false;
        }
    }

    //向左滑
    void LeftDrag()
    {
        isPlay = true;

        float x = this.transform.localPosition.x - PAGE_WIDTH;

        TweenPosition leftTween = TweenPosition.Begin (this.gameObject,DRAG_SPEED,new Vector3(x,0,0));
        leftTween.method = UITweener.Method.EaseInOut;
        leftTween.callWhenFinished = "callback";
        leftTween.name = left;
        leftTween.Reset ();

    }

    //向右滑
    void RightDrag()
    {
        isPlay = true;

        float x = this.transform.localPosition.x + PAGE_WIDTH;

        TweenPosition rightTween = TweenPosition.Begin (this.gameObject,DRAG_SPEED,new Vector3(x,0,0));
        rightTween.method = UITweener.Method.EaseInOut;
        rightTween.callWhenFinished = "callback";
        rightTween.name = right;
        rightTween.Reset ();

    }

    //动画结束的回调函数
    void callback(UITweener tween)
    {
        isPlay = false;

        if (tween.name == left)
        {
            curIndex ++;
        } else if (tween.name == right)
        {
            curIndex --;
        }
        if (curIndex == 1)
        {
            isHomePage = true;
        }else
        {
            isHomePage = false;
        }
        if(curIndex == ITEM_NUM){
            isPageFoot = true;
        }else
        {
            isPageFoot = false;
        }

    }

}
时间: 2024-11-12 23:14:11

NGUI 滑动翻页效果的相关文章

微信里经常看到的滑动翻页效果,slide

上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大容器tranlateY(性能应该是最好的,但是如果增删一页的话对css影响很大,如果用sass或less除外) html: <!DOCTYPE html> <html> <head> <title></title> <meta name=&qu

FlipViewPager 对item实现左右对折滑动翻页效果《IT蓝豹》

FlipViewPager 对item实现左右对折滑动翻页效果 <FlipViewPager 对每一条item实现左右对折滑动翻页效果>,解决左右滑动和上下滑动的事件分发处理机制.内部实现如下:用ListView试下,对listview设置adapter,这个adapter继承BaseFlipAdapter<Friend>,然后对每一个item进行view处理,部分代码如下:class FriendsAdapter extends BaseFlipAdapter<Friend

桌面浏览器实现滑动翻页效果(Swiper)

还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chinaz.com/free/2013/0626/307273.shtml 我自己的感觉是:功能强大.示例丰富.文档详细. 官方网站:http://www.chinaz.com/free/2013/0626/307273.shtml GitHub地址:https://github.com/nolimits

实现手机滑动翻页效果

var nStartX,nEndX,nDetalX; function touchToNextPage(){ document.addEventListener('touchstart', function (e) { //获得手指开始碰触屏幕时的x坐标 nStartX = e.touches[0].pageX; },false); document.addEventListener('touchmove', function (e) { //获得手指滑动过程中的x坐标 nEndX =Numbe

vue-awesome-swiper - 基于vue实现h5滑动翻页效果

说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里没有血),在我们小白需要用到两个技术结合的时候,他们早已冲向前为我们杀出了一条路,准备好了实现用的技术和方案.有时候我就在想,我的理想大概就是站在自己现在仰望的代码塔的顶峰,像他们一样,不断输出自己的热情和力量,产出一个可以为人所用的东西,以能够为后来人发光发热吧. vue-awesome-swip

js实现移动端手指左右上下滑动翻页效果

var ele = document.getElementsByClassName("img-box")[0]; var beginX, beginY, endX, endY, swipeLeft, swipeRight; ele.addEventListener('touchstart', function (event) { event.stopPropagation(); event.preventDefault(); beginX = event.targetTouches[0

【jQueryMobile】使用jQueryMobile实现滑动翻页的效果

滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前写的<[jQuery]论手机浏览器中拖拽动作的艰难性>(点击打开链接)中的观点一直,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢? 一.基本目标 在手机浏览器中的jQueryMobile框架页中现实滑动手势翻页的

android开发教程:android手势翻页效果

听麦子学院android开发老师说要实现手势翻页效果,主要用到ViewFlipper和GestureDetector.  ViewFlipper变化当前显示内容,GestureDetector监听手势.  用于多页的展示非常酷.  现在我就给大家简单说明下,  首先创建工程:TestFlip,创建主Activity:TestFlip.  在res/layout/main.xml中添加flipper信息,如下:  Java代码   1. <?xml version="1.0" en

微信翻页效果

今天闲得蛋疼,重构了之前写的微信翻页效果. 先上地址,觉得可以给颗星星,觉得有问题请大力吐槽. github:https://github.com/skyweaver213/slide 3个demo地址:http://skyweaver213.github.io/slide/widget/slide1/slide.htmlhttp://skyweaver213.github.io/slide/widget/slide2/slide.htmlhttp://skyweaver213.github.i