Unity3D UGUI实现翻书特效

本文实例为大家分享了Unity3D UGUI翻书展示的具体代码,供大家参考,具体内容如下

参考大佬的,链接找不到了,找到了再加在这。

下边是Shader代码:

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Personal/PageTurning" {
 Properties
 {
 _Color ("Color", Color) = (1,1,1,1)
 _MainTex("MainTex",2D)="White"{}
 _SecTex("SecTex",2D)="White"{}
 _Angle("Angle",Range(0,180))=0
 _Warp("Warp",Range(0,10))=0
 _WarpPos("WarpPos",Range(0,1))=0
 _Downward("Downward",Range(0,1))=0
 }
 SubShader
 {
 pass
 {
  Cull Back

  CGPROGRAM
  #pragma vertex vert
  #pragma fragment frag
  #include "UnityCG.cginc"

  struct v2f
  {
  float4 pos : POSITION;
  float2 uv : TEXCOORD0;
  };
  fixed4 _Color;
  float _Angle;
  float _Warp;
  float _Downward;
  float _WarpPos;
  sampler2D _MainTex;
  float4 _MainTex_ST;

  v2f vert(appdata_base v)
  {
  v2f o;
  v.vertex += float4(5,0,0,0);
  float s;
  float c;
  sincos(radians(-_Angle),s,c);
  float4x4 rotate={
  c,s,0,0,
  -s,c,0,0,
  0,0,1,0,
  0,0,0,1};
  float rangeF=saturate(1 - abs(90-_Angle)/90);
  v.vertex.y += -_Warp*sin(v.vertex.x*0.4-_WarpPos* v.vertex.x)*rangeF;
  v.vertex.x -= rangeF * v.vertex.x*_Downward;
  v.vertex = mul(rotate,v.vertex);

  v.vertex += float4(-5,0,0,0);
  o.pos = UnityObjectToClipPos(v.vertex);
  o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
  return o;
  }

  fixed4 frag(v2f i):COLOR
  {
  fixed4 color = tex2D(_MainTex,-i.uv);
  return _Color * color;
  }

  ENDCG
 }

 pass
 {
  Cull Front

  CGPROGRAM
  #pragma vertex vert
  #pragma fragment frag
  #include "UnityCG.cginc"

  struct v2f
  {
  float4 pos : POSITION;
  float2 uv : TEXCOORD0;
  };
  fixed4 _Color;
  float _Angle;
  float _Warp;
  float _Downward;
  float _WarpPos;
  sampler2D _SecTex;
  float4 _MainTex_ST;

  v2f vert(appdata_base v)
  {
  v2f o;
  v.vertex += float4(5,0,0,0);
  float s;
  float c;
  sincos(radians(-_Angle),s,c);
  float4x4 rotate={
  c,s,0,0,
  -s,c,0,0,
  0,0,1,0,
  0,0,0,1};
  float rangeF=saturate(1 - abs(90-_Angle)/90);
  v.vertex.y += -_Warp*sin(v.vertex.x*0.4-_WarpPos* v.vertex.x)*rangeF;
  v.vertex.x -= rangeF * v.vertex.x*_Downward;
  v.vertex = mul(rotate,v.vertex);

  v.vertex += float4(-5,0,0,0);
  o.pos = UnityObjectToClipPos(v.vertex);
  o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
  return o;
  }

  fixed4 frag(v2f i):COLOR
  {
  float2 uv = i.uv;
  uv.x = -uv.x;
  fixed4 color = tex2D(_SecTex,-uv);
  return _Color * color;
  }
  ENDCG
 }
 }
}

下面是UI代码:

using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class FanShuUI : UIBase
{
  private GameObject Plane;
  private Material m_Material;
  private Coroutine effect;
  private Image LeftPage;
  private Image RightPage;
  private void Awake()
  {
    InitUI();
  }
  public override void InitUI()
  {
    Plane = GetGameObject("Plane");
    LeftPage = GetComp<Image>("LeftPage");
    RightPage = GetComp<Image>("RightPage");
    Plane.SetActive(false);
    m_Material = Plane.GetComponent<MeshRenderer>().material;
  }
  public void PlayPageTurnEffect(bool isLeft = true)
  {
    if (!gameObject.activeSelf)
    {
      return;
    }
    if (effect != null)
    {
      StopCoroutine(effect);
    }
    effect = StartCoroutine(FanShuEffect(0.5f, isLeft));
  }
  public void ShowRightImage(string right)
  {
    RightPage.gameObject.SetActive(true);
    RightPage.sprite = ResourcesMgr.Instance.LoadObj<Sprite>(right);
  }
  public void ShowLeftImage(string left)
  {
    LeftPage.gameObject.SetActive(true);
    LeftPage.sprite = ResourcesMgr.Instance.LoadObj<Sprite>(left);
  }
  private IEnumerator FanShuEffect(float time, bool isLeft)
  {
    LeftPage.gameObject.SetActive(false);
    RightPage.gameObject.SetActive(false);
    Plane.SetActive(true);
    int angle = (int)(180 * 0.1f);
    for (int i = 0; i < 10; i++)
    {
      if (isLeft)
      {
        m_Material.SetFloat("_Angle", angle * i);
      }
      else
      {
        m_Material.SetFloat("_Angle", 180 - angle * i);
      }
      yield return new WaitForSeconds(time * 0.1f);
    }
    if (isLeft)
    {
      m_Material.SetFloat("_Angle", 180);
    }
    else
    {
      m_Material.SetFloat("_Angle", 0);
    }
    Plane.SetActive(false);
    OnEffectOver();
  }
  private void OnEffectOver()
  {
    //--callback
  }
}

左右两页纸可以在翻书结束动态加载图片。

下边是Plane的面板信息:

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

(0)

相关推荐

  • Unity Shader实现翻书效果

    今天实现一个简单的翻书的效果,话不多说,先上一张效果图: 这里就随便用的一张纹理了,我们还是称为"翻木板"吧,哈哈. 实现过程: 其实这个效果实现起来还是挺简单的,大概思路其实就是 让所有顶点都绕Z轴旋转,并且通过正余弦使之带有一点弧度. 下面开始让我们一步一步的实现该效果. 首先打开Unity新建一个工程,场景,并且创建一个名为openBookEffect的Shader文件,删掉原本多余的代码. 第一步,我们先让它绕z轴旋转起来 这里就要用到一个旋转矩阵了,让顶点左乘该矩阵,就能得到

  • Unity3D UGUI实现翻书特效

    本文实例为大家分享了Unity3D UGUI翻书展示的具体代码,供大家参考,具体内容如下 参考大佬的,链接找不到了,找到了再加在这. 下边是Shader代码: // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Personal/PageTurning" { Properties { _Color ("Color", Color) = (

  • 原生JS实现翻书特效

    本文给大家分享一个用原生JS实现的翻书效果图,效果如下: 实现代码如下,欢迎大家复制粘贴. <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生JS实现翻书特效</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none;

  • 基于javascript html5实现3D翻书特效

    这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果.书本中的文字和图片也会3D展示,非常酷. 在线演示 源码下载 HTML代码 <div class="book p3d"> <div class="back-cover p3d"> <div class="page back flip"></div> <div

  • js图片翻书效果代码分享

    这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆的照片,还可以永久保存,是不是很有心意,推荐给大家,有需要的小伙伴可以学习学习. 运行效果图: 大家可以先运行一下    -------------------------------------效果运行----------------------------------------- 为大家分享的

  • Android自定义控件eBook实现翻书效果实例详解

    本文实例讲述了Android自定义控件eBook实现翻书效果的方法.分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageView; public class Book extend

  • jquery实现的点击翻书效果代码

    本文实例讲述了jquery实现的点击翻书效果代码.分享给大家供大家参考,具体如下: 这是自写一个翻书的Js效果,基于jquery-1.4.2.min.js插件实现,还正在完善中,希望大家能喜欢,我觉得不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-click-cha-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

  • 基于JS实现翻书效果的页面切换样式

    本文给大家分享一段代码,基于js代码实现的翻书效果的页面切换样式,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <

  • 原生JS实现图片翻书效果

    下面给大家分享基于原生js实现的图片翻书效果,具体代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS实现图片翻书效果-懒人图库</title> <META

  • 移动端H5开发 Turn.js实现很棒的翻书效果

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想,后来想起自己曾经做过PC版的翻书效果,当时使用的是Turn.js,查过其相关API后,整个人突然豁然开朗呀,使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀.现在将个人的学习总结如下,若有不正确的地方,欢迎读者给与批评指正! Turn.js的官方网址: http://www.tur

  • JS实现图片翻书效果示例代码

    picture.html 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS实现图片翻书效果</title> <META http-equiv=imag

随机推荐