Unity Note - Project07 Scroll
coconutnut
 2021-02-14 20:09:34      

Test open animation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class ReelController : MonoBehaviour
{
    [SerializeField]
    private float radius = 0.1f; // Cylinder radius

    [SerializeField]
    private float length = 8.0f; // Quad length

    [SerializeField]
    private float innerHeight = 1.0f; // Quad height

    [SerializeField]
    private float outerHeight = 0.8f; // Cylinder height

    [SerializeField]
    private float openDuration = 1.0f;

    [SerializeField]
    private Ease moveEase = Ease.Linear;

    [SerializeField]
    private Transform leftCylinderTransform = null;

    [SerializeField]
    private Transform middleQuadTransform = null;

    [SerializeField]
    private Transform rightCylinderTransform = null;

    void Start()
    {
        // set original position
        middleQuadTransform.localScale = new Vector3(radius*2,innerHeight,0);
        middleQuadTransform.position = new Vector3(0,0,radius);

        leftCylinderTransform.localScale = new Vector3(radius*2,outerHeight,radius*2);
        leftCylinderTransform.position = new Vector3(-radius,0,0);

        rightCylinderTransform.localScale = new Vector3(radius*2,outerHeight,radius*2);
        rightCylinderTransform.position = new Vector3(radius,0,0);

        OpenReel();
    }

    void OpenReel()
    {
        // open canvas
        middleQuadTransform.DOScaleX(length + radius*2, openDuration).SetEase(moveEase);

        // move cylinders
        leftCylinderTransform.DOMoveX(leftCylinderTransform.position.x - length/2, openDuration).SetEase(moveEase);
        rightCylinderTransform.DOMoveX(rightCylinderTransform.position.x + length/2, openDuration).SetEase(moveEase);
    }
}

Display image

Drag images to asset folder -> Set type to Sprite -> Apply

Canvas -> Set Render Mode to World Space

Make sure all objects are positioned at (0, 0, 0)

Test size

1
2
3
4
5
6
7
8
9
10
11
12
RectTransform rectTransfrom = GetComponentInChildren<Image>().GetComponent<RectTransform>();

Debug.Log("rectTransfrom: "+rectTransfrom);
Debug.Log("rectTransfrom.rect: "+rectTransfrom.rect);
Debug.Log("rectTransfrom.sizeDelta: "+rectTransfrom.sizeDelta);

Rect rect = rectTransfrom.rect;
rectTransfrom.sizeDelta = new Vector2(rect.width/rect.height*canvasHeight,canvasHeight);

Debug.Log("rectTransfrom: "+rectTransfrom);
Debug.Log("rectTransfrom.rect: "+rectTransfrom.rect);
Debug.Log("rectTransfrom.sizeDelta: "+rectTransfrom.sizeDelta);

Set scroll size

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class ReelController : MonoBehaviour
{
    [SerializeField]
    private float canvasHeight = 1000;

    [SerializeField]
    private float cylinderHeight = 600;

    [SerializeField]
    private float cylinderRadius = 30;

    [SerializeField]
    private float openDuration = 1.0f;

    [SerializeField]
    private Ease moveEase = Ease.Linear;

    [SerializeField]
    private Transform leftCylinderTransform = null;

    [SerializeField]
    private Transform rightCylinderTransform = null;

    void Start()
    {
        // get image rectTransfrom
        RectTransform rectTransfrom = GetComponentInChildren<Image>().GetComponent<RectTransform>();
        // get original image size
        Rect rect = rectTransfrom.rect;
        // scale to default height
        float canvasWidth = rect.width / rect.height * canvasHeight;
        rectTransfrom.sizeDelta = new Vector2(canvasWidth, canvasHeight);

        // set original position
        leftCylinderTransform.localScale = new Vector3(cylinderRadius*2, cylinderHeight, cylinderRadius*2);
        leftCylinderTransform.position = new Vector3(-cylinderRadius - canvasWidth/2,0,0);

        rightCylinderTransform.localScale = new Vector3(cylinderRadius*2, cylinderHeight, cylinderRadius*2);
        rightCylinderTransform.position = new Vector3(cylinderRadius + canvasWidth/2,0,0);
    }
}

Scroll animation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class ScrollController : MonoBehaviour
{
    [SerializeField]
    private float canvasHeight = 1000;

    [SerializeField]
    private float cylinderHeight = 600;

    [SerializeField]
    private float cylinderRadius = 30;

    [SerializeField]
    private float openDuration = 1.0f;

    [SerializeField]
    private Ease moveEase = Ease.Linear;

    [SerializeField]
    private Transform leftCylinderTransform = null;

    [SerializeField]
    private Transform rightCylinderTransform = null;

    void Start()
    {
        // Open();

        OpenAnimation();
    }

    private void Open()
    {
        // get image rectTransfrom
        RectTransform rectTransfrom = GetComponentInChildren<Image>().GetComponent<RectTransform>();
        // get original image size
        Rect rect = rectTransfrom.rect;
        // scale to default height
        float canvasWidth = rect.width / rect.height * canvasHeight;
        rectTransfrom.sizeDelta = new Vector2(canvasWidth, canvasHeight);

        // set original position
        leftCylinderTransform.localScale = new Vector3(cylinderRadius*2, cylinderHeight, cylinderRadius*2);
        leftCylinderTransform.position = new Vector3(-cylinderRadius - canvasWidth/2,0,0);

        rightCylinderTransform.localScale = new Vector3(cylinderRadius*2, cylinderHeight, cylinderRadius*2);
        rightCylinderTransform.position = new Vector3(cylinderRadius + canvasWidth/2,0,0);

        Debug.Log("Scroll opened: " + rectTransfrom.rect);
    }

    void OpenAnimation()
    {
        // get image rectTransfrom
        RectTransform rectTransfrom = GetComponentInChildren<Image>().GetComponent<RectTransform>();
        // get original image size
        Rect rect = rectTransfrom.rect;

        // set width to 0
        rectTransfrom.DOScaleX(0, 0).SetEase(moveEase);

        // scale to default height
        float canvasWidth = rect.width / rect.height * canvasHeight;
        // open canvas
        float scaleX = canvasWidth/rect.width;
        float scaleY = canvasHeight/rect.height;
        rectTransfrom.DOScale(new Vector2(scaleX, scaleY), openDuration).SetEase(moveEase);

        // move cylinders
        leftCylinderTransform.localScale = new Vector3(cylinderRadius*2, cylinderHeight, cylinderRadius*2);
        leftCylinderTransform.DOMoveX(leftCylinderTransform.position.x - canvasWidth/2, openDuration).SetEase(moveEase);

        rightCylinderTransform.localScale = new Vector3(cylinderRadius*2, cylinderHeight, cylinderRadius*2);
        rightCylinderTransform.DOMoveX(rightCylinderTransform.position.x + canvasWidth/2, openDuration).SetEase(moveEase);

        Debug.Log("Scroll opened with animation: " + rectTransfrom.rect);
    }
}