DoTween 控制UGUI tween动画

NGUI有自带的tween动画,但是UGUI却没有,如果需要UGUI实现tween动画效果,需要使用插件DoTween.
下载地址http://download.csdn.net/detail/u011484013/9877427

DoTween使用之前,需要添加引用 using DG.Tweening;

使用方式:
首先获取对象的RectTransform实例rectTransform
基本的移动:rectTransform.DOMove (new Vector2(100,100),1f);
DoMove移动的位置是屏幕的左下角,如果想要移动的位置和Inspector上面显示的左边一致,需要添加屏幕的偏移量:
这里写图片描述
centerPos = new Vector2 (Screen.width*0.5f,Screen.height*0.5f);
rectTransform.DOMove(new Vector3(Screen.width * 0.5f+100, Screen.height * 0.5f+100,0), 1f);

缩放:rectTransform.DOScale (new Vector3(2,2,1),1f);

旋转:rectTransform.DORotate (new Vector3(0,0,180),1f);

移动相关的基本事件:

OnComplete(TweenCallback callback)  
OnKill(TweenCallback callback)  
OnPlay(TweenCallback callback)  
OnPause(TweenCallback callback)  
OnRewind(TweenCallback callback)  
OnStart(TweenCallback callback)  
OnStepComplete(TweenCallback callback)  
OnUpdate(TweenCallback callback)  
OnWaypointChange(TweenCallback<int> callback) 

使用方式:

tweener.OnComplete (delegate() {
        Debug.Log("tween animation 结束");
    });

测试demo:
创建一个UGUI image对象,然后在该对象上面添加脚本DoTweenTest2.cs
这里写图片描述
code:

using UnityEngine;
using System.Collections;
using DG.Tweening;
using UnityEngine.UI;
public class DoTweenTest2 : MonoBehaviour {
    Vector2 centerPos;
    Image image;
    // Use this for initialization
    void Start () {
        centerPos = new Vector2 (Screen.width*0.5f,Screen.height*0.5f);
        image = transform.GetComponent<Image>();

    }



    void OnGUI(){
        if(GUILayout.Button("move to word pos(100,100)")){
            //DoMove的坐标系是左下角为准,移动到100,100位置
            image.rectTransform.DOMove (new Vector2(100,100),1f);
        }
        if(GUILayout.Button("move to anchor pos(100,100)")){
            image.rectTransform.DOMove(new Vector3(Screen.width * 0.5f+100, Screen.height * 0.5f+100,0), 1f); 
        }
        if(GUILayout.Button("add scale (2,2)")){//每点击一次,在原始缩放基础上放大(2,2)
            //当前sacle(1,1,1)1秒内添加到(3,3,1)
            image.rectTransform.DOBlendableScaleBy (new Vector2(2,2),1f);
            //          image.rectTransform.DOScale (new Vector2(2,2),1f);

        }
        if(GUILayout.Button("scale to (2,2,1)")){

            image.rectTransform.DOScale (new Vector3(2,2,1),1f);

        }
        if(GUILayout.Button("rotate 180 degree")){
            //旋转到180度
            image.rectTransform.DORotate (new Vector3(0,0,180),1f);
        }

        if(GUILayout.Button("test tweener event")){
            Tweener tweener = image.rectTransform.DOMove(new Vector3(Screen.width * 0.5f+300, Screen.height * 0.5f-100,0), 1f); 
            tweener.OnPlay (OnPlay);
            tweener.OnComplete (OnComplete);
//          tweener.OnComplete (delegate() {
//              Debug.Log("tween animation 结束");
//          });
        }
    }

    void OnComplete(){
        Debug.Log("tween animation 结束");
    }

    void OnPlay(){
        Debug.Log("tween animation 开始");
    }
}

这里写图片描述

常用事件脚本:

using UnityEngine;
using System.Collections;
using DG.Tweening;

public class DoTween_event : MonoBehaviour {

    public RectTransform panelTranform;
    private bool isIn = false;
    public LoopType loopType;                  //循环的模式

    void Start()
    {

        Tweener paneltweener = panelTranform.DOScale (new Vector3(2,2,1),1f);
        //多次调用DOTween动画会影响性能
        //DOTween默认动画播放完毕时会自动销毁动画
        //Tweener对象保存这个动画

        paneltweener.SetAutoKill(false);              //禁止销毁动画
        paneltweener.Pause();                         //停止播放动画
        //paneltweener.SetDelay(0.5f);                //设置动画延迟播放
        //paneltweener.SetEase(Ease.INTERNAL_Zero);   //设置动画运动的模式
        //paneltweener.SetLoops(-1);                  //设置循环播放 (当参数为-1的时候循环播放;当参数>=0的时候则表示循环的次数;0的时候表示循环一次)
        paneltweener.SetLoops(-1,loopType);          //设置循环播放并且设置动画循环的模式
        //paneltweener.PlayForward();                 //播放
        //paneltweener.PlayBackwards();               //倒放
        paneltweener.OnComplete(OnComplete);        //动画播放完毕后执行,动画倒放时候不执行
        paneltweener.OnStart(OnStart);              //动画第一次播放时执行
        paneltweener.OnUpdate(OnUpdate);            //动画播放时不断执行
        paneltweener.OnPlay(OnPlay);                //动画开始播放时执行
        //paneltweener.OnStepComplete(OnStepComplete);//动画播放且倒放都会执行一次,且执行顺序先于OnComplete
        //paneltweener.OnKill(OnKill);                //动画删除的时候执行事件
        //paneltweener.Kill(true);                    //删除动画且组件会直接到达指定位置
    }

