By Ne0 — May 20, 2024

Unity之制作卷轴展开显示画面效果

一、效果

二、思路

使用一个矩形图片添加Mask，Mask子物体下是要展示的卷轴bg图片

场景演示示例：左侧灰色的举行图片是Mask，在场景中拖动bg图片后的效果。

这样卷轴滚动的画面就有了，用同样的方法在添加一个卷轴让他变得更加真实

使用animator录制动画，移动卷轴，同时移动卷轴背景内容，就产生了卷轴展开的效果（内容效果的展示也是如此）注意内容的展示，Mask是控制大小，同时内容图片锚点要设置成如下

三、脚本项目下载

控制animator动画，类似进度条效果

using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;
using UnityEngine;
using UnityEngine.EventSystems;

/// <summary>
/// 卷轴拖动效果
/// </summary>
public class ScrollEffect : MonoBehaviour
{
    public float speed=0.2f;
    public RectTransform drayScroll;
    public Animator ani;

    void Start()
    {
        
        ani.speed = 0;

    }
    public bool isDray;
    float step;
    Vector3 mouseOldPos;
    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            mouseOldPos = Input.mousePosition;
        }

        if (Input.GetMouseButton(0))
        {
            if (!isDray)
                isDray = GetFirstPickGameObject(Input.mousePosition) == drayScroll.gameObject;

            //单击卷轴可移动
            if (!isDray)
                return;

            Vector2 mousePos = Input.mousePosition - mouseOldPos;
            step += mousePos.x*speed * Time.deltaTime;

            if (mousePos.x>0)
            {
                if (step>=1)
                {
                    step = 1;
                }
            }
            else
            {
                if (step <= 0)
                {
                    step = 0;
                }
            }
            ani.Play("Test", 0, step);

            mouseOldPos = Input.mousePosition;

        }

        if (Input.GetMouseButtonUp(0))
        {
            isDray = false;
            ani.StopPlayback();
        }
    }


    #region UI射线检测
    /// <summary>
    /// 获取点击的UI类型Item
    /// </summary>
    /// <param name="position">点击屏幕坐标</param>
    /// <returns></returns>
    public GameObject GetFirstPickGameObject(Vector2 position)
    {
        EventSystem eventSystem = EventSystem.current;
        PointerEventData pointerEventData = new PointerEventData(eventSystem);
        pointerEventData.position = position;
        //射线检测ui
        List<RaycastResult> uiRaycastResultCache = new List<RaycastResult>();
        eventSystem.RaycastAll(pointerEventData, uiRaycastResultCache);
        if (uiRaycastResultCache.Count > 0)
            return uiRaycastResultCache[0].gameObject;
        return null;
    }
    #endregion

}