UGUI实现图片特效轮播，使用插件DOTWEEN

今天我们来用unity3d的UGUI来实现图片的轮播，也就是经常在一些视频网站上的一些图片轮播。这次将使用到动画插件DOTWEEN，主要目的也是为了熟悉Dotween这个插件。图片轮播的原理是比较简单的，我将实现图片特效轮播，也是看了别人的网站后想在UGUI上面实现以下，正好刚刚学习了Dotween，拿来练练手。

原理： 2张图片叠加在一起，且开始状态是2张图片都为一样的图片，切换之前，将后面的图片先直接切换成其他图片，然后对第一张图片做出各种动画操作（如将第一张图片的透明度逐渐降低），这样就可以特效的切换到其他图片。我们直接看看案例图如下：

用到的核心函数：
Sprite.Create(Texture2D texture, Rect rect, Vector2 pivot）；
我们只需要关心这3个参数，其他默认即可。
Texture2D ，这个是我们图片的资源，用resources.load加载即可。
Rect 这个是很关键的，自己可以动手实验一下就明白了rect里面的2个参数，第一个即是image空白框中显示一张图片的某一个大小为第二个参数的位置。有点拗口，类似于HTML中css的Background-Position.
Vector2 直接为vector2.zero即可。

具体步骤如下啦：

第一步：先把场景搭好，图片上一共有32个小的image，左上角开始到左边，然后第二行继续（ps一下，如果你想适配不同的分辨率，image小图片的锚点改成下面图片中的一样，每一个都要改额，记得图片之间留一点点位置，感觉像网格一样。好像Grid Layout Group这个组件可以直接来调整这样的图片网格样式，没用过，我就暂时不研究它了，如果嫌一个图片一个图片的改锚点麻烦，可以去研究一下这个组件，会玩之后可以来交流交流）如下图，改成如下图的面板：

第二步：给每个image添加Canvas Group，这是为了给Dowteen来改变图片透明度用的，就是改变里面的Alpha

第三步：复制图片中force，然后改名为back，这就是原理中的第二张图片，force就是第一张啦。
好准备开始写代码了。

“`
using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;
using DG.Tweening;
///
/// 第一步，将背部图片改为需要播放的图片
///第二步，将force的32个image，通过各种方式消失。
///第三步，将force的32个image的显示的图片改变为back的image显示的图片
///第四步，将force的32个image复原（也就是将位置，透明度等复原，因为2张图片一样，这里复原肉眼是看不出来的）
/// 第五步，重复第一步。
///
public class ImageManager : MonoBehaviour {

List<List<GameObject>> forceList = new List<List<GameObject>>();
List<List<GameObject>> backList = new List<List<GameObject>>();Dictionary<string, List<List<Sprite>>> spritePath = new Dictionary<string, List<List<Sprite>>>();
public int ImageNumber;
private float ImageWidth;
private float ImageHeight;
int currentImageNumber = 1;
void Start () {//找到32张force图片int count = transform.FindChild("force").childCount;for (int i = 0; i < count/8; i++) {List<GameObject> list = new List<GameObject>();for (int k = 0; k < count/4; k++) {list.Add(transform.FindChild("force").GetChild(k+i*8).gameObject);}forceList.Add(list);}//找到32张back图片count = transform.FindChild("back").childCount;for (int i = 0; i < count / 8; i++){List<GameObject> list = new List<GameObject>();for (int k = 0; k < count / 4; k++){list.Add(transform.FindChild("back").GetChild(k + i * 8).gameObject);}backList.Add(list);}for (int name = 0; name <=ImageNumber; name++) {Texture2D t2d = Resources.Load(name.ToString(), typeof(Texture2D)) as Texture2D;List<List<Sprite>> spriteOneList = new List<List<Sprite>>();for (int i = 0; i < 4; i++){List<Sprite> iSpriteList = new List<Sprite>();for (int k = 0; k < 8; k++){iSpriteList.Add(Sprite.Create(t2d, new Rect(new Vector2(t2d.width / 8 * k, t2d.height / 4 * i), new Vector2(t2d.width / 8, t2d.height / 4)), new Vector2(0, 0)));}spriteOneList.Add(iSpriteList);}spritePath.Add(name.ToString(), spriteOneList);}ImageWidth = forceList[0][0].GetComponent<RectTransform>().rect.width;ImageHeight = forceList[0][0].GetComponent<RectTransform>().rect.height;SetSprite(1,true);SetSprite(1,false);StartChangeImage();
}//设置force32张图片的背景
public void SetSprite(int ImageName, bool force) {List<List<Sprite>> spriteList;spritePath.TryGetValue(ImageName.ToString(), out spriteList);if (force){for (int i = 0; i < 4; i++){for (int k = 0; k < 8; k++){forceList[3-i][k].GetComponent<Image>().sprite = spriteList[i][k];}}}else {for (int i = 0; i < 4; i++){for (int k = 0; k < 8; k++){backList[3-i][k].GetComponent<Image>().sprite = spriteList[i][k];}}}}
//设置一张图片背景todo
public void SetOneSprite(GameObject crImageName,int ImageName, bool force,int k,int i)
{List<List<Sprite>> spriteList;spritePath.TryGetValue(ImageName.ToString(), out spriteList);if (force){crImageName.GetComponent<Image>().sprite = spriteList[3-i][k];}else{crImageName.GetComponent<Image>().sprite = spriteList[3-i][k];}
}
int zy = 1;
//轮播
public void StartChangeImage() {ResetForce();//复原force图片，这张图片应该是当前back显示的图片currentImageNumber++;if (currentImageNumber > ImageNumber){currentImageNumber = 1;}SetSprite(currentImageNumber, false);//设置back图片为一下轮播的图片// StartImageAnim(Mathf.RoundToInt(Random.Range(1f,5f)));//改变动画效果StartImageAnim(zy++);if (zy == 6) {zy = 1;}Invoke("StartChangeImage", 5f);
}
//更换图片
public void SetNextImage(List<GameObject> objArray,Sprite newSprite) {for (int i = 0; i < objArray.Count; i++) {objArray[i].GetComponent<Image>().sprite = newSprite;}
}
//轮播动画
public void StartImageAnim(int currentAnim) {Invoke("AnimType" + currentAnim, 0);
}
//复原force
public void ResetForce() {SetSprite(currentImageNumber,true);for (int i = 0; i < forceList.Count; i++){for (int k = 0; k < forceList[i].Count; k++){forceList[i][k].GetComponent<CanvasGroup>().alpha = 1f;forceList[i][k].GetComponent<RectTransform>().anchoredPosition = Vector2.zero;forceList[i][k].GetComponent<RectTransform>().localScale= Vector3.one;forceList[i][k].GetComponent<RectTransform>().localRotation = Quaternion.Euler(Vector3.zero);}}
}//图片轮播动画的效果1
public void AnimType1() {float Time = 0.2f;for (int i = 0; i < forceList.Count; i++){for (int k = 0; k < forceList[i].Count; k++){forceList[i][k].GetComponent<CanvasGroup>().DOFade(0,1.2f).SetDelay(Time);Time += 0.05f;}}
}
//图片轮播动画的效果2
public void AnimType5()
{float Time = 0.25f;for (int i = 0; i < forceList.Count; i++){for (int k = 0; k < forceList[i].Count; k++){forceList[i][k].GetComponent<RectTransform>().DOScale(0, 0.8f).SetEase(Ease.InBack).SetDelay(Time);Time += 0.05f;}}
}
//图片轮播动画的效果3
public void AnimType3()
{float Time = 0.25f;for (int i = 0; i < forceList.Count; i++){for (int k = 0; k < forceList[i].Count; k++){forceList[i][k].GetComponent<RectTransform>().DOScale(0, 0.8f).SetEase(Ease.InCirc).SetDelay(Time);Time += 0.05f;}}
}
//图片轮播动画的效果4
public void AnimType4()
{float Time = 0.25f;List<Tweener> tweenrs = new List<Tweener>();for (int i = 0; i < forceList.Count; i++){for (int k = 0; k < forceList[i].Count; k++){Tweener tweenr = forceList[i][k].GetComponent<RectTransform>().DORotate(new Vector3(90, 0, 0), 0.8f,RotateMode.LocalAxisAdd).SetEase(Ease.InBack).SetDelay(Time);Time += 0.05f;}}
}
//图片轮播动画的效果5
public void AnimType2()
{float Time = 0.2f;SetSprite(0,false);for (int i = 0; i < forceList.Count; i++){for (int k = 0; k < forceList[i].Count; k++){GameObject obj = forceList[i][k];int n = k;int m = i;Tweener tweener1 = forceList[i][k].GetComponent<RectTransform>().DOScale(0f, 0.4f).SetDelay(Time).OnComplete(()=>SetOneSprite(obj, currentImageNumber,true,n,m));Tweener tweener2 = forceList[i][k].GetComponent<RectTransform>().DOScale(1f, 0.4f).SetEase(Ease.OutBack);DOTween.Sequence().Append(tweener1).Append(tweener2);Time += 0.03f;}}
}

}
轮播的图片想要改成其他图片，直接在Resources里面添加图片即可，名字从1到无限（如1.jpg）不要忘了修改面板上的图片数量，我这里有9张图片，ImageNumber就为9；

需要项目学习的自己拿啦，下下下下下下下下下下下下下下下下。。。。。。。

http://pan.baidu.com/s/1eSl2NJk 密码：lu90

下下下下下下下下下下下下下下下下下下下下下下下下下下下下下下下下下下下下下下下。。。。。。。。。（遇到问题，可以讨论额）

UGUI实现图片特效轮播，使用插件DOTWEEN相关推荐

java图片特效轮播代码_JQuery实现图片轮播效果
[实例演示] 1 2 3 4 用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-"JQuery实现图片轮播效果"上 ...
html轮播视频插件上加文字,可加入视频、图片的轮播swiper插件（可以拖动、视频存在加载条）...
使用方法 css引用: html: 这是一个视频自动播放存在进度条这是图片图片放data-image 6秒滑动 js引用: js: $('#pbSlider0').pbTouchSlider( ...
十个jQuery的幻灯片图片轮播切换插件[转]
1.Simple Controls Gallery 是基于jQuery的一个幻灯插件,非常不错,详细演示及下载请点击下面的链接 http://www.dynamicdrive.com/dynamici ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
html文字图片一起轮播卡片,简单的堆叠卡片样式jQuery轮播图插件
MxSlider.js是一款堆叠卡片样式的jQuery响应式轮播图插件.该轮播图插件兼容IE8浏览器,采用响应式设计,它在图片切换时,就像一叠扑克牌将最上面一张挪开的效果. 使用方法在页面中引入Mx ...
html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法安装: /* y ...
三郎前端特效学习源代码：图片主页轮播组件
三郎前端特效学习源代码:图片主页轮播组件简单介绍效果图源代码 html部分 js部分 css部分简单介绍各大网站都比较常用的主页轮播组件可以自己改改就能用效果图源代码 html部分 & ...
android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件
PgwSlideshow是一款非常实用的响应式.支持触摸屏的jQuery轮播图插件.该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度.你也可以自定义轮播图的高度,图片宽度会根据高度等 ...
jQuery圆点图片轮播切换插件
下载地址效果很普通的网站banner图片切换插件,但又是一款很实用的jQuery轮播图插件,可以点击圆点控制图片索引. dd:

UGUI实现图片特效轮播，使用插件DOTWEEN

UGUI实现图片特效轮播，使用插件DOTWEEN相关推荐

最新文章

热门文章