赞
踩
using UnityEngine; using UnityEngine.UI; using DG.Tweening; using System; using System.Collections.Generic; public class CardMove : MonoBehaviour { public List<Sprite> Sprites = new List<Sprite>(); Transform Imgs; int imgId = 0; public int CurrentID = 0; void Start() { Imgs = transform.Find("Imgs"); transform.Find("LeftBtn").GetComponent<Button>().onClick.AddListener(() => { LeftMoveToRight(true); }); transform.Find("RightBtn").GetComponent<Button>().onClick.AddListener(() => { LeftMoveToRight(false); }); } void LeftMoveToRight(bool IsLeft) { imgId = IsLeft == true ? GetImgId(0) : GetImgId(1); for (int i = 0; i < Imgs.childCount; i++) { int k = i; Transform img = Imgs.GetChild(k).GetChild(0); float posX = Imgs.GetChild(i).localPosition.x; if (posX == 500) { if (IsLeft) { SetHoming(img, 0, false); if (imgId == 0) { imgId = Sprites.Count - 1; } else { imgId--; } img.GetComponent<Image>().sprite = Sprites[imgId]; } else { SetHoming(img, 3, true); } } else if (posX == -500) { if (IsLeft) { SetHoming(img, 2, true); } else { SetHoming(img, 1, false); if (imgId == Sprites.Count - 1) { imgId = 0; } else { imgId++; } img.GetComponent<Image>().sprite = Sprites[imgId]; } } else if (posX == 250) { if (IsLeft) { SetHoming(img, 1, true); } else { SetHoming(img, 4, true); } } else if (posX == -250) { if (IsLeft) { SetHoming(img, 4, true); } else { SetHoming(img, 0, true); } } else if (posX == 0) { if (IsLeft) { SetHoming(img, 3, true); } else { SetHoming(img, 2, true); } } } CurrentID = GetImgId(4); //Debug.Log(Sprites[CurrentID].name);//居中图片名称 } void SetHoming(Transform img, int index, bool isbreak) { img.SetParent(Imgs.GetChild(index)); img.DOLocalMoveX(0, isbreak == true ? 0.2f : 0).SetEase(Ease.Linear); img.DOScale(1f, 0.2f).SetEase(Ease.Linear); //斜卡片界面需要,不然可以注销 { img.DOLocalMoveZ(0, 0).SetEase(Ease.Linear); img.localRotation = Quaternion.identity; } } int GetImgId(int childId) { for (int i = 0; i < Sprites.Count; i++) { if (Imgs.GetChild(childId).GetChild(0).GetComponent<Image>().sprite.name == Sprites[i].name) { CurrentID = i; } } return CurrentID; } }
斜卡片倾斜角度,大概设置一下就行了,这里中间左右的两张图分别旋转了-25°和25°,边上对称的两张图分别旋转了-15°和15°.
图片A:
图片A布局中的-300_0.7等组件属性为空,-300_0.7表示此组件x相对坐标为-300,组件scale属性为0.7。
Sprite2D的0号位图片在0_1子对象img(Imgs.GetChild(4)),
Sprite2D的1号位图片在150_0.85(Imgs.GetChild(3)),
Sprite2D的2号位图片在300_0.7(Imgs.GetChild(1)),
Sprite2D的倒数第一号位图片在-150_0.85(Imgs.GetChild(2)),
Sprite2D的倒数第二号位图片在-300_0.7(Imgs.GetChild(0))。
实现效果:
原生JS层叠图片轮播展示代码
我的项目是12个3D模型在五个点循环轮播。五个点由自己设计,那么三个点就更简单了,如果是七个点就在首位和末尾各加一个点,依此类推。
图片的滑动功能,建议交给外部类处理此方法:CardMove.LeftMoveToRight(true);
/*中间图片在滑动时关闭预留的点击事件, 若中间的这张图片需要点击后跳转场景, 判断是滑动还是点击,不能在滑动后就跳转了场景。 */ public static bool IsCanClickBtn = true; void Update() { //平板端 if (Input.touchCount > 0) { Touch touch = Input.GetTouch(0); switch (touch.phase) { case TouchPhase.Began: startPos = touch.position; break; case TouchPhase.Moved: { stayPos = touch.position; if ((startPos - stayPos).magnitude >= 100) { IsCanClickBtn = false; } } break; case TouchPhase.Ended: { endPos = touch.position; direction = (startPos - endPos); Debug.Log(direction.magnitude); if (direction.magnitude >= 100) { IsCanClickBtn = false; if (Math.Abs(direction.x) > Math.Abs(direction.y)) { if (startPos.x > endPos.x) { print("左移"); CardMove.LeftMoveToRight(false); } else { print("右移"); CardMove.LeftMoveToRight(true); } } } } break; } } else { //桌面端 if (Input.GetMouseButtonDown(0)) { startPos = Input.mousePosition; } if (Input.GetMouseButton(0)) { stayPos = Input.mousePosition; if ((startPos - stayPos).magnitude >= 100) { IsCanClickBtn = false; } } if (Input.GetMouseButtonUp(0)) { endPos = Input.mousePosition; direction = (startPos - endPos); if (direction.magnitude >= 100) { IsCanClickBtn = false; if (Math.Abs(direction.x) > Math.Abs(direction.y)) { if (startPos.x > endPos.x) { CardMove.LeftMoveToRight(false); } else { CardMove.LeftMoveToRight(true); } } } } } if (Input.GetKeyDown(KeyCode.Escape)) { #if UNITY_EDITOR UnityEditor.EditorApplication.isPlaying = false; #else Application.Quit(); #endif } }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。