Unity UGUI实现滑动翻页效果

本文实例为大家分享了Unity UGUI实现滑动翻页效果的具体代码,供大家参考,具体内容如下

这个问题真的是老生常谈的事情了,不过在这里还是要说一下,以便以后之需

首先看一下效果图

最后在Content下面是一些Image

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

public class PageView : MonoBehaviour, IBeginDragHandler, IEndDragHandler {
  ScrollRect rect;      //滑动组件
 //public ScrollRect rect2;      //滑动组件2 

 private float targethorizontal = 0;    //滑动的起始坐标
 private bool isDrag = false;     //是否拖拽结束
 private List<float> posList = new List<float> ();//求出每页的临界角,页索引从0开始
 private int currentPageIndex = -1;
 public Action<int> OnPageChanged;

 private bool stopMove = true;
 public float smooting = 4;  //滑动速度
 public float sensitivity = 0;
 private float startTime;

 private float startDragHorizontal; 

 void Awake () {
  // rect = rect2;
  rect = transform.GetComponent<ScrollRect> ();
  // rect2 = transform.GetComponent<ScrollRect>();
  float horizontalLength = rect.content.rect.width - GetComponent<RectTransform> ().rect.width;
  //float horizontalLength2 = rect2.content.rect.width - GetComponent<RectTransform>().rect.width;
  posList.Add (0);
  for(int i = 1; i < rect.content.transform.childCount - 1; i++) {
   posList.Add (GetComponent<RectTransform> ().rect.width * i / horizontalLength);
  }
  posList.Add (1);
 }

 void Update () {
  if(!isDrag && !stopMove) {
   startTime += Time.deltaTime;
   float t = startTime * smooting;
   rect.horizontalNormalizedPosition = Mathf.Lerp (rect.horizontalNormalizedPosition , targethorizontal , t);
   // rect2.horizontalNormalizedPosition = Mathf.Lerp(rect2.horizontalNormalizedPosition, targethorizontal, t);
   if (t >= 1)
    stopMove = true;
  }
 }

 public void pageTo (int index) {
  if(index >= 0 && index < posList.Count) {
   rect.horizontalNormalizedPosition = posList[index];
   SetPageIndex(index);
  } else {
   Debug.LogWarning ("页码不存在");
  }
 }
 private void SetPageIndex (int index) {
  if(currentPageIndex != index) {
   currentPageIndex = index;
   if(OnPageChanged != null)
    OnPageChanged (index);
  }
 }

 public void OnBeginDrag (PointerEventData eventData) {
  isDrag = true;
  startDragHorizontal = rect.horizontalNormalizedPosition;
  // startDragHorizontal = rect2.horizontalNormalizedPosition;
 }

 public void OnEndDrag (PointerEventData eventData) {
  float posX = rect.horizontalNormalizedPosition;
  posX += ((posX - startDragHorizontal) * sensitivity);
  posX = posX < 1 ? posX : 1;
  posX = posX > 0 ? posX : 0;
  int index = 0;
  float offset = Mathf.Abs (posList[index] - posX);
  for(int i = 1; i < posList.Count; i++) {
   float temp = Mathf.Abs (posList[i] - posX);
   if(temp < offset) {
    index = i;
    offset = temp;
   }
  }
  SetPageIndex (index);

  targethorizontal = posList[index]; //设置当前坐标,更新函数进行插值
  isDrag = false;
  startTime = 0;
  stopMove = false;
 }
}

最后看一下,怎么设置的:

剩下的就没有什么了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Unity UGUI实现滑动翻页直接跳转页数

    本文实例为大家分享了Unity UGUI实现滑动翻页,直接跳转页数的具体代码,供大家参考,具体内容如下 首先看一下最终效果 其实这个功能基本上是老生常谈了,所以代码还是很简单 using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using System; public class Pa

  • UGUI ScrollRect实现带按钮翻页支持拖拽

    本文实例为大家分享了UGUI ScrollRect带按钮翻页支持拖拽的具体代码,供大家参考,具体内容如下 using UnityEngine; using System.Collections; using UnityEngine.UI; using UnityEngine.EventSystems; using System.Collections.Generic; using System; /// <summary> /// 略知CSharp /// </summary> p

  • UGUI实现图片拖拽功能

    这一篇博客我们来使用UGUI实现图片的拖拽功能. 说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标.),这两个坐标是不一样的,所以拖拽是就需要转换.因为鼠标的移动是屏幕坐标,而 UI 的移动是ugui坐标.转换的方法: RectTransformUtility.ScreenPointToLocalPointInRectangle ( - );这个方法可以把屏幕坐标转换成 ugui 坐标.至于屏幕

  • Unity UGUI实现滑动翻页效果

    本文实例为大家分享了Unity UGUI实现滑动翻页效果的具体代码,供大家参考,具体内容如下 这个问题真的是老生常谈的事情了,不过在这里还是要说一下,以便以后之需 首先看一下效果图 最后在Content下面是一些Image using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using

  • 使用jQueryMobile实现滑动翻页效果的方法

    本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢

  • android ViewPager实现滑动翻页效果实例代码

    实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; public class ReadViewPager extends ViewPager { public ReadV

  • Android ViewPager实现左右滑动翻页效果

    本文实例为大家分享了ViewPager实现左右滑动翻页效果展示的具体代码,供大家参考,具体内容如下 代码如下: package com.example.demo; import java.util.ArrayList; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import a

  • vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是

  • 微信小程序实现滑动翻页效果(完整代码)

    微信小程序实现滑动翻页效果,效果图如下所示: 源码: <view class="mainFrame"> <swiper class="container" indicator-dots="{{indicatorDots}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interva

  • 通过滑动翻页效果实现和移动端click事件问题

    前述 本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文 最近做了一个小活动,里面要用到一个效果:滑动翻页.大概是这样的: <!-- HTML代码 --> <div class="page-container"> <div class="page" style="background: #dc3b26">1</di

  • Unity Shader实现3D翻页效果

    本文实例为大家分享了Unity Shader实现3D翻页效果的具体代码,供大家参考,具体内容如下 参考文章:UnityShader使用Plane实现翻书效果 效果图: 原理:Shader顶点动画 在顶点着色器进行对顶点Y值的偏移(使用了Sin函数模拟翻页时产生的弯曲),对顶点X值的偏移实现纸张在翻页时的收缩(一般是不用收缩),最后对顶点进行围绕Z轴旋转实现Plane翻页(Z轴是本例的旋转轴,请根据你具体情况修改,上面的两个偏移同理). Shader "Unlit/PaperTurnMilkSha

  • 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; //滑动的起点

随机推荐