首页 > 编程 > C# > 正文

Unity3D利用DoTween实现卡牌翻转效果

2020-01-24 00:09:14
字体:
来源:转载
供稿:网友

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

 

图1 卡牌翻转效果

关于DoTween

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

设计思路

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

使用方法

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

脚本

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; }}

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表