#274
インタラクション・アニメーション
#274ほかん
補間 (Interpolation)
別名・表記:InterpolationIn-betweeningTweening
UIXHERO Definition
「間を埋める」。A地点からB地点までの道のりを、コンピュータに描かせること。
概要
アニメーションの歴史において、熟練のアニメーターが「原画（Keyframe）」を描き、アシスタントがその間の動き「中割り（In-between）」を描く工程が存在した。 デジタルアニメーションでは、この「アシスタント」の役割をコンピュータの補間機能が担っている（Tweeningとも呼ばれる）。 数値データやレスポンシブレイアウトなど、視覚表現以外の分野でも補間は広く使われている。
UXでの活用
- 滑らかさ: 高いフレームレート（60fpsなど）で補間を行うことで、カクつきのない滑らかな動きを実現し、高級感や没入感を高める。
- 変化の連続性: 画面サイズが変わるレスポンシブな動作において、レイアウトが断続的に切り替わるのではなく、連続的に変化（補間）することで、ユーザーは空間的な位置関係を見失わずに済む。
💡 使いどころ
アニメーションを滑らかに見せたい時。データ点の間の値を推定したい時。
⚠️ 注意点・誤用
単純な線形補間（Linear Interpolation）では動きが機械的になるため、イージング（Easing）などの補間アルゴリズムを適切に選ぶ必要がある。
具体例
- 位置の補間：キャラクターが地点Aから地点Bへ移動する際、その中間の位置をフレームごとに計算する。
- 色の補間：赤から青へ変化する際、中間の紫色の階調を計算する。
出典・参考文献:
- Thomas, F., & Johnston, O. (1981). The Illusion of Life: Disney Animation. New York: Abbeville Press.
- Foley, J. D., van Dam, A., Feiner, S. K., & Hughes, J. F. (1995). Computer Graphics: Principles and Practice (2nd ed.). Addison-Wesley.
- Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.
関連する解説記事
関連する記事詳細が見つかりませんでした。