    private void OnKill()
    {
        Debug.Log("This is OnKill");
    }

    private void OnStepComplete()
    {
        Debug.Log("This is OnStepComplete");
    }

    private void OnPlay()
    {
        Debug.Log("This is OnPlay");
    }

    private void OnUpdate()
    {
        Debug.Log("This is OnUpdate");
    }

    private void OnStart()
    {
        Debug.Log("动画第一次播放");
    }

    void OnComplete()
    {
        Debug.Log("动画播放完毕!");
    }

    // Update is called once per frame
    void Update () {
        if(Input.GetMouseButtonDown(0)){
            if(!isIn)
            {
                //注释掉的方法是效果都是一样的
                //panelTranform.DOPlay();                     //动画只会播放一次
                panelTranform.DOPlayForward();                //前进
                //paneltweener.PlayForward();                 //播放
                isIn = true;
            }
            else
            {
                //paneltweener.PlayBackwards();               //倒放
                panelTranform.DOPlayBackwards();              //倒放
                isIn = false;
            }
        }

    }



}

相关博客参考:
http://blog.csdn.net/lyh916/article/details/45888117
http://m.blog.csdn.net/begonia__z/article/details/51244304

  • 3
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: UGUI翻页动画Shader是一种用于Unity引擎中用户图形用户界面(UGUI)元素交互动画效果的特殊Shader。该Shader实现了各种UI元素(例如按钮、进度条、文本框等)的翻页动画效果。当用户在UI元素上进行互动时,翻页动画效果会在屏幕上呈现出来,为UI元素增添了动感和生动性。 该Shader的实现原理是基于OpenGL ES Shading Language(GLSL)语言,通过在shader中定义相关变量、函数、计算等操作,实现不同UI元素的翻页动画效果。例如,实现按钮按下时的翻页动画效果,可以通过以下操作实现:先定义一个时间变量t,通过逐渐递增这个变量,实现按钮的“翻页”效果,和控制按钮的不透明度变化,实现按钮尺寸变化及颜色变化等,从而达到翻页动画效果的目的。 UGUI翻页动画Shader具有高效运行、易于实现、定制性高等特点,在游戏制作、APP开发等领域被广泛应用。该Shader不仅可以实现基本的翻页动画效果,还可以实现更复杂的动画效果,例如卡片翻转、书页翻动等。 总之,UGUI翻页动画Shader是拥有广泛应用前景和开发价值的一种Shader,具有灵活性和多样性,可以大大增强游戏、APP等项目的用户体验效果。 ### 回答2: UGUI是Unity自带的UI系统,可以用于制作UI界面。而翻页动画则是一种常见的UI效果,在翻页过程中,页面会根据鼠标的拖动或者触摸移动,并且具有一定的阻尼效果,这样用户可以更加自然的翻页。 UGUI翻页动画的实现离不开Shader技术,Shader可以控制UI界面中每个元素的材质,包括颜色、纹理、透明度、反射率、折射率等属性,通过改变这些属性的值来制作出不同的效果。 翻页动画使用的Shader技巧主要包括: 1. 数学计算:通过计算页面的位置和距离来实现页面的移动和旋转,并且加入阻尼效果,使得页面翻转更加自然。 2. 材质属性:通过修改材质属性来实现不同的效果,比如设置不同的透明度来模拟页面翻转的过程,设置反射率和折射率来模拟页面的光影效果。 3. 贴图:通过贴图来实现页面内容的翻转效果,比如将背面的贴图翻转过来来模拟翻页过程中页面内容的变化。 总之,在实现UGUI翻页动画的过程中,Shader技术起到了至关重要的作用,通过合理的使用数学计算、材质属性和贴图等技巧,可以制作出各种不同的翻页动画效果,为UI界面增添更多的视觉效果和用户体验。 ### 回答3: ugui翻页动画shader实质上是一种用于实现翻页动画的渲染技术。这种技术能够让UI界面的元素在翻页时呈现出更加真实的效果,使得用户交互更加自然、流畅。该技术对于游戏或其他需要实现UI交互的应用程序都具有较高的实用性。 ugui翻页动画shader通常是由基于OpenGL或DirectX API等底层图形库实现的。它使用了像纹理映射、着色器等高级渲染技术,将翻页过程的各个阶段的纹理映射和着色组合起来,从而生成一种类似于真实书本翻页的效果。在使用过程中,ugui翻页动画shader需要许多参数来进行自定义配置,比如翻页速度、翻页曲率、阴影、透明度、边缘变形等等,可以根据实际需求进行相关设置。 在实现ugui翻页动画shader时,需要使用着色器编程语言进行编写,并且需要深入了解OpenGL或DirectX API的渲染原理。目前,许多专业3D制作软件都提供了ugui翻页动画shader的可视化开发工具,使得非专业人员也可以用较少的时间和精力实现比较高质量的翻页效果。 总的来说,ugui翻页动画shader技术的出现,不仅仅是UI界面效果的提升,更是对UI交互带来的革新和用户体验的提升。随着技术的不断发展,ugui翻页动画shader也将不断完善和更新,为用户的交互体验提供更加细致、流畅的支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天涯过客TYGK

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值