[Unity] 스크롤 렉트 스크롤에 따라 Element들 스케일 효과 주기

 

미리보기

아래와 같은 효과를 구현했다

15프레임이라서 표현이 잘 안되지만 대충 이런거다

---

코드

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

// 스크롤 했을 때 element가 뷰포트 중앙에서 멀어질수록 스케일이 작아지는 효과 클래스
public class ScrollRectElementScaleEffect : MonoBehaviour
{
    [SerializeField]
    private ScrollRect myScrollRect;

    public float distanceFactor = 0.01f;

    private void Start()
    {
        OnValueChanged(Vector2.zero);
    }

    public void OnValueChanged(Vector2 value)
    {
        for (int i = 0; i < myScrollRect.content.childCount; i++)
        {
            Vector2 pos = myScrollRect.content.GetChild(i).position;
            // 전제 조건: 뷰포트의 피봇이 (0.5 ,0.5)여야 함
            Vector2 viewportCenter = myScrollRect.viewport.position;

            float distance = Vector2.Distance(pos, viewportCenter);
            float scale = Mathf.Lerp(1f, 0.1f, distance * distanceFactor);
            myScrollRect.content.GetChild(i).transform.localScale = Vector3.one * scale;
        }
    }
}

 

 

• `OnValueChanged`메소드를 `ScrollRect`컴포넌트의 `OnValueChanged`이벤트에다가 연결해야한다

---

한계

• 스크롤 뷰의 피봇이 Element들의 중앙에 있어야 한다
• 뷰의 피봇은 (0.5, 0.5)여야 하며 사이즈는 Element들과 딱 맞아야한다
• 예를 들어 아래와 같은 모양은 제대로 작동하지 않을 것이다

피봇은 0.5지만 사이즈가 딱 맞지 않음

• 지금은 뷰의 센터를 뷰의 포지션을 끌어다 사용하기 때문인데 사이즈를 fit하게 못 할 경우라면 따로 센터 포지션을 빈 오브젝트를 만들어서 끌어다 쓰면 될 것 같다

 

---

여담

• 스냅 기능은 없는 스크롤 트랜지션 효과가 필요해서 만들었다
• 스냅 기능까지 필요하다면 직접 만들기보단 그냥 아래 무료에셋을 쓰는게 빠르다 스냅과 트랜지션 효과가 잘돼있는 에셋이다

Simple Scroll-Snap | GUI 도구 | Unity Asset Store