Unity实现引导页效果

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

效果图:

1、创建Canvas,设置RenderMode=ScreenSpace-Overlay,UIScaleMode = ScaleWithScreenSize,
ReferenceResolution(x=1080,y=1920)

2、创建一个RawImage,命名为(parentGoImg),并做如下设置

3、在parentGoImg下建几个RawImage,赋予想展示的图片,并做如下设置

4、添加如下脚本给parentGoImg

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

public class Asd : MonoBehaviour,IBeginDragHandler, IDragHandler,IEndDragHandler
{
  /// <summary>
  /// 可移动的最大最小X轴坐标
  /// </summary>
  private float minX, maxX;
  /// <summary>
  /// 开始触摸时,算出偏移值,防止跳变
  /// </summary>
  private float offsetX;

  /// <summary>
  /// 灵敏度
  /// </summary>
  private float sensitivityX;
  /// <summary>
  /// 当前显示第几页
  /// </summary>
  private int currentShowIndex = 1;

  private void Start()
  {
    (transform as RectTransform).pivot = new Vector2(0, 0.5f);
    Debug.Log(Screen.width + "  " + Screen.height);
    for (int i = 0; i < transform.childCount; i++)
    {
      (transform.GetChild(i) as RectTransform).sizeDelta = new Vector2(0, 0);
      //canvas的RenderMode要设置成Overlay形式
      //这里i*1080是因为canvas的UIScaleMode设置成了ScaleWithScreenSize,Resolution为x=1080,y=1920
      //如果canvas的UIScaleMode设置成ConstantPixelSize则吧这里的i*1080改成i*Screen.width
      (transform.GetChild(i) as RectTransform).anchoredPosition = new Vector2(i * 1080.0f, 0);
    }

    minX = -((transform.childCount - 1) * Screen.width);
    maxX = 0.0f;
    //如果移动超过页面的五分之一,则切换页面
    sensitivityX = Screen.width / 5;
  }

  public void OnBeginDrag(PointerEventData eventData)
  {
    offsetX = transform.position.x - Input.mousePosition.x;
  }

  public void OnDrag(PointerEventData eventData)
  {
    //将物体坐标限制在最大最小X轴坐标内
    transform.position = new Vector2(Input.mousePosition.x + offsetX, transform.position.y);
    if (transform.position.x <= minX)
    {
      transform.position = new Vector2(minX, transform.position.y);
    }
    else if (transform.position.x >= maxX)
    {
      transform.position = new Vector2(maxX, transform.position.y);
    }
  }

  public void OnEndDrag(PointerEventData eventData)
  {
    //判断坐标,是否需要切换页面
    if (transform.position.x > GetLeftX())
    {
      currentShowIndex--;
    }
    else if (transform.position.x < GetRightX())
    {
      currentShowIndex++;
    }
    transform.DOMoveX(-(currentShowIndex - 1) * Screen.width, 0.2f);
  }

  float GetLeftX() {
    return -((currentShowIndex - 1) * Screen.width - sensitivityX);
  }

  float GetRightX() {
    return -((currentShowIndex - 1) * Screen.width + sensitivityX);
  }
}

运行即可看到效果

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

(0)

