クリックで画像を拡大する

2021年05月14日

画像データをクリックすると、ゆっくり拡大する動きをつけてみましょう。

写真をクリックすれば、約2倍の大きさまで拡大していきます。

画像のインポート

UI > 画像からImageオブジェクトを作成します。

Imageエリアが矩形で作成されるので、これを中央に配置します。

画像をインポートします。

Assetsの中で右クリック > 新しいアセットをインポート

テクスチャタイプを「スプライト（2DとUI）」に変更します。

「インポート設定が適用されていません」というダイアログは、適用するを選択します。

Imageを選択し、ソース画像からインポート画像を選択し、アスペクト比を保存にチェックを入れます。

画像を拡大するスクリプト

ClickScale.csを作成して、Imageに追加します。

ClickScale.csを記述しましょう。

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

public class ClickScale : MonoBehaviour
{
    public RectTransform photoSize;
    
    void Start()
    {
        photoSize = gameObject.GetComponent<RectTransform>();
    }

    public void ScaleUp() {
         StartCoroutine("ScaleUpStart");
    }

     IEnumerator ScaleUpStart()
    {
        for (int i = 100 ; i < 200 ; i+=10 ){
            photoSize.sizeDelta = new Vector2(i, i);
            yield return new WaitForSeconds(0.1f);
        }
    }
}