Unity3D利用DoTween实现卡牌翻转效果
更新时间:2020年6月25日 11:15 点击:2172
利用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),分别命名为Front和Back,大小和位置均相同
- 给Back和Front附上你选定的图片,如果没有可以用不同颜色替代
- 给Card附上CardTurnOver.cs脚本
- 将Front和Back对象拖动到脚本的对应位置
- 设置脚本的card state,意味着从正面开始还是背面开始
- 设置脚本的time,即旋转所花费的时间
- 创建两个Button对象,增加OnClick方法,将Card对象拖进去,并分别调用StartBack和StartFront方法
- 点击两个按钮就能看到卡牌翻转的效果了,注意只有在正面的时候才能翻到背面,背面同理。
脚本
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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: Unity3D网格功能生成球体网格模型
下一篇: Unity制作小地图和方向导航
相关文章
- 这篇文章主要为大家详细介绍了Unity3D UGUI实现翻书特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D使用GL实现图案解锁功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D实现飞机大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-03
Unity3D游戏开发数据持久化PlayerPrefs的用法详解
在本篇文章里小编给大家整理了关于Unity3D游戏开发之数据持久化PlayerPrefs的使用的相关知识点内容,需要的朋友们参考下。...2020-06-25- 这篇文章主要介绍了Unity3D基于OnGUI实时显示FPS,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D仿写Button面板事件绑定功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了unity3D实现三维物体跟随鼠标,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这个是在网上看到的,经测试可以在电脑上运行,确实调用了本地摄像头。有需要的小伙伴可以参考下。...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D Shader实现镜子效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D实现待机状态图片循环淡入淡出,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D Shader实现动态屏幕遮罩效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D使用UGUI开发原生虚拟摇杆,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D UGUI特效之Image高斯模糊效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D实现物体闪烁效果,类似霓虹灯、跑马灯、LED灯效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D利用DoTween实现卡牌翻转效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D实现分页系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D实现鼠标控制视角转动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity3D生成一段隧道网格的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-18
- 本文通过一段代码给大家详解unity3d获取系统时间,代码简单易懂,小伙伴们快来看看吧...2020-06-25
- 这篇文章主要介绍了Unity3D动态对象优化代码分享的相关资料,需要的朋友可以参考下...2020-06-25