Unity 使用UGUI制作卷轴开启关闭效果

视频效果

请添加图片描述

代码

using UnityEngine.UI;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
using DG.Tweening.Core;
using DG.Tweening.Plugins.Options;

public class JuanZhou : MonoBehaviour
{
    [SerializeField]
    private RawImage rawImage;
    [SerializeField]
    /// <summary>
    /// Padding to be applied to the masking
    /// X = Left
    /// Y = Bottom
    /// Z = Right
    /// W = Top
    /// </summary>
    private RectMask2D rectMask2D;
    [SerializeField]
    private RectTransform Left;
    [SerializeField]
    private RectTransform Right;
    [SerializeField]
    private Vector4 rectMaskTarget;
    [SerializeField]
    private float LeftX;
    [SerializeField]
    private float RightX;
    [SerializeField]
    private float duration = 2;
    [SerializeField]
    private float LeftOriX;
    [SerializeField]
    private float RightOriX;

    private void Update()
    {
        if (Input.GetKeyUp(KeyCode.P))
        {
            Play();
        }
        else if (Input.GetKeyUp(KeyCode.O))
        {
            Close(true);
        }
    }
    /// <summary>
    /// 设置图片
    /// </summary>
    public void SetRawImage(Texture texture)
    {
        rawImage.texture = texture;
    }
    [ContextMenu("开启")]
    public void Play()
    {
        Play(true);
    }
    public void Play(bool Invoke = true)
    {
        float tmp = Invoke ? duration : 0;
        Left.DOAnchorPosX(LeftX, tmp).SetEase(Ease.Linear);
        Right.DOAnchorPosX(RightX, tmp).SetEase(Ease.Linear);
        rectMask2D.DoPadding(Vector4.zero, tmp).SetEase(Ease.Linear);
    }
    [ContextMenu("关闭")]
    public void Close()
    {
        Close(false);
    }
    public void Close(bool Invoke = true)
    {
        float tmp = Invoke ? duration : 0;
        Left.DOAnchorPosX(LeftOriX, tmp).SetEase(Ease.Linear);
        Right.DOAnchorPosX(RightOriX, tmp).SetEase(Ease.Linear);
        rectMask2D.DoPadding(rectMaskTarget, tmp).SetEase(Ease.Linear);
    }

    [ContextMenu("暂停")]
    public void Pause()
    {
        Left.DOPause();
        Right.DOPause();
        rectMask2D.DOPause();
    }


}

public static class RectMask2DExtensions
{
    public static TweenerCore<Vector4, Vector4, VectorOptions> DoPadding(this RectMask2D target, Vector4 endValue, float duration, bool snapping = false)
    {
        TweenerCore<Vector4, Vector4, VectorOptions> t = DOTween.To(() => target.padding, x => target.padding = x, endValue, duration);
        t.SetOptions(snapping).SetTarget(target);
        return t;
    }
}

##请添加图片描述
卷轴预制体结构

### 卷轴展开动画教程 #### 使用 UGUI 和 Dotween 实现卷轴展开效果 为了在 Unity 中实现卷轴展开的效果,可以采用一种较为直观的方法——通过 UI 切分和动画插件来完成。具体来说,UI 需要被切分成三个主要部分:左侧的卷轴、中间的内容区域以及右侧的卷轴[^2]。 这些组件应当放置在一个共同的父对象下以便于管理,并且应该根据设计需求调整各自的大小与位置关系。对于卷轴的部分,可以通过设置 Sprite 来模拟纸张或布料的感觉;而对于内容区,则可以根据实际应用填充文字或其他图形元素。 当涉及到动态变化时,推荐使用第三方库 DoTween 进行平滑过渡处理。DoTween 是一款功能强大且易于使用的补间动画工具集,在此案例中可以帮助轻松定义卷轴拉伸的动作路径及其属性改变过程(比如透明度渐变),从而达到自然流畅的视觉体验。 下面是一个简单的 C# 脚本例子,展示了如何利用 DoTween 创建基本的卷轴展开逻辑: ```csharp using UnityEngine; using DG.Tweening; public class ScrollUnfolding : MonoBehaviour { public RectTransform scrollLeft; // 左侧卷轴RectTransform引用 public RectTransform scrollRight; // 右侧卷轴RectTransform引用 public float unfoldDuration = 1.0f; // 展开持续时间 void Start() { UnfoldScroll(); } private void UnfoldScroll() { DOTween.KillAll(); // 清除所有正在运行的tweens // 定义两侧卷轴移动到最终位置的过程 scrollLeft.DOAnchorPosX(-scrollLeft.rect.width, unfoldDuration).SetEase(Ease.OutBack); scrollRight.DOAnchorPosX(scrollRight.rect.width, unfoldDuration).SetEase(Ease.OutBack); // 如果有其他想要同步执行的变化也可以在这里加入,例如alpha值变化等... } } ``` 这段脚本假设已经有一个预制体包含了上述提到的两个 `RectTransform` 组件作为左右两边的卷轴表示形式。它会在启动时自动触发一次完整的展开动作,其中采用了缓动函数 Ease.OutBack 来让运动显得更加生动逼真。 此外,如果希望进一步增强真实感,还可以考虑引入物理引擎特性或是基于旋轮线原理计算特定点位移的方式来进行更复杂的变形操作[^3]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值