やってみよう写真を押してみてください。左上の「‹」で戻ります
アニメーション・演出マイナー（知る人ぞ知る）
共有要素トランジション
Shared Element Transition / Hero Animation
一覧の写真を押すと、その写真がそのまま大きく広がって次の画面になる。戻ると元の場所へ縮む。
別名ヒーローアニメーションシェアードエレメントトランジションマッチムーブズームトランジション
どこで使われている？
- よく見かける場所
- Apple の写真アプリ、App Store、Pinterest、ネット通販の商品写真
- 使うとよい場面
- 一覧の写真から詳しい画面へ、つながりを感じさせて移りたいとき
- 避けたい場面
- 写真がない画面の移動
補足Flutter では「Hero」、iOS では「matchedGeometryEffect」という名前で知られています。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「共有要素トランジション（Shared Element Transition / Hero Animation）」を実装してください。 動き：一覧の小さな写真を押すと、その写真が元の位置と大きさから、次の画面の上部の大きな写真の位置と大きさへ、なめらかに移動しながら拡大する。周りの文字はあとからフェードで出す。戻るときは逆の動きで元の位置へ縮む。 使う部品：View Transitions API（view-transition-name）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | View Transitions API（view-transition-name） |
|---|---|
| iPhoneアプリなら | .matchedGeometryEffect（画面遷移なら .navigationTransition(.zoom)） |
| Androidアプリなら | SharedTransitionLayout + Modifier.sharedElement |
| Flutterなら | Hero |
| React Nativeなら | react-native-reanimated の sharedTransitionTag |