相关推荐

  • Unity实现新手引导镂空效果

    本文实例为大家分享了Unity实现新手引导镂空效果的具体代码,供大家参考,具体内容如下 一.实现思路 创建有8个顶点的Mesh,内外边界都是四边形(矩形).只生成内.外边之间的Mesh,内层矩形就产生了镂空部分,外层的4个顶点,是组件自身RectTransform的四个顶点,内层的4个顶点,使用镂空目标(_target)RectTransform的四个顶点.确定内层的顶点的时候需要注意,多数情况下_target和HollowOutMask都不在同一个本地坐标空间,所以需要使用CalculateR

  • Unity Shader实现新手引导遮罩镂空效果

    这两天实现了下新手引导需要的遮罩镂空shader效果,记录一下. 1.圆形镂空shader代码:  //计算片元世界坐标和目标中心位置的距离 float dis = distance(IN.worldPosition.xy, _Center.xy); //过滤掉距离小于(半径-过渡范围)的片元 clip(dis - (_Radius - _TransitionRange)); //优化if条件判断,如果距离小于半径则执行下一步,等于if(dis < _Radius) fixed tmp = st

  • Unity实现引导页效果

    本文实例为大家分享了Unity实现引导页效果的具体代码,供大家参考,具体内容如下 效果图: 1.创建Canvas,设置RenderMode=ScreenSpace-Overlay,UIScaleMode = ScaleWithScreenSize, ReferenceResolution(x=1080,y=1920) 2.创建一个RawImage,命名为(parentGoImg),并做如下设置 3.在parentGoImg下建几个RawImage,赋予想展示的图片,并做如下设置 4.添加如下脚本

  • Android实现绕球心旋转的引导页效果

    现在很多APP都会出现Android实现绕球心旋转的引导页效果,一个类似小车一直在往前开的旋转式动画效果. 先看一下预览效果: 嗯,整体效果还算理想,基本实现了页面绕屏幕底部中心旋转. 这里我们用到了Android系统的一个组件ViewFlipper,该控件的主要作用是为其中的View切换提供动画效果,主要的方法如下: setInAnimation:设置View进入屏幕时的动画. setOutAnimation:设置View退出屏幕时的动画. showNext:调用该方法可以显示下一个View.

  • unity实现翻页效果

    本文实例为大家分享了unity实现翻页效果的具体代码,供大家参考,具体内容如下 一.示意图 二.步骤 创建物体ToPanel:添加组件ScrollRect, 在下面创建一个空物体用来装需要移动的子物体, 创建一个Scrollbar: 三.代码 下面展示一些 内联代码片. using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; public class

  • Android使用ViewPager实现启动引导页效果

    本文实例为大家分享了Android实现启动引导页效果的具体代码,供大家参考,具体内容如下 ViewPagerTwoActivity.java package cn.edu.zufe.app001; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.PagerAdapter; import androidx.vie

  • jQuery插件pagewalkthrough实现引导页效果

    现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮罩引导层,实现页面功能引导功能,引导完成显示页面内容. html代码: <div id="walkthrough-content"> <div id="walkthrough-1"> <h3>欢迎来到网页引导示例DEMO演示页<

  • Android简单实现引导页

    本文实例为大家分享了Android简单实现引导页的具体代码,供大家参考,具体内容如下 一.思路 我们选择ViewPager + View + ImageView 来实现引导页效果,ViewPager用来实现滑动,View则是用来显示每页的图像,而ImageView则是用来实现下面的小红点. 二.XML代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&qu

  • Vue使用driver.js做引导页

    目录 简介及使用教程 特点: 安装 使用 引导页效果 轻量级.无依赖的原生 JavaScript 引擎,可将用户的注意力集中在整个页面上:这是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库. 简介及使用教程 Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库.它没有依赖项,支持所有主要浏览器. 特点: 简单:简单易用,完全没有外部依赖 高度可定制:有一个强大的api,可以用于你希望突出显示任何内容 高亮显示:页面功能介绍上的任意

  • iOS 引导页的镂空效果实例

    初衷 最近项目新功能更改较大,产品童鞋要求加入新功能引导,于是一口气花了两天的时间做了一个引导页,当然加上后面的修修补补的时间,就不只两天了,不过这事情其实是一劳永逸的事情,值得做.同时为了能够更好的复用,我把它做成了pod库,项目地址在这里:EAFeatureGuideView. EAFeatureGuideView能做什么 EAFeatureGuideView是UIView的一个扩展,用来做新功能引导提示,达到这样的效果: 局部区域高亮(可以设置圆角) 有箭头指向高亮区域 可以设置一段介绍文

  • Unity UGUI教程之实现滑页效果

    简介 项目需要...直接展示效果吧: 原理 使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果. 实现过程 1.创建两个panel,上面的panel用于显示,下面的panel用于存放按钮 2.在TopPanel上添加ScrollRect脚本,用于滑动 3.在TopPanel下创建一个新的Panel,并在子Panel下拜访要显示的对象 4.将该子Panel设置为ScrollRect的活动对象 5.为ScrollRect添加Scroll

  • Unity UGUI实现滑动翻页效果

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

随机推荐