[置顶] 【Unity3D游戏开发】NGUI之不相对于Anchor的位移动画TweenPosition (下) (三)

Unity中的UI我们采用的是NGUI,NGUI的界面位移动画,我们一般使用的是TweenPosition。

一种是简单的相对位移，不考虑分辨率适配问题，只需要简单的从位置A到位置B，已经在文中介绍了:

【Unity NGUI游戏开发之二】TweenPosition位移动画(一):不相对于Anchor的位移动画

另外一种是考虑到屏幕分辨率适配的位移动画，我们游戏中大多遇到的是这种情况。

eg.我们想让一个UI从屏幕外沿着屏幕的左边移动到屏幕的中央，TweenPositon播放动画，在960*640下正合适从屏幕外到屏幕内，那么在1136*640、2048*2536等各种分辨率下是否正常还是会穿帮？答案是肯定会穿帮的。

在这里我们对TweenPosition进行了扩展。屏幕的适配方案我们依旧采用NGUI默认的解决方案。

1. Animation and anchors

TweenPosition 组件不依赖锚点。有一个widget控件,使用UIAnchor的功能(新版本3.8, 3.9中UIAnchor已丢弃,已经继承到widget属性【Anchors】中), 使用NGUI的锚点功能把控件定位到屏幕左上角。改变分辨率一切效果正常。

当使用TweenPosition播放动画，从屏幕外移动到屏幕内，TweenPosition需要Vector3的起始位置和终止位置，设置如下:

当改变分辨率或宽高比的时，还按照坐标来设置的话，效果就出错了:

 4:3

16:9

通过脚本来根据分辨率计算起始坐标和终止坐标，效果也不理想

NGUI中有一个组件TweenTransform，允许移动一个object从A移动到B，A、B只需要有transform即可。通过A、B对象来记录移动的目标点。

将要移动的对象的UIAnchor(Anchor属性)相对位置去掉,将锚点设置给A、B对象。否则这个这个对象会一直相对于这个锚点对齐，播放动画不会有任何效果。

更改分辨率看效果:

4:3 和 16:9

效果在不同分辨率下都正常了，接下来我们就是实际应用了，工程中有一堆这些效果，如果每一个都这么设置一个A、B对象，无疑是非常繁琐的，在这里将TweenTransform脚本进行扩展,实现一个自动化处理。

创建一个接口脚本 TweenPositonEx.cs，添加到任何想相对于屏幕或父节点做位移动画的控件上。脚本接口简单，只需要A、B两个控件。

/**
 	TransformPostion的扩展:
	 1.可以根据游戏屏幕分辨率播放从A到B动画 eg. UI从屏幕外左边移动到屏幕中英
	 2.TweenTransformExEditor.cs中对编辑器进行定制，实现了功能自动化处理，节省开发时间
	 
	 Added by Teng.
 **/
using UnityEngine;
using System.Collections;

[RequireComponent(typeof(TweenTransform))]
public class TweenTransformEx : MonoBehaviour {
	public GameObject FromAnchor;
	public GameObject ToAnchor;
}

接下来是TweenPositonExEditor.cs，是TweenPositonEx.cs脚本的一个编辑器扩展，内部有些复杂，无需关心内容，也不需要添加到任何脚本行，只需要放到工程中即可。

/**
	对TweenTransformEx.cs类的属性的编辑器定制，实现了功能自动化处理，节省开发时间
	
	Added by Teng.
**/
using UnityEngine;
using UnityEditor;
using System.Collections;

[CustomEditor(typeof (TweenTransformEx))]
public class TweenTransformHelperEditor : Editor {
	
	private TweenTransformEx _tweener;
	
	private void Awake() {
		_tweener = (TweenTransformEx) target;
	}
	
	public override void OnInspectorGUI() {
		EditorGUILayout.BeginHorizontal();
		if (GUILayout.Button("Create from anchor")) {
			CreateAnchorFrom();
		}
		if (GUILayout.Button("Destroy")) {
			DestroyAnchor(_tweener.FromAnchor);
		}
		EditorGUILayout.EndHorizontal();
		_tweener.FromAnchor = (GameObject) EditorGUILayout.ObjectField(_tweener.FromAnchor, typeof (GameObject));
		
		EditorGUILayout.BeginHorizontal();
		if (GUILayout.Button("Create to anchor")) {
			CreateAnchorTo();
		}
		if (GUILayout.Button("Destroy")) {
			DestroyAnchor(_tweener.ToAnchor);
		}
		EditorGUILayout.EndHorizontal();
		_tweener.ToAnchor = (GameObject) EditorGUILayout.ObjectField(_tweener.ToAnchor, typeof (GameObject));
		
		CreateAndApplyTweener();
		UpdateUI();
	}
	
	private void CreateAndApplyTweener() {
		bool toAnchorNotEqualsNull = _tweener.ToAnchor;
		bool fromAnchorNotEqualsNull = _tweener.FromAnchor;
		
		if (!fromAnchorNotEqualsNull) {
			EditorGUILayout.HelpBox("From anchor not created!", MessageType.Warning);
		}
		else if (!toAnchorNotEqualsNull) {
			EditorGUILayout.HelpBox("To anchor not created!", MessageType.Warning);
		}
		else {
			if (GUILayout.Button("Apply to tween")) {
				var tweenComponent = _tweener.GetComponent<TweenTransform>() ?? _tweener.gameObject.AddComponent<TweenTransform>();
				tweenComponent.from = _tweener.FromAnchor.transform;
				tweenComponent.to = _tweener.ToAnchor.transform;
				tweenComponent.enabled = false;
			}
		}
	}
	
	private void UpdateUI() {
		if (GUI.changed) {
			EditorUtility.SetDirty(_tweener);
		}
	}
	
	private void DestroyAnchor(GameObject gameObj) {
		if (gameObj == null) {
			return;
		}
		DestroyImmediate(gameObj);
	}
	
	private void CreateAnchorTo() {
		var anchor = CreateAnchor("$anchorTo");
		_tweener.ToAnchor = anchor;
	}
	
	private void CreateAnchorFrom() {
		var anchor = CreateAnchor("$anchorFrom");
		_tweener.FromAnchor = anchor;
	}
	
	private GameObject CreateAnchor(string anchorName) {
		var anchorGameObj = new GameObject(anchorName);
		anchorGameObj.transform.parent = _tweener.transform;
		anchorGameObj.transform.localPosition = Vector3.zero;
		anchorGameObj.transform.localScale = Vector3.one;

		var widgetScript = anchorGameObj.AddComponent<UIWidget>();
		widgetScript.width = widgetScript.height = 100;
		return anchorGameObj;
	}
}

添加脚本到widget上，如下:

点击要播放动画的widget, 创建anchorTo和anchorFrom，点击【Apply to tween】，接下来只需要相对的调节anchorTo和anchorFrom的相对位置即可。

需要有以下几点注意:

1.要播放动画的widget控件不能有Anchor,最起码不能有OnUpdate的Anchor，否则会一直相对于Anchor设置位置，播放动画无任何效果，只需要调整A、B的Anchor即可。

2.要播放动画的widget控件在屏幕外的初始位置，可以设置OnStart的Anchor(仅执行一次)，来确保肯定在屏幕外。