Unity制作卡牌翻转的效果
1、设计思路创建一个空物体,空物体下有两个image对象,一个是正面,一个是背面。假设我们从正面开始,则初始状态下正面的旋转角度为(0,0,0) ,让背面的旋转角度为(0,90,0) ,这样背面就看不见了。触发旋转时,例如让正面在0.3秒内旋转到(0,90,0) ,这样正面就看不见了,等旋转完成后再让背面0.3秒旋转到(0,0,0),这样背面出现,整个翻转的过程就完成了,如果不明白,...
1、设计思路
创建一个空物体,空物体下有两个image对象,一个是正面,一个是背面。假设我们从正面开始,则初始状态下正面的旋转角度为(0,0,0) ,让背面的旋转角度为(0,90,0) ,这样背面就看不见了。
触发旋转时,例如让正面在0.3秒内旋转到(0,90,0) ,这样正面就看不见了,等旋转完成后再让背面0.3秒旋转到(0,0,0),这样背面出现,整个翻转的过程就完成了,如果不明白,可以想象一下一张扑克牌从正面慢慢翻转到背面的情况,首先旋转到侧面对着你,然后再从侧面旋转到背面。
2、使用方法
1、导入DoTween插件
2、创建一个Canvas
3、在Canvas下创建一个空物体命名为Card
4、在Card下创建两个Image(UI),分别命名为Front和Back,大小和位置均相同
5、给Back和Front附上你选定的图片
6、给Card附上CardTurnOver.cs脚本
7、将Front和Back对象拖动到脚本的对应位置
8、设置脚本的card state,意味着从正面开始还是背面开始
9、设置脚本的time,即旋转所花费的时间
10、创建两个Button对象,增加OnClick方法,将Card对象拖进去,并分别调用StartBack和StartFront方法
11、点击两个按钮就能看到卡牌翻转的效果了,注意只有在正面的时候才能翻到背面,背面同理。
3、脚本
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
//卡牌的状态,正面、背面
public enum CardState {
Front,
Back
}
public class CardTunOver : MonoBehaviour {
public GameObject mFront; //卡牌正面
public GameObject mBack; //卡牌的背面
public CardState mCardState = CardState.Front; //卡牌当前的状态,是正面还是背面
public float mTime = 0.3f;
public bool isActive = false; //true代表正在执行翻转,不许被打断
/// <summary>
/// 初始化卡牌角度,根据mCardState
/// </summary>
public void Init() {
if (mCardState == CardState.Front)
{
mFront.transform.eulerAngles = Vector3.zero;
mBack.transform.eulerAngles = new Vector3(0, 90, 0);
}
else
{
mBack.transform.eulerAngles = Vector3.zero;
mFront.transform.eulerAngles = new Vector3(0, 90, 0);
}
}
void Start () {
Init();
}
//开始向后转
public void StartBack()
{
if (isActive)
{
return;
}
StartCoroutine(ToBack());
}
//开始前转
public void StartFront()
{
if (isActive)
{
return;
}
StartCoroutine(ToFront());
}
/// <summary>
/// 翻转到背面
/// </summary>
/// <returns></returns>
IEnumerator ToBack()
{
isActive = true;
mFront.transform.DORotate(new Vector3(0, 90, 0), mTime);
for (float i = mTime; i >= 0; i-=Time.deltaTime)
{
yield return 0;
}
mBack.transform.DORotate(new Vector3(0, 0, 0), mTime);
isActive = false;
}
/// <summary>
/// 翻转到正面
/// </summary>
/// <returns></returns>
IEnumerator ToFront()
{
isActive = true;
mBack.transform.DORotate(new Vector3(0, 90, 0), mTime);
for (float i = mTime ; i >= 0; i-= Time.deltaTime)
{
yield return 0;
}
mFront.transform.DORotate(new Vector3(0, 0, 0), mTime);
isActive = false;
}
}
转发自:https://blog.csdn.net/wayway0554/article/details/84554886
更多推荐
所有评论(0)