Unity3D实现待机状态图片循环淡入淡出

本文实例为大家分享了Unity3D实现图片循环淡入淡出的具体代码,供大家参考,具体内容如下

1、说明

由于近期项目需求,在网上找了淡入淡出的代码,但都是两张图片淡入淡出结束后就没有了(可能我没找到其他好的作品)。所以我做了简单的扩展

2、简单思路

既然待机状态下的图片淡入淡出切换,所以,首先要判断何时为待机状态(即屏幕没有任何操作的情况下);其次,图片静止一段时间后,开始淡入淡出,第一张图片淡入,第二张淡出;接着图片再次静止一段时间,然后接着下次的淡入淡出,但因为是循环淡入淡出,所以要考虑重新加载第一张照片(再下一次淡入淡出要重新加载第二张照片)。还有在淡入淡出的循环中还要考虑图片alpha值从1到0然后从0到1的循环(可以避免闪烁淡入淡出,有种自然的感觉);最后判断进入非待机状态,即有操作。

3、代码实现及分析

引入UI命名空间,用UI做淡入淡出效果;

using UnityEngine.UI;

public Image nobody_Img1;
public Image nobody_Img2;//淡入淡出的两张图片
public float fadeTotalTime=5f;//淡入淡出的时间
public float imageStaticTime=3f;//图片静止时间
public float runningTime=10f;//程序运行时间
public int StandbyTime=5;//无操作时间
/*
[HideInInspector]
public bool standby=false;
*/

private bool standby=false;//是否处于待机状态
private float startTime=0;//开始待机时间
private int imgIndex=2;//图片索引(图片名字)
private float remainder=0//下一次待机开始时间
private bool hasStartNext=false;//是否已经加载过下一张待机图片
private bool canLoad=true;//是否可以加载图片
private bool startCountTime=false;//是否可以统计待机时间
private int standbyTime=0;//待机时间
private int time=0;//帧数,用于统计待机时间
private Vector3 prevMousePos=Vector3.zero;//鼠标上一帧所处的位置

/*变量说明
判断屏幕无操作(而且鼠标的位置要没有变化)后就开始统计无操作的时间(即startCountTime=true,time++(放在FixedUpdate函数中),standbyTime++),当standbyTime超过规定时间,standby=true;开始图片淡入淡出
*/

/*
程序刚运行时,不管有没有操作,十秒钟后开始统计开机时间
*/
IEnumerator StartPrepareStandby()
{
 yield return new WaitForSeconds(runningTime);
 startCountTime=true;//开始统计待机时间
}

/*
进入待机后,显示两张图片,并静止一段时间后在循环淡入淡出
*/
IEnumerator StartFirstFade()
{
 //现实两张图片
 nobody_Img1.enabled=true;
 nobody_Img2.enabled=true;
 yield return new WaitForSeconds(imageStaticTime);
 //重置时间
 startTime=Time.time;//开始待机时间等于程序现在的时间
 remainder=startTime;//记录淡入淡出开始的时间
 //开始待机
 standby=true;
}

/*
第一次淡入淡出后开始以后的淡入淡出循环
*/
IEnumerator StartNextFade()
{
 if(imgIndex>=4)//判断图片索引是否越界(图片索引也是图片名)
  imgIindex=0;
 //canLoad在这用于判断加载哪一张图片
 if(canLoad)
 {
  nobody_Img1.sprite=Resources.Load(imgIndex.ToString(),typeof(Sprite)) as Sprite;
 }
 else
 {
  nobody_Img2.sprite=Resources.Load(imgIndex.ToString(),typeof(Sprite)) as Sprite;
 }
 canLoad = !canLoad;//取反,用于区分图片的加载
 imgIndex++;//图片索引累加,下次加载下一张图片
 yield return new WaitForSeconds(imageStaticTime);
 //重置淡入淡出时间
 startTime=Time.time;
 remainder=startTime;
 //图片已加载,等待下次的加载
 hasStartNext=false;
}

void Start()
{
 //调用开始统计待机时间的协程
 StartCoroutine(StartPrepareStandby());
}

void FixedUpdate()
{
 if(startCountTime)
 {//无操作下统计时间
  if(Input.mousePosition==prevMousePos)
  {//判断鼠标是否还在移动
   time++;
  }
  else
  {//鼠标移动时,重置待机时间
   standbyTime=0;
   time=0;
  }
 }
 if(time>=50)
 {
  time=0;
  standbyTime++;//待机秒数
 }
 if(standbyTime>StandbyTime)
 {//超出规定的无操作的时间即认为待机状态
  standbyTime--;//开始第一次图片淡入淡出协程只执行一次
  startCountTime=false;//停止待机时间的统计
  StartCoroutine(StartFirstFade());//开始第一图片淡入淡出
 }
}

void Update()
{
 if(Input.GetMouseButtonDown(0))
 {//每次鼠标按下都停止待机及相关的判断
  StopCoroutine(StartNextFade());//停止淡入淡出
  standby=false;//退出待机状态
  //保留当前图片的alpha值
  if(canLoad)
  {//根据当前canLoad来判断那一张照片在淡入淡出
   nobody_Img1.color=new Color(1,1,1,1);
   nobody_Img2.color=new Color(1,1,1,0);
  }
  else
  {
   nobody_Img1.color=new Color(1,1,1,0);
   nobody_Img2.color=new Color(1,1,1,1);
  }
  //隐藏待机图片
   nobody_Img1.enabled=false;
   nobody_Img2.enabled=false;
   //重置待机时间
   standbyTime=0;
   time=0;
 }
 else if(Input.GetMouseButtonUp(0))
 {//鼠标每次抬起都认为是无操作
  startCountTime=true;
  prevMousePos=Input.mousePosition;
 }
 if(standby)
 {
  if(Time.time<startTime+fadeTotalTime)
  {
   float alphaValue=(Time.time-remainder)/fadeTotalTime;
   if(canLoad)
   {
    nobody_Img1.color=new Color(1,1,1,1-alphaValue);
    nobody_Img2.color=new Color(1,1,1,alphaValue);
   }
   else
   {
    nobody_Img1.color=new Color(1,1,1,alphaValue);
    nobody_Img2.color=new Color(1,1,1,1-alphaValue);
   }
  }
  else
  {
   if(!hasStartNext)
   {
    hasStartNext=true;//已开始加载下一张照片
    StartCoroutine(StartNextFade());//开始下一次淡入淡出协程
   }
  }
 }
 prevMousePos=Input.mousePosition;//记录每一帧鼠标的位置
}

总结

虽然此次感觉思路较为清晰但还是花费了很长时间来完成这一简单的程序;我也深信对这一简单的程序,肯定还有简单的做法;自我感觉自己的程序有点绕且繁琐(对程序的扩展也可以引用设计模式的单例模式或其他模式进行再其他脚本处的待机状态判断)。欢迎各位指点一二!

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

(0)

相关推荐

  • Unity3D实现模型淡入淡出效果

    开发中我们不仅需要UI界面淡入淡出,有时候还需要模型淡入淡出.我们在面板上修改color的a值时发现并没有效果.那是因为我们设置的RenderingMode是Opaque.官方标准shader中的Opaque pass段是不能显示半透明效果的,所以我们需要设置RenderingMode为Fade或者Transparent.然后在修改color的a值,达到淡入淡出的效果.效果如下: 通常我们淡入一个模型只会传入这个模型的GameObject,所以我们自写一个类来处理这个模型淡入的一些事件.代码如下

  • Unity实现背景图片淡入淡出效果

    本文实例为大家分享了Unity实现背景图片淡入淡出的具体代码,供大家参考,具体内容如下 如题. 背景是两个图片, 每隔一段时间  图片1 淡出,2 淡入, 然后2淡出,1 淡入 很简单 首先Unity建立两个 image1, image2.  image1 在上面显示 然后  我们设置 image1 的透明度, 就是1 淡出, 2淡入. 代码如下: using UnityEngine; using System.Collections; using UnityEngine.UI; public

  • Unity3D实现待机状态图片循环淡入淡出

    本文实例为大家分享了Unity3D实现图片循环淡入淡出的具体代码,供大家参考,具体内容如下 1.说明 由于近期项目需求,在网上找了淡入淡出的代码,但都是两张图片淡入淡出结束后就没有了(可能我没找到其他好的作品).所以我做了简单的扩展 2.简单思路 既然待机状态下的图片淡入淡出切换,所以,首先要判断何时为待机状态(即屏幕没有任何操作的情况下):其次,图片静止一段时间后,开始淡入淡出,第一张图片淡入,第二张淡出:接着图片再次静止一段时间,然后接着下次的淡入淡出,但因为是循环淡入淡出,所以要考虑重新加

  • 纯js实现图片匀速淡入淡出效果

    图片匀速淡入淡出效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淡入效果</title> <style> * { margin: 0; padding: 0; } div { border: 2px solid #aaa; } img { width: 300px; height:

  • jQuery实现图片文字淡入淡出效果

    本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.

  • js运动框架_包括图片的淡入淡出效果

    复制代码 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><font face="Verdana, Geneva, sans-serif"></font>&l

  • 原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • js实现图片加载淡入淡出效果

    本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码,供大家参考,具体内容如下 HTML代码 首先是图片标记的写法: <img data-src="/path/to/image.jpg" alt=""> 需要将图片的地址放到 data-src 属性里,而src值填写默认的一张图片. CSS代码 所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节: img { opacity: 1; transition: opaci

  • 一步一步教你写带图片注释的淡入淡出插件(三)

    其实凭借着之前良好的代码结构,加入控制器很简单(^_^这也就是为什么我说刚开始的架构的代码结构很重要!) 先说一下加入控制器的思路: 根据轮播元素的个数为每一个元素添加一个对应的控制按钮,(这里我直接用a标签来做,考虑语义的话可以用ul或ol),考虑到书写样式的方便可以先create一个控制器父标签,然后依次把每个控制按钮append到控制器父标签,再把父标签append到我们的轮播模块中就ok了.然后再为对应的元素添加上对应的css样式即可 好了,说完思路,咱们动手开始,控制器的绘制应该在in

  • js实现图片淡入淡出效果

    本文实例为大家分享了js实现图片淡入淡出的具体代码,供大家参考,具体内容如下 分析过程: 1.给最大父元素里添加多张图片,让第一张图片的透明度为1 opacity: 1 其余图片的透明度为0: 给图片下面设置一排小点 2.获取每张图片,动态设置不同层级,层级大小从4到0依次设置: Setz_index:function(){ for(var i=0;i<this.Photo.length;i++ ){ index=i; this.Photo[i].style.zIndex =this.Photo

  • JS实现淡入淡出图片效果的方法分析

    本文实例讲述了JS实现淡入淡出图片效果的方法.分享给大家供大家参考,具体如下: 效果:鼠标移入时,图片由半透明逐渐变成清晰,移出时,由清晰变为半透明 分析:用变量来储存透明度,因为元素.style.alpha不能直接增加或减少 核心代码: window.onload=function(){ var oDiv=document.getElementById("div1"); var timer=null; var alpha=30; oDiv.onmouseover=function()

  • jQuery实现点击小图片淡入淡出显示大图片特效

    分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览    源码下载 html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"></div&g

随机推荐