程序博客网 > 淘宝ka商家是什么意思

NGUI所见即所得之UITweener

来源：互联网 发布：淘宝ka商家是什么意思 编辑：程序博客网 时间：2024/05/21 06:47
一直没有用过NGUI动画的功能，之前的理解就是：设置始末两个“位置”，然后就是从起始位置移到结束位置。至于中间是怎么变化的，就感觉很神奇了，变化率怎么设置才不会看起来很“傻”，这里不是看“郭靖”，动画一定要有惊奇，摸不着猜不透的感觉。对NGUI主要的几个脚本都已经有点掌握了（猛点查看），一直都没有去”膜拜“Tweening文件夹的各个大神，可能以前会觉得不就是一个动画组件，自己都可以实现。但是看过里面的代码就后悔了，因为至少结合TweenFOV和TweenOrhoSize这两个脚本就可以实现很多效果，竟然轻而易举的集成了，看来人还是不要太看得起自己的好，这样才会走的更快更远。

        每次都觉得前面吹水很写，也写不好（一直都有感觉自己的写作水平太差了），那就来看下Tweening文件夹下到底卖的是什么药——UITweener和它的“孩子”：

UITweener的Fields
        看着很复杂，其实只要把UITweener琢磨透了，其它都只是重写UITweener的OnUpdate方法和封装了Begin方法。还是先看下主要的Field（作用看注释）：

C#代码 复制代码 收藏代码
  1.        bool mStarted = false;  //是否开始动画 
  2. float mStartTime = 0f;   //动画开始播放的时间， mStarted =true;mStartTime = time + delay; 
  3. float mDuration = 0f;    //动画长度（时间） 
  4. float mAmountPerDelta = 1000f;   //单位时间动画播放的长度，有点帧率的感觉 
  5. float mFactor = 0f;           //当前动画播放的进度 
  6.  
  7. /// <summary> 
  8. /// Amount advanced per delta time. 
  9. /// </summary> 
  10.  
  11. public float amountPerDelta 
  12. { 
  13.     get 
  14.     { 
  15.         if (mDuration != duration) 
  16.         { 
  17.             mDuration = duration; 
  18.             mAmountPerDelta = Mathf.Abs((duration > 0f) ? 1f / duration : 1000f); 
  19.         } 
  20.         return mAmountPerDelta; 
  21.     } 
  22. } 

        通过Begin设置需要的参数：

C#代码 复制代码 收藏代码
  1.        static public T Begin<T> (GameObject go,float duration) where T : UITweener 
  2. { 
  3.     T comp = go.GetComponent<T>(); 
  4. if UNITY_FLASH 
  5.     if ((object)comp ==null) comp = (T)go.AddComponent<T>(); 
  6. else 
  7.     if (comp == null) comp = go.AddComponent<T>(); 
  8. endif 
  9.     comp.mStarted = false; 
  10.     comp.duration = duration; 
  11.     comp.mFactor = 0f; 
  12.     comp.mAmountPerDelta = Mathf.Abs(comp.mAmountPerDelta); 
  13.     comp.style = Style.Once; 
  14.     comp.animationCurve = new AnimationCurve(new Keyframe(0f, 0f, 0f, 1f),new Keyframe(1f, 1f, 1f, 0f)); 
  15.     comp.eventReceiver = null; 
  16.     comp.callWhenFinished = null; 
  17.     comp.enabled = true; 
  18.     return comp; 
  19. } 

Update函数    

然后再Update函数先计算出时间delta，进一步计算出当前动画播放的mFactor，然后进行Sample采用，执行OnUpdate：

C#代码 复制代码 收藏代码
  1. void Update () 
  2. { 
  3.     float delta = ignoreTimeScale ? RealTime.deltaTime : Time.deltaTime; 
  4.     float time = ignoreTimeScale ? RealTime.time : Time.time; 
  5.  
  6.     if (!mStarted) 
  7.     { 
  8.         mStarted = true; 
  9.         mStartTime = time + delay; 
  10.     } 
  11.  
  12.     if (time < mStartTime) return; 
  13.  
  14.     // Advance the sampling factor 
  15.     mFactor += amountPerDelta * delta; 
  16.  
  17.     // Loop style simply resets the play factor after it exceeds 1. 
  18.     if (style == Style.Loop) 
  19.     { 
  20.         if (mFactor > 1f) 
  21.         { 
  22.             mFactor -= Mathf.Floor(mFactor); 
  23.         } 
  24.     } 
  25.     else if (style == Style.PingPong) 
  26.     { 
  27.         // Ping-pong style reverses the direction 
  28.         if (mFactor > 1f) 
  29.         { 
  30.             mFactor = 1f - (mFactor - Mathf.Floor(mFactor)); 
  31.             mAmountPerDelta = -mAmountPerDelta; 
  32.         } 
  33.         else if (mFactor < 0f) 
  34.         { 
  35.             mFactor = -mFactor; 
  36.             mFactor -= Mathf.Floor(mFactor); 
  37.             mAmountPerDelta = -mAmountPerDelta; 
  38.         } 
  39.     } 
  40.  
  41.     // If the factor goes out of range and this is a one-time tweening operation, disable the script 
  42.     if ((style == Style.Once) && (mFactor > 1f || mFactor < 0f)) 
  43.     { 
  44.         mFactor = Mathf.Clamp01(mFactor); 
  45.         Sample(mFactor, true); 
  46.  
  47.         current = this; 
  48.  
  49.         // Notify the listener delegates 
  50.         EventDelegate.Execute(onFinished); 
  51.  
  52.         // Deprecated legacy functionality support 
  53.         if (eventReceiver != null && !string.IsNullOrEmpty(callWhenFinished)) 
  54.             eventReceiver.SendMessage(callWhenFinished, this, SendMessageOptions.DontRequireReceiver); 
  55.  
  56.         current = null; 
  57.  
  58.         // Disable this script unless the function calls above changed something 
  59.         if (mFactor == 1f && mAmountPerDelta > 0f || mFactor == 0f && mAmountPerDelta < 0f) 
  60.             enabled = false; 
  61.     } 
  62.     else Sample(mFactor, false); 
  63. } 

Sample采样函数

        前面说的动画要有摸不着猜不透的感觉，就是要考Sample的采样函数来实现的，UITweener支持5种动画曲线：

C#代码 复制代码 收藏代码
  1.        public enum Method 
  2. { 
  3.     Linear, 
  4.     EaseIn, 
  5.     EaseOut, 
  6.     EaseInOut, 
  7.     BounceIn, 
  8.     BounceOut, 
  9. } 

采样的函数，原理很简单：根据当前播放的进度mFactor，计算出实际的动画播放刻度，然后执行OnUpdate操作：

C#代码 复制代码 收藏代码
  1. public void Sample (float factor,bool isFinished) 
  2. { 
  3.     // Calculate the sampling value 
  4.     float val = Mathf.Clamp01(factor); 
  5.  
  6.     if (method == Method.EaseIn) 
  7.     { 
  8.         val = 1f - Mathf.Sin(0.5f * Mathf.PI * (1f - val)); 
  9.         if (steeperCurves) val *= val; 
  10.     } 
  11.     else if (method == Method.EaseOut) 
  12.     { 
  13.         val = Mathf.Sin(0.5f * Mathf.PI * val); 
  14.  
  15.         if (steeperCurves) 
  16.         { 
  17.             val = 1f - val; 
  18.             val = 1f - val * val; 
  19.         } 
  20.     } 
  21.     else if (method == Method.EaseInOut) 
  22.     { 
  23.         const float pi2 = Mathf.PI * 2f; 
  24.         val = val - Mathf.Sin(val * pi2) / pi2; 
  25.  
  26.         if (steeperCurves) 
  27.         { 
  28.             val = val * 2f - 1f; 
  29.             float sign = Mathf.Sign(val); 
  30.             val = 1f - Mathf.Abs(val); 
  31.             val = 1f - val * val; 
  32.             val = sign * val * 0.5f + 0.5f; 
  33.         } 
  34.     } 
  35.     else if (method == Method.BounceIn) 
  36.     { 
  37.         val = BounceLogic(val); 
  38.     } 
  39.     else if (method == Method.BounceOut) 
  40.     { 
  41.         val = 1f - BounceLogic(1f - val); 
  42.     } 
  43.  
  44.     // Call the virtual update 
  45.     OnUpdate((animationCurve != null) ? animationCurve.Evaluate(val) : val, isFinished); 
  46. } 

缓动函数（easing fuction）

        上面说的动画曲线，中文叫缓动函数（曲线）：

        通过上面这张图可以很感性的认识不同函数的具体的效果，也可以自己尝试推导一边加深理解，不过D.S.Qiu已经有点“廉颇老矣”，凭着记忆“奇变偶不变，符号看象限”，慢的只能到easeInSine，要想详细了解可以参考②和③。

妙用mAmountPerDelta

         mAmountPerDelta就是动画播放速度，只对mAmountPerData就可以有更多控制：Toggle，PlayForward，PlayResverse：

C#代码 复制代码 收藏代码
  1. /// <summary> 
  2. /// Manually activate the tweening process, reversing it if necessary. 
  3. /// </summary> 
  4.  
  5. public void Play (bool forward) 
  6. { 
  7.     mAmountPerDelta = Mathf.Abs(amountPerDelta); 
  8.     if (!forward) mAmountPerDelta = -mAmountPerDelta; 
  9.     enabled = true; 
  10.     Update(); 
  11. } 
  12. /// <summary> 
  13. /// Manually start the tweening process, reversing its direction. 
  14. /// </summary> 
  15.  
  16. public void Toggle () 
  17. { 
  18.     if (mFactor > 0f) 
  19.     { 
  20.         mAmountPerDelta = -amountPerDelta; 
  21.     } 
  22.     else 
  23.     { 
  24.         mAmountPerDelta = Mathf.Abs(amountPerDelta); 
  25.     } 
  26.     enabled = true; 
  27. } 

『Bug修复和吐槽

        之前用TweenRotation这个脚本，做游戏等待转圈等待界面，发现总是不能旋转360度，总是一个小于180的角度，无论from和to如何设置：

C#代码 复制代码 收藏代码
  1. public Vector3 from; 
  2. public Vector3 to; 

后来无奈之下，只好去看下TweenRotation的OnUpdate函数，发现使用的是 Quaternion.Slerp这个函数，发现确实是这样，所以就做了下面的修改：

C#代码 复制代码 收藏代码
  1. protected overridevoid OnUpdate (float factor,bool isFinished) 
  2. { 
  3.     //cachedTransform.localRotation = Quaternion.Slerp(Quaternion.Euler(from), Quaternion.Euler(to), factor); 
  4.     //NGUI的实现是上一行，有Bug，不能达到要求 
  5.     cachedTransform.localEulerAngles = Vector3.Lerp(from, to, factor); 
  6.  
  7. } 

       NGUI提供了UIPlayTween，这个脚本管理一组Tween脚本的Play，提供了不同的Tirgger，然后在不同的事件函数中触发Play(true)：

C#代码 复制代码 收藏代码
  1. void OnClick () 
  2. { 
  3.     if (enabled && trigger == Trigger.OnClick) 
  4.     { 
  5.         Play(true); 
  6.     } 
  7. } 

       虽然UIPlayTween提供了很多参数都是没有满足要其交替地进行PlayForward和PlayReverse，因为其都是执行Play(true)，开始的时候我想到了给其中一个UITween添加OnFinished委托，在播放结束的时候改变playDiretion的方向：

C#代码 复制代码 收藏代码
  1. public Direction playDirection = Direction.Forward; 

       但是这个控制因为动画是有时间的，会有问题。所以我只能添加一个Trigger的类型：Trigger.None，然后自己去调用，就是自己管理动画的播放，而不是在OnClick中触发。』

                                                                                           增补于 2013,12,23  21:50

小结：

       确实很简单，主要是对缓动函数的理解，有了这些基础可以做的事情（特效和动画）就很多了——屏幕抖动和刀光剑影（下次自己动手尝试下，哈哈），NGUI的ButtonScale等脚本也是通过UITweener来完成的。但是收获蛮多的，又一点多了，晚安！

       如果您对D.S.Qiu有任何建议或意见可以在文章后面评论，或者发邮件（gd.s.qiu@gmail.com)交流，您的鼓励和支持是我前进的动力，希望能有更多更好的分享。

        转载请在文首注明出处：http://dsqiu.iteye.com/blog/1974528

更多精彩请关注D.S.Qiu的博客和微博（ID：静水逐风）

参考：

①NGUI: Next-Gen UI kit  3.0.0：http://www.tasharen.com/ngui/docs/class_u_i_tweener.html

② 缓动函数：http://easings.net/zh-cn

③Easing Equations by Robbert Penner: http://www.gizma.com/easing/#sin2

④Unity3dPack: http://www.unity3dpack.com/?p=300

0 0
淘宝ka商家是什么意思 淘宝ka商家是什么意思
原创粉丝点击
热门IT博客
java实现公告管理系统java实现公告管理系统
文明6 mac 最低配置文明6 mac 最低配置
蚁群路径算法
java实现实时订单过期
杭州双眼皮知乎
网络基本知识子网
淘宝二手主板能买吗
苹果能ghost windows
python单例模式 问题
php变量命名规则汉子
mac有office吗
吾爱破解软件
淘宝童装图片素材
java深度优先遍历
开来软件
公司网络布线方案
二次元手机主题软件
淘宝网针织衫中长
入于找不到网络路径
linux ant编译打包
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 qq车强险 车强险多钱 什么是强险 车辆强险 强险计算器 机动车强险 强险怎么交 强险赔偿 买强险 强险 商业险 强险电话 强险是什么 盗强险 什么叫强险 强险哪个好 汽车 强险 强险去哪交 强险的价格 强险在哪买 强险在哪交 强险贴 工程强险车 强险出险 车险 强险 强险到期了 加强险 车辆 强险 强险多少钱一年 强险都保什么 强险标志还用贴吗 强险怎么理赔 强险到期可以晚几天交吗 强险赔偿范围 汽车强险都保什么 汽车强险多少钱 没贴强险标志怎么处罚 车强险一年多少钱 汽车强险保什么 车辆强险在哪交 轿车的强险一年多少钱 面包车强险多少钱

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里