状態間のトランジション · A から B へ
タブインジケータのスライド标签指示器滑动
- 柔らかい敷物
- 滑っていく
- 途中で伸びる
選択状態の下地が前のタブから次へ滑り、途中で少し伸びて、着いたら戻ります。この伸びがすべてです。等速の移動は「位置が変わった」だけ、伸びは「同じものが引っ張られた」と伝えます。
使いどころ
2〜5 項目のセグメントコントロールに使います。項目が多い場合は使わないでください。五つ横切るのを待つより、素直にフェードした方が速いです。また left を動かさず transform で動かしてください。left は毎フレーム再レイアウトされ、引っかかります。
パラメータ
transform: translateX 0→128px · scaleX 1→1.18→1 · 320ms cubic-bezier(0.22, 1, 0.36, 1)
レシピ
タブインジケータのスライド → transform: translateX 0→128px · scaleX 1→1.18→1 · 320ms cubic-bezier(0.22, 1, 0.36, 1)
AI に渡す一文
タブインジケータを作ってください。選択下地を transform: translateX で目的のタブへ動かし、途中で scaleX 1→1.18→1 の伸びを加え、全体 320ms、cubic-bezier(0.22, 1, 0.36, 1) で。left や margin-left で動かさないでください。毎フレーム再レイアウトされます。