#196
インタラクション・アニメーション
#196とぅいーん
トゥイーン (Tweening)
別名・表記:TweeningIn-betweeningMotion Tween
UIXHERO Definition
「変形プロセス」。AからBへ変わる途中経過を作ること。
概要
伝統的な手描きアニメーションでは、原画を描く「原画マン」と、その間を埋める「動画マン(In-betweener)」が分業していた。 デジタルアニメーションでは、コンピュータがこの「動画マン」の役割を担い、計算によって中間フレームを生成する。これを「トゥイーン」と呼ぶ。トゥイーンは制作現場の用語であり、数学的には「補間(Interpolation)」によって実現されている。
実質的には「補間(Interpolation)」と同義だが、Flashなどのアニメーションツール文化から生まれた言葉として定着している。
UXでの活用
- 効率化: デザイナーは開始と終了の状態(キーフレーム)だけを定義すればよいため、アニメーション制作の工数を大幅に削減できる。
- 一貫性: コンピュータが計算するため、常に一定の品質と滑らかさで動く。ただし、温かみのある「ゆらぎ」や「崩し」を表現するには、手動での調整(フレームバイフレーム)が必要になることもある。
💡 使いどころ
アニメーション制作ソフト(Flash/Animateなど)や、プログラムでアニメーションを実装する際に使われる用語。
⚠️ 注意点・誤用
トゥイーンの設定(イージングやデュレーション)が不適切だと、動きが機械的で安っぽくなる。単にAB間を繋ぐだけでなく、そこに「物理法則」や「感情」を込める意識が必要。
具体例
- モーショントゥイーン:位置や大きさの変化を補間する
- シェイフトゥイーン:形状の変化(丸から四角へなど)を補間する
出典・参考文献:
- Thomas, F., & Johnston, O. (1981). The Illusion of Life: Disney Animation. New York: Disney Editions.
- Lasseter, J. (1987). Principles of traditional animation applied to 3D computer animation. Proceedings of SIGGRAPH '87, 35–44.
- W3C. (2012). CSS Animations Level 1. World Wide Web Consortium (W3C) Recommendation.
- Goldstein, E. B. (2014). Sensation and Perception (9th ed.). Cengage Learning.
関連する解説記事
関連する記事詳細が見つかりませんでした。