[Unity3D]利用DoTween制作卡牌翻转的效果

转载自注明: https://blog.csdn.net/wayway0554/article/details/84554886 

1. 卡牌翻转效果

利用Unity的UGUI制作了2D卡牌翻转的效果,如果是sprite对象的话,原理应该也是一样的,以下是效果图


图1 卡牌翻转效果

2. 关于DoTween

DoTween是一款十分强大且好用的动画效果插件,有免费版和收费版,免费版就可以满足大部分需求了,在Unity Assets Store里就可以下载,在本效果里就用了DoTween的旋转功能。

3. 设计思路

创建一个空物体,空物体下有两个image对象,一个是正面,一个是背面。假设我们从正面开始,则初始状态下正面的旋转角度为 ( 0 , 0 , 0 ) ( 0 , 0 , 0 ) ( 0 , 0 , 0 ) (0,0,0)(0,0,0) (0,0,0) (0,0,0)(0,0,0)(0,0,0)(0,0,0),这样背面出现,整个翻转的过程就完成了,如果不明白,可以想象一下一张扑克牌从正面慢慢翻转到背面的情况,首先旋转到侧面对着你,然后再从侧面旋转到背面。

4. 使用方法

  1. 导入DoTween插件
  2. setup插件
  3. 创建一个Canvas
  4. Canvas下创建一个空物体命名为Card
  5. Card下创建两个Image(UI),分别命名为FrontBack,大小和位置均相同
  6. BackFront附上你选定的图片,如果没有可以用不同颜色替代
  7. Card附上CardTurnOver.cs脚本
  8. FrontBack对象拖动到脚本的对应位置
  9. 设置脚本的card state,意味着从正面开始还是背面开始
  10. 设置脚本的time,即旋转所花费的时间
  11. 创建两个Button对象,增加OnClick方法,将Card对象拖进去,并分别调用StartBackStartFront方法
  12. 点击两个按钮就能看到卡牌翻转的效果了,注意只有在正面的时候才能翻到背面,背面同理

5. 脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;//别忘了引用

//卡牌状态,正面、背面
public enum CardState
{
    Front,
    Back
}
public class CardTurnOver : MonoBehaviour{
public GameObject mFront;//卡牌正面
public GameObject mBack;//卡牌背面
public CardState mCardState = CardState.Front;//卡牌当前的状态,是正面还是背面?
public float mTime = 0.3f;
private bool isActive = false;//true代表正在执行翻转,不许被打断

/// <summary>
/// 初始化卡牌角度,根据mCardState
/// </summary>
public void Init()
{
    if(mCardState==CardState.Front)
    {
        //如果是从正面开始,则将背面旋转90度,这样就看不见背面了
        mFront.transform.eulerAngles = Vector3.zero;
        mBack.transform.eulerAngles = new Vector3(0, 90, 0);
    }
    else
    {
        //从背面开始,同理
        mFront.transform.eulerAngles = new Vector3(0, 90, 0);
        mBack.transform.eulerAngles = Vector3.zero;
    }
}
private void Start()
{
    Init();
}

/// <summary>
/// 留给外界调用的接口
/// </summary>
public void StartBack()
{
    if (isActive)
        return;
    StartCoroutine(ToBack());
}
/// <summary>
/// 留给外界调用的接口
/// </summary>
public void StartFront()
{
    if (isActive)
        return;
    StartCoroutine(ToFront());
}
/// <summary>
/// 翻转到背面
/// </summary>
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>
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;
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值