背景画像を拡大・移動させることで、画面中央のオブジェクト（アイコンなど）が動いているように錯覚させるテクニックです。スライダーを使ってリアルタイムに位置合わせを微調整します。
しくみ
- 背景画像を配置
- スライダー（
sldSet）を追加 - 背景画像の
Height/Width/X/Yプロパティをスライダーの値に連動させる - 画像がズーム＆スクロール → 相対的に中央のオブジェクトが移動して見える
実装手順
| 手順 | 内容 |
|---|---|
| 1 | キャンバスに背景画像（例: imgBg）を追加 |
| 2 | スライダー（sldSet）を追加し、Min と Max を適宜設定 |
| 3 | 背景画像プロパティに以下を設定 |
// 画像サイズ
Height: 1136 + sldSet.Value
Width: 640 + sldSet.Value
// 画像位置
X: 0 - sldSet.Value / 1.84
Y: 0 - sldSet.Value / 100
パラメータの意味
| プロパティ | 役割 | 調整の目安 |
|---|---|---|
Height / Width
|
縦横方向の拡大率 | 画面解像度に合わせて定数を変更 |
X |
左右位置の補正 | 係数 1.84 を変更してセンター合わせ |
Y |
上下位置の補正 | スクロール速度の微調整用 |
ポイント
- スライダーを最大まで動かした状態で 中央のアイコンがずれていないか を確認し、
1.84や100の係数を少しずつ修正して合わせると手早いです。 - 完成後は
sldSet.Visible = falseにしてスライダーを非表示にすれば、ユーザーには自然なアニメーションとして見えます。