1. 程式人生 > >untiy ugui 翻頁效果的scroll

untiy ugui 翻頁效果的scroll

 public class ScrollPage : MonoBehaviour, IBeginDragHandler, IEndDragHandler
    {
        private ScrollRect scrollRect;
        private float[] pageArray;
        public Toggle[] ToggleArray;
        public float speed;
        private float targetHorizontalPosition;
        private float m_fTrigerOffset;                                              // 滑動觸發翻頁的偏移量;
        private float m_fDragStartPosX;                                             // 開始滑動的初始X軸位置;
        private int m_nIndex;                                                       // 當前頁序號;
        private bool isDraging;
        public Action<int> m_PageChangeCallBack;


        private void Awake()
        {
            speed = 5f;
            targetHorizontalPosition = 0f;
            m_fDragStartPosX = 0;                                             // 開始滑動的初始X軸位置;
            m_nIndex = 0;                                                       // 當前頁序號;
            isDraging = false;

            scrollRect = transform.GetComponent<ScrollRect>();
            m_fTrigerOffset = transform.GetComponent<RectTransform>().sizeDelta.x * 0.22f;
        }

        private void Start()
        {
            pageArray = new float[ToggleArray.Length];
            for (int i = 0; i < pageArray.Length; i++)
            {
                pageArray[i] = (float)i / (pageArray.Length - 1);
            }

            for (int i = 0; i < ToggleArray.Length; i++)
            {
                int nIndex = i;
                ToggleArray[i].isOn = i == 0;
                ToggleArray[i].onValueChanged.AddListener((bool isChange) =>
                {
                    if (isChange)
                    {
                        OnClickToggle(nIndex);
                    }
                });
            }
        }


        void Update()
        {
            if (!isDraging)
            {
                scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, targetHorizontalPosition, Time.deltaTime * speed);
            }

        }
        public void OnBeginDrag(PointerEventData eventData)
        {
            isDraging = true;
            m_fDragStartPosX = eventData.position.x;
        }
        public void OnEndDrag(PointerEventData eventData)
        {
            isDraging = false;
            int nIndex = m_nIndex;
            float fXOffset = eventData.position.x - m_fDragStartPosX;
            if (fXOffset > m_fTrigerOffset && nIndex > 0)
            {
                nIndex--;
            }
            else if (fXOffset < -m_fTrigerOffset && nIndex < pageArray.Length - 1)
            {
                nIndex++;
            }

            for (int i = 0; i < ToggleArray.Length; i++)
            {
                ToggleArray[i].isOn = i == nIndex;
            }
        }

        void OnClickToggle(int nIndex)
        {
            targetHorizontalPosition = pageArray[nIndex];
            for (int i = 0; i < ToggleArray.Length; i++)
            {
                ToggleArray[i].isOn = i == nIndex;
            }
            m_nIndex = nIndex;

            if(m_PageChangeCallBack != null)
            {
                m_PageChangeCallBack(m_nIndex);
            }
        }
    }

相關推薦

untiy ugui 效果scroll

public class ScrollPage : MonoBehaviour, IBeginDragHandler, IEndDragHandler { private ScrollRect scrollRect; private

UGUI-Scroll View實現圖片效果

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; pu

iOS 相似淘寶商品詳情查看效果的實現

nim anim bool with animate resource tlab 更改 tro 基本思路: 1、設置一個 UIScrollView 作為視圖底層,而且設置分頁為兩頁 2、然後在第一個分頁上加入一個 UITableView 而且設置表格

turn.js (效果)總結

play blog spa == 多少 硬件加速 rip key num Turn.js是一個內置的jQuery翻頁插件 1 html中引入<script type="text/javascript" src="js/turn.js"></script&g

vue-awesome-swiper - 基於vue實現h5滑動效果

return wheel res 初始化 回調 param get export tick 說到h5的翻頁,很定第一時間想到的是swiper。但是我當時想到的卻是,vue裏邊怎麽用swiper?! 中國有句古話叫:天塌下來有個高的頂著。 在前端圈裏,總有前仆後繼的仁人誌

vue-awesome-swiper極速快三平臺出租 - 基於vue實現h5滑動效果

www. 準備 其中 use 代碼 dsl 有時 module 大神 中國極速快三平臺出租【大神源碼論壇】dsluntan.com 【布丁源碼論壇】budingbbs.com 企娥3393756370有句古話叫:天塌下來有個高的頂著。 在前端圈裏,總有前仆後繼的仁人誌士相

Android效果原理實現之的嘗試

                尊重原創轉載請註明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵權必究!炮兵鎮樓在《自定義控制元件其實很簡單》系列的前半部分中我們用了整整六節近兩萬字兩百多張配圖講了Android圖形的繪製,雖然

Android效果原理實現之曲線的實現

                尊重原創轉載請註明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵權必究!炮兵鎮樓上一節我們通過引入折線實現了頁面的摺疊翻轉效果,有了前面兩節的基礎呢其實曲線的實現可以變得非常簡單,為什麼這麼說呢?

Android效果原理實現之引入折線

                尊重原創轉載請註明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵權必究!炮兵鎮樓PS:寫得太嗨忘了說明一點,下面文章中提到的“長邊”(也就是程式碼部分中出現的sizeLong)指的是摺疊區域直角三

android開發之&使用ViewPager加gridView實現選單按鈕分滑動(類似QQ表情選擇效果

剛做的專案中要用到選單分頁,以前沒做過,仔細想了想,既然是分頁,肯定就少不了ViewPager,大家都知道gridView可以實現九宮格,剛好滿足我們的需求,我做的是gridview單行顯示,大家如果需要向QQ表情一樣多行顯示,直接修改資料來源就可以。 好了,上程式碼 pu

scrollview設定滾動方向、自定義效果尺寸

一、設定滾動方向 禁止UIScrollView垂直方向滾動,只允許水平方向滾動 scrollview.contentSize =  CGSizeMake(你要的長度, 0);  禁止UIScrollView水平方向滾動,只允許垂直方向滾動 scrollview.co

js簡單效果邏輯例項

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title>  </head><style type="text/cs

2014-11-6Android學習------Android 模擬效果實現--------貝塞爾曲線(二)

寫一篇文章很辛苦啊!!! 轉載請註明,聯絡請郵件[email protected] 我學習Android都是結合原始碼去學習,這樣比較直觀,非常清楚的看清效果,覺得很好,今天的學習原始碼是網上找的原始碼 百度搜就知道很多下載的地方  網上原始碼的名字叫:A

微信小程式 效果

.wxml <swiper indicator-dots="YES" autoplay="YES" interval="5000" duration="500" circular = "YES"> <block wx:for="{{banner}}

水平recyclerview實現效果

前言:recyclerview 是一個非常強大的佈局檔案,擴充套件性極強。因此用它實現翻頁效果,效果會非常棒。本文只是實現翻頁,至於動畫和方向自行擴充套件。 方法:如果不熟悉recyclerview使用,可參考鴻陽大神的文章 1.翻頁的方向,預設向右或者

iOS 類似淘寶商品詳情檢視效果的實現

基本思路: 1、設定一個 UIScrollView 作為檢視底層,並且設定分頁為兩頁 2、然後在第一個分頁上新增一個 UITableView 並且設定表格能夠上提載入(上拉操作即為讓檢視滾動到下一頁) 3、 在第二個分頁上新增一個 UIWebView 並且

基於vue實現上下滑動效果

    18年年底的時候,一直在做年度報告的H5頁面,因為專案需要,需要實現上下滑動翻頁,並且上滑的頁面比正常頁面的比例要縮小一定比例。     效果類似於http://www.17sucai.com/pins/demo-show?id=7834,這個連結是基於jquery實現的,我寫的是和這個例子效果一樣

viewpager實現效果(fragment)

viewpager的運用核心在於介面卡的編寫,及最終的setadapter(adapter) 谷歌官方認為,ViewPager應該和Fragment一起使用時,此時ViewPager的介面卡是FragmentPagerAdapter,當你實現一個Fragmen

Android之實現上下左右效果

Aphid FlipView是一個能夠實現Flipboard翻頁效果的UI元件。 下載完畢後匯入到當前你的專案中,我們來下上下翻頁的效果圖:               直接貼出程式碼

靜態頁面效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Pages</title><meta name="Generator" conte