JP5645618B2

JP5645618B2 - 情報処理装置、情報処理方法、およびプログラム

Info

Publication number: JP5645618B2
Application number: JP2010258298A
Authority: JP
Inventors: 中川　賢一郎; 賢一郎中川; 廣田　誠; 誠廣田; 零石川; 正行石澤
Original assignee: Canon Inc
Current assignee: Canon Inc
Priority date: 2009-12-24
Filing date: 2010-11-18
Publication date: 2014-12-24
Anticipated expiration: 2030-11-18
Also published as: US9460537B2; US20110157188A1; JP2011150690A

Description

本発明は、ユーザインタフェースにおけるアニメーションを設計する情報処理装置、情報処理方法、およびプログラムに関する。

近年、機器やＷｅｂアプリケーションのＧＵＩ（ＧｒａｐｈｉｃＵｓｅｒＩｎｔｅｒｆａｃｅ）にアニメーションを取り入れたものが多くなった。

一方、ＧＵＩ開発においては、アニメーションを採用することでＧＵＩの開発工数が増大している。従来は「静止画」としてのＧＵＩを開発すれば良かったものの、「動き」という新たな概念を開発対象にしなければならなくなったためである。このため、近年、ＧＵＩのアニメーションを設計する技術として、特許文献１、特許文献２、特許文献３、特許文献４、および特許文献５が知られている。また、Ｍｉｃｒｏｓｏｆｔ社のＥｘｐｒｅｓｓｉｏｎＢｌｅｎｄやＡｄｏｂｅ社のＦＬＡＳＨＣａｔａｌｙｓｔ、Ｂｅａｔｗａｒｅ社のＭｏｂｉｌｅＤｅｓｉｇｎｅｒといった市販製品も登場している。

これらの先行技術では、タイムラインとフレームという概念を用い、アニメーションを設計していくことが一般的である。タイムラインとは、アニメーションを設計する上での時間軸である。ＧＵＩ開発者は、設計画面内においてこの時間軸上（タイムライン上）にフレーム（キーフレーム）と呼ばれる特徴時点を置き、フレーム毎（特徴時点毎）にアートワーク(キーフレームに対応づけられたＧＵＩの静止画でありアニメーションを構成するオブジェクトの表示形態を示す画像)を定義する。こうして生成された設計データは、ＧＵＩを実行する機器で解釈され、フレームのアートワークが設定された時点間の画像を補間する画像が生成される。図３は、アニメーション設計ツール３０１の一例である。このツールには、アートワーク編集パネル３０２とタイムライン編集パネル３０４がある。ＧＵＩ開発者は、まずタイムライン編集パネル３０４上でフレーム３０５、フレーム３０６を配置し、各フレームに対応したアートワークを編集する。例えば、配置したフレーム３０５を選択し、そのフレームに対応したアートワーク３０８をアートワーク編集パネル３０２上で編集する。このとき、図形要素パレット３０３から図形を選択し、アートワーク編集パネル３０２上に配置することも可能である。また、編集したアニメーションをアニメーション再生ボタン３０７で確認することも可能である。

例えば、図４（ａ）に示すようにタイムライン上に５つのフレーム（Ａ、Ｂ、Ｃ、Ｄ、Ｅ）を配置し、図４（ｂ）に示すようにそれぞれのフレームに５つのアートワーク（Ｖ、Ｗ、Ｘ、Ｙ、Ｚ）を定義したとする。すると、図４（ｃ）に示すような各アートワークが補間されたアニメーションが生成される。図４に示す例では、ＯＫというテキストを持つ楕円形のアートワークが、色と大きさが変わりながら１．４秒間で元の形に戻るアニメーションとなる。

このとき、タイムライン上の各フレームの位置を変更することで、アニメーションの修正を行うことも可能である。例えば、フレームＣをＤの方向に移動させることで、アートワークＷからＸにゆっくりと変形するようになり、ＸからＹには急速に変形するようになる。

特開平０８−１３７６１１号公報特開２００４−１０２５００号公報特許０３７５５５００号公報特開２００４−１０２４９８号公報特許０３７６０９０４号公報

このようなタイムラインとフレームを使ったアニメーション設計方式では、フレーム毎にアートワークを作成し、定義しなければならなかった。例えば、図４に示す例で、フレームＢとＤとで同じアートワークにしたい場合、ＢとＤとに対応するアートワークとして、同じＷとＹを作成する必要があった。

このように、フレーム毎に異なるアートワークを定義しなければならないという制約は、ＧＵＩ開発者の大きな負担となっていた。また、まったく同じアートワークでもデータとしては複数保持する必要があったため、作成したアニメーションデータサイズが増大するという課題があった。

上記の課題に鑑み、本発明は、フレームに対応するアートワークを、既存のアートワークからも選択できるようにすることを目的とする。また、アートワークを共有する複数のフレームを互いに連動させて操作できるようにすることを目的とする。

上記の目的を達成する本発明に係る情報処理装置は、
時間軸上の複数の時点にキーフレームを設定し、前記キーフレームの各々におけるオブジェクトの表示形態を示す情報に基づいて該オブジェクトを含むアニメーションを設計する情報処理装置であって、
画面に表示された前記時間軸上で、前記キーフレームを設定する時点と、当該時点に設定されたキーフレームにおけるオブジェクトの表示形態とを指示する操作を受け付ける受付手段と、
キーフレームを示す情報と、該キーフレームにおけるオブジェクトの表示形態を示す情報とを対応づけた情報を保持する保持手段と、
前記画面に表示された前記時間軸上の、前記キーフレームが設定された各時点に、当該時点に設定されたキーフレームを表す標識を表示させる表示制御手段とを有し、
前記表示制御手段は、
前記受付手段が受け付けた操作によって指示された時点に設定されたキーフレームにおける前記オブジェクトの表示形態が、既に設定された他のキーフレームにおけるオブジェクトの表示形態を共有する場合、に表示する前記標識と、前記受付手段が受け付けた操作によって指示された時点に設定されるキーフレームにおける前記オブジェクトの表示形態が、既に設定された他のキーフレームにおけるオブジェクトの表示形態を共有しない場合に表示する前記標識とを異ならせることを特徴とする。

本発明によれば、フレームに対応するアートワークを、既存のアートワークからも選択できるようになる。このため、同じアートワークを持つフレームにおいては、ＧＵＩ開発者の開発工数の削減と、アニメーションデータサイズの削減という効果がある。

アニメーション設計装置の機能構成図。アニメーション設計装置のフローチャート。一般的なアニメーション設計ツールの例を示す図。一般的なアニメーション設計方式の説明図。第１実施形態に係るフレーム追加方式の例を示す図。第１実施形態に係る既存アートワークを参照する例を示す図。（ａ）第１実施形態に係るアニメーション情報格納ファイルの例を示す図、（ｂ）第１実施形態に係るアートワーク情報格納ファイルの例を示す図。（ａ）アニメーション再生装置の機能構成図、（ｂ）アニメーション設計装置とアニメーション再生装置の関連を表したシステム図。第２実施形態に係るタイムライン編集パネルの例を示す図。第３実施形態に係るタイムライン編集パネルの例を示す図。第３実施形態に係る色間の類似度テーブルの例を示す図。第１実施形態に係るタイムライン編集パネルの例を示す図。第５実施形態に係るタイムライン編集パネルの例を示す図。第６実施形態に係るタイムライン編集パネルの例を示す図。第１実施形態に係るアニメーションの説明図。

（第１実施形態）
本発明に係るアニメーションを設計する情報処理装置は、例えばＰＣ（ＰｅｒｓｏｎａｌＣｏｍｐｕｔｅｒ）上で図３に示すようなアプリケーションとして実装することができる。アニメーション設計装置は、設計画面内において時間軸上の複数の位置に特徴時点（注目時点）を配置し、前記特徴時点ごとにアニメーションを構成するアートワーク(キーフレームに対応づけられたＧＵＩの静止画でありアニメーションを構成するオブジェクトの表示形態を示す画像）の表示形態を定義することによりアニメーションを設計するものである。

図１及び図２を参照して、本発明に係るアニメーション設計装置の基本的な動作について説明する。図１はアニメーション設計装置の機能構成図であり、図２はアニメーション設計装置の動作フローチャートである。アニメーション設計装置１０１には、マウス１０２、キーボード１０３といった、ＧＵＩ開発者が操作できるデバイスが接続されている。そして、生成された設計データを格納する格納装置１０４も接続されている。アニメーション設計装置１０１は、新規アートワーク割り当て部１０５、操作情報取り込み部１０６、既存アートワーク割り当て部１０７、フレーム追加部１０８、格納部１０９、フレーム連動制御部１１０を備える。ここで新規アートワーク割り当て部１０５は、新規のアートワークを割り当てる処理を行う。また操作情報取り込み部１０６は、ＧＵＩ開発者等による操作情報を取り込む処理を行う。既存アートワーク割り当て部１０７は、既存のアートワークを割り当てる処理を行う。フレーム追加部１０８は、フレームを追加する処理を行う。格納部１０９は、アニメーション設計データ（時間軸上の特徴時点の情報及び前記特徴時点に対応づけられたアニメーションを構成するアートワークの情報等）を格納する処理を行う。フレーム連動制御部１１０はアートワークを共有するフレームの連動処理を行う。

ステップＳ２０１において、マウスやキーボードといったデバイスから取り込んだ操作情報は、取得手段として機能する操作情報取り込み部１０６によってアニメーション設計装置１０１の内部に取り込まれる。取り込まれた操作情報により、その内容に応じてアニメーション設計装置１０１の動作が変更される。

具体的には、ステップＳ２０２において、第１判定手段として機能する操作情報取り込み部１０６は、操作情報がフレーム（キーフレーム）の追加指示であるか否かを判定する。例えば、図５に示すようにタイムライン上の特定位置にマウスポインタ５０２を置き、右クリックすることをフレームの追加指示とみなしても良い。フレームの追加指示が行われた場合（ステップＳ２０２；ＹＥＳ）、ステップＳ２０６に進む。ステップＳ２０６において、その情報がフレーム追加部１０８に送られ、タイムライン上に新規フレーム情報が追加（特徴時点が追加）される。次に、第２判定手段として機能する操作情報取り込み部１０６は、そのフレームに対応するアートワークが既存のものの参照かどうかを操作情報から判定する。例えば図５に示すように、フレームの追加指示が行われると新規挿入されたフレーム５０１をタイムライン上に表示する。そして、対応付けるアートワークが新規アートワークか、あるいは既存アートワークかを選択させるコンテキストメニュー５０３を表示するようにしても良い。

ＧＵＩ開発者の選択が、フレームに新規アートワークを対応付ける指示であった場合（ステップＳ２０６；ＮＯ）、その情報は新規アートワーク割り当て部１０５に送られる。ステップＳ２０８において、第１設定手段として機能する新規アートワーク割り当て部１０５は新規アートワークを作成し、今回追加したフレームから新規作成したアートワークへの参照情報を付与する。アートワークの新規作成は、アートワーク編集パネル３０２を用いてＧＵＩ開発者が行うことが可能である。このとき、デフォルトのアートワーク(最初にＧＵＩ開発者に提示するアートワーク)として、空のアートワークを提示しても良い。あるいは、タイムライン上で今回追加したフレームの直前のフレームに対応付けられたアートワークをコピーし、これを提示しても良い。

一方、ＧＵＩ開発者の選択が、フレームに既存のアートワークへの参照情報を付与する指示であった場合（ステップＳ２０６；ＹＥＳ）、その情報は既存アートワーク割り当て部１０７に送られる。ステップＳ２０７において、第２設定手段として機能する既存アートワーク割り当て部１０７は今回追加されたフレームにどの既存アートワークへの参照を付与するかをＧＵＩ開発者に選択させる。そして、選択された既存アートワークを、新規追加したフレームから参照付けする処理を行う。例えば図６（ａ）に示すようにコンテキストメニュー５０３から既存アートワークへの参照（Ｌｉｎｋｔｏａｒｔｗｏｒｋ）を選択すると、既存アートワーク一覧６０１をリストとして提示し、マウスポインタ５０２でこの中から一つを選択可能にしても良い。例えば、「Ａｒｔｗｏｒｋ２」が選択された場合、新規追加されたフレームに、既存アートワークである「Ａｒｔｗｏｒｋ２」への参照情報を付与する。

図６（ｂ）は、上記の一連の操作を行った後のタイムライン編集パネル３０４の例である。このとき、他のフレームとアートワークを共有しているフレームの識別表示（例えば、色又は形状）を変更しても良い。例えば、０．４秒の位置にあったフレーム６０３と、今回追加したフレーム６０２とが同じ「Ａｒｔｗｏｒｋ２」を参照していたと仮定する。その場合、他のフレームとの相違を識別可能な識別表示でフレームを表現する。ＧＵＩ開発者により、共有されているアートワークが変更されてしまうと、複数のフレームに影響が及び、思惑とは異なるアニメーションが生成されてしまう恐れがあるためである。このように、共有されたアートワークを参照しているフレームの識別表示を他のフレームの識別表示と変えることにより、ＧＵＩ開発者に注意を喚起することが可能となる。

一方、ステップＳ２０２において、フレームの追加指示ではないと判定された場合はステップＳ２０３に進む。ステップＳ２０３において、操作情報取り込み部１０６から装置内部に取り込まれた操作情報が、設計データ格納指示であった場合（ステップＳ２０３；ＹＥＳ）、その情報は格納部１０９に送られる。例えば、アプリケーション上のセーブボタンが押下された場合に、データ格納指示としてみなすことが可能である。ステップＳ２０９において、格納部１０９は、アニメーション設計装置１０１で設計された設計データ等を格納装置１０４に格納する。例えば、図７（ａ）に示すアニメーション情報格納ファイル７０１と、図７（ｂ）に示すアートワーク情報格納ファイル７５１を設計データとみなすことが可能である。

アニメーション情報格納ファイル７０１は、タイムライン上の各フレームの位置と、フレーム及びアートワークの関連とを記述したＸＭＬ形式のファイルである。本ファイルには、タイムライン情報７０２を表現した要素があり、その子要素として各フレーム情報７０３を持つ。各フレーム情報は、タイムライン上の時間情報や、アートワーク情報へのリンク情報７０４を持つ。アートワーク情報７０５は別に定義されており、そこにはアートワークのＩＤと、実際のアートワーク情報格納ファイル名が記述されている。なお、この例では、time="1.1" に置かれたframeと、time="0.4"に置かれたframeが、id="state_2"のartworkを共有している。そのため、本来frame要素の数だけ必要であるartwork要素自体の数(さらには、artwork要素から参照している*.svgファイルの数)を、削減することが可能である。

図７（ｂ）に示すアートワーク情報格納ファイル７５１は、特定のアートワークを表現したファイルであり、標準の画像フォーマットを利用することができる。例えば、Ｗ３ＣのＳＶＧをアートワーク情報格納ファイルとしても良い。アートワーク情報格納ファイル７５１は、ＳＶＧで記述されたアートワーク情報格納ファイルの例である。

なお、ここで例として述べた設計データの表現形式は一例であり、本発明はこの形式に限定されるものではない。アニメーション情報格納ファイルやアートワーク情報格納ファイルとして、ＸＨＴＭＬや、ＳＭＩＬで記述されたファイルを用いても良い。または、ＢｉｔｍａｐやＰＮＧ、Ｊｐｅｇといったバイナリ形式のフォーマットによってアートワークを表現しても良い。

ステップＳ２０３において、操作情報取り込み部１０６からアニメーション設計装置１０１内部に取り込まれた操作情報が、データ格納指示でなかった場合（ステップＳ２０３；ＮＯ）、ステップＳ２０４に進む。ステップＳ２０４において、操作情報取り込み部１０６からアニメーション設計装置１０１内部に取り込まれた操作情報が、終了指示であった場合（ステップＳ２０４；ＹＥＳ）、図２のフローから抜け、アニメーション設計装置１０１は動作を終了する。例えば、アプリケーションの終了ボタンが押下された場合に終了指示とみなすことが可能である。

一方、操作情報取り込み部１０６からアニメーション設計装置１０１内部に取り込まれた操作情報が、フレームの追加指示、データ格納指示（保存指示）、終了指示のいずれでもない場合（ステップＳ２０４；ＮＯ）、ステップＳ２１０に進む。ステップＳ２１０において、操作情報取り込み部１０６から装置内部に取り込まれた操作情報が、対象フレームをタイムライン上で移動する指示であった場合（ステップＳ２１０；ＹＥＳ）、その情報はフレーム連動制御部１１０に送られる。そして、その移動後の位置に対象フレームを移動する（ステップＳ２１１）。これによりアニメーション設計装置の内部データを書き換え、次回のデータ格納指示時にそのデータが格納装置に格納されることになる。

フレームを移動する操作の例として、タイムライン上のフレームをマウスでドラッグする操作が考えられる。これは、特定のアートワークを表示する時刻を、別時刻に変更する操作に相当する。例えば図１２（a）では、移動するフレーム（１２０１）をタイムライン上の移動後の位置（１２０２）に移動している例である。

次に、その移動対象のフレームが別のフレームとアートワークを共有するものであるかを判定する（ステップＳ２１２）。例えば、機器のメモリ上にあるフレームとアートワークの対応関係を調べる。そして、移動対象のフレームに対応付けられているアートワークと同じアートワークに対応付けられたフレームが存在するかどうかを判定する。移動対象のフレームが別のフレームとアートワークを共有するものである場合（ステップＳ２１２；ＹＥＳ）、そのフレームをＧＵＩ開発者が行った移動処理と同じ方向に移動するかを判定する（ステップＳ２１３）。これは、アニメーション設計装置の内部メモリにアクセスし、同じ方向に移動するか反対方向に移動するかのフラグを参照することで実現することが可能である。そして、このフラグはＧＵＩ開発者が前もってアニメーション設計装置の設定画面等を通し、設定しておくことが可能である。あるいは、移動対象のフレームを移動するときに行ったＧＵＩ開発者の操作に応じて、アートワークを共有するフレームの移動方向を決定してもよい。例えば、キーボードのコントロールキーを押しながらフレームを移動した場合は、アートワークを共有するフレームを反対方向に移動するようにする。そして、キーボードを押さずにフレームを移動した場合は、アートワークを共有するフレームを同じ方向に移動するようにするといった制御も可能である。

ここでは、移動対象のフレームとアートワークを共有するフレームが、同じ方向に連動すると判定された場合（ステップＳ２１３；ＹＥＳ）を想定する。この場合、移動対象フレームが移動した方向と同じ方向にアートワークを共有するフレームも移動させる（ステップＳ２１４）。そして、その移動量は同じとしてもよい。図１２(b)はこのときのアニメーション設計装置のＧＵＩの例である。ユーザがマウス等で特定のフレームを移動すると、アートワークを共有するフレームも同じ方向に同じ移動量だけ移動した位置（１２０３）に連動して移動するようになる。

一方、移動対象のフレームとアートワークを共有するフレームが、同じ方向に連動すると判定されなかった場合（ステップＳ２１３；ＮＯ）を想定する。この場合、移動対象のフレームが移動したのと反対の方向にアートワークを共有するフレームも移動させる(ステップＳ２１５)。そして、その移動量は同じとしてもよい。図１２(c)はこのときのアニメーション設計装置のＧＵＩの例である。ユーザがマウス等で特定のフレームを移動すると、アートワークを共有するフレームも反対の方向に同じ移動量だけ移動した位置１２０４に連動して移動するようになる。

図１５はこのようなフレームの連動機能を利用して設計されたアニメーションの例である。図１５(a)はアートワークを共有するフレームを反対方向に動かした例である。タイムライン上の１５０１のアートワークに対応付けられたフレームを時刻Ｔ分後ろに移動したことにより、そのアートワークを共有するフレームである１５０２も時刻Ｔ分前に移動させることが可能となる。このようにアートワークを共有するフレームが反対方向に移動するようになると、タイムライン中央からの対象性が保たれる。このため、一度別の形に変形し、元の形に折り返して戻るような特徴を持つアニメーションを設計する場合での相性がよい。

また、図１５(b)はアートワークを共有するフレームを同じ方向に動かした例である。タイムライン上の１５０３のアートワークに対応付けられたフレームを時刻Ｔ分後ろに移動したことにより、そのアートワークを共有するフレームである１５０４も時刻Ｔ分後ろ移動させることが可能となる。このようにアートワークを共有するフレームが同じ方向に移動するようになると、それらのフレーム間の時間が維持される。このため、一度別の形に変形し、元の形に（移動前と）同じ時間で折り返して戻るような特徴を持つアニメーションを設計する場合での相性がよい。

操作情報取り込み部１０６からアニメーション設計装置１０１内部に取り込まれた操作情報が、フレームの追加指示、データ格納指示（保存指示）、終了指示、フレーム移動指示のいずれでもない場合（ステップＳ２１０；ＮＯ）、ステップＳ２０５に進む。ステップＳ２０５において、その操作に応じた処理を実行する。例えば、アートワーク上の特定の図形の色を変えるといった編集指示の場合、それに応じた処理を実行する。また、フレームをドラッグすることで、その位置を変更するような指示であった場合も、それに応じた処理を行うことが可能である。また、アニメーション再生ボタン３０７が押下された場合、次に説明するアニメーション再生装置を起動し、作成したアニメーションをプレビューすることが可能である。

図８（ａ）を参照して、アニメーション再生装置８０１の機能構成について説明する。アニメーション再生装置８０１は、データ取り込み部８０３を介し、格納装置１０４内に設計データ(アニメーション情報格納ファイル７０１、アートワーク情報格納ファイル７５１)を読み込む。そして、読み込んだ設計データはアニメーション生成部８０４に送られ、ここでアートワーク間を補間するアニメーションが生成される。この方法は、ＭｏｔｉｏｎＴｗｅｅｎやＳｈａｐｅＴｗｅｅｎといった公知の技術を利用することができるため、ここでは説明を省略する。生成されたアニメーションは、アニメーション再生部８０５に送られ、ここでディスプレイ８０２を介して出力される。このアニメーション再生装置８０１はアニメーション設計装置１０１と同じアプリケーション上で実装されても良いし、別のアプリケーションとして実装されても良い。あるいは、アニメーション再生装置８０１を音楽プレーヤや携帯電話とった組み込み機器上に実装することで、ユーザ向けのアニメーション提示アプリアプリケーションとすることも可能である。

図８（ｂ）は、これまでに説明した各装置のシステム図である。なお、参照番号は、これまでの各図に登場したものと同じものは同一の番号で表している。アニメーション設計装置１０１で作成された格納装置１０４上の設計データを、アニメーション再生装置８０１が利用することが可能となっている。

本実施形態に係るアニメーション設計装置を用いることにより、次のような効果が得られる。まず、フレームにアートワークを割り当てる際に、新規にアートワークを作成するだけではなく、既存のアートワークを割り当てることも可能となる。これにより、ＧＵＩ開発者のアートワーク作成工数を削減でき、かつ、設計データのサイズを削減することが可能である。また、アートワークを共有しているフレームの識別表示を他のフレームの識別表示とは別の種類に変更することにより、ＧＵＩ開発者にアートワークの共有状態を意識させることが可能である。これにより、あるフレームのアートワーク編集が、別のフレームにも影響を与えるという注意を喚起することが可能となる。さらに、アートワークを共有しているフレームが複数あった場合、その一方のフレームをタイムライン上で移動した場合は、その他の共有しているフレームも注意深く移動しなければ生成されるアニメーションの整合性がとれないことが多かった。しかし、本実施形態のアニメーション設計装置では、この連動を設計装置側が保障してくれるようになるため、ＧＵＩ開発者の設計工数が短縮されるようになる。

（第２実施形態）
第１実施形態では、アートワークを共有しているフレームの識別表示を変えることで、ＧＵＩ開発者にアートワークの共有状態を意識させた。しかし、この方法では、アートワークを共有しているフレームは一律して外観（標識）が変わっており、どのフレームとアートワークを共有しているのか判断が困難になる場合がある。

図９を参照して、上記の問題を解決するタイムライン編集パネルの例について説明する。普段のフレームの識別表示は変更せず、ＧＵＩ開発者がフレームを選択した場合に、その外観（標識）を変更する。例えば、フレーム９０１を選択した場合、そのフレームとアートワークを共有するフレームの識別表示(例えば、色や形状)だけを変更する。さらに、これらのフレームを線９０２などで結ぶ（特徴時点の識別表示同士を線で結ぶ）ことで、共有関係を強く意識させることも可能である。

また、フレームの識別表示を変えるだけでは画面外のフレームとアートワークを共有しているかどうかを判断することができない。そこで、画面外のフレームとアートワークを共有している場合は、図９に示すように線９０２を画面の外に伸ばすことにより、そちらに共有しているフレームがあることをＧＵＩ開発者に通知することが可能となる。

本実施形態に係るアニメーション設計装置を用いることにより、次のような効果が得られる。同一の外観（標識）を有する特徴時点が複数存在する場合、アートワークを共有しているフレームをそのフレームを選択したときのみ識別表示を変えることで、特定の共有関係だけを確認することが可能となる。また、画面に表示されていないフレームとの共有関係も、意識するこが可能となる。

（第３実施形態）
第３実施形態では、アートワークを共有しているフレームの識別表示を変更する例を説明する。図１０（ａ）は、参照しているアートワーク毎にフレームの識別表示を変更した例である。フレーム１００１とフレーム１００５とが同じアートワークを参照していると仮定する。また、フレーム１００２とフレーム１００４とが同じアートワークを参照していると仮定する。そして、フレーム１００３は、他のフレームとはアートワークを共有していないと仮定する。

ＧＵＩ開発者からフレームのアートワークを共有する指示が行われると、アニメーション設計装置１０１は、共有している全フレームの識別表示をデフォルトとは異なるものに変更する。例えば、タイムライン上に登場していない形状のアイコンを選択し、フレームの識別表示としてそれを設定する。このようにして、例えばフレーム１００２とフレーム１００４のタイムライン上の識別表示が、ダイヤ型に変更され、フレーム１００１とフレーム１００５の外観（標識）がハート型に設定される。このとき、形状だけではなく、色もタイムライン上で一意となるように変更しても良い。

図１０（ｂ）は、フレームの識別表示自体を変更するのではなく、フレームに対応するアートワークのサムネイル画像を付与した例である。各フレーム１０５１からフレーム１０５５に、そのフレームに対応付けられたアートワークのサムネイル１０５６が付与されている。この方式だと、タイムラインを見ただけで、アートワークの概形の移り変わりが容易に理解できるという利点がある。また、共有しているアートワーク毎に、フレームの色をユニークなものに変更することで、アートワークの共有関係も理解することが可能である。

これまでに述べてきたように、アートワークを共有しているフレームの識別表示ごとに異なる色を割り当てることで、ＧＵＩ開発者にアートワークの共有関係を意識させることができ、効果的である。ここでは、どのように色を割り当てるかを説明する。

本実施形態に係るアニメーション設計装置１０１がフレームに色を割り当てる際、図１１に示すような色間の類似度テーブル１１０１を用いることが可能である。具体的には、アートワークにもっとも多く含まれている色と類似度が高く、かつ、左右のフレームの色と類似度が低いものを選択する。例えば、次のような評価式を用い、もっとも高いスコアとなる色をフレームの色として選択する。

色Ａのスコア＝色Ａとアートワークに最も多く含まれる色との類似度
− 色Ａと左隣のフレームの色との類似度
− 色Ａと右隣のフレームの色との類似度
例えば、アートワークにもっとも多く含まれる色が青で、左右のフレームの色がオレンジの場合、上記の評価式を用いると次のようになる。

青のスコア＝１−０−０＝１
オレンジのスコア＝０−１−１＝ −２
緑のスコア＝０．８−０．５−０．５＝ −０．２
これにより、スコアのもっとも高い色である青を選択し、フレームの色とすることが可能である。なお、このような計算式や色間の類似度テーブルは一例であり、他のものを用いることも可能である。また、左右のフレームとの間隔（特徴時点間の時間軸上の距離）により、フレームに割り当てる形状を変更してもよい。例えば、左右のフレームが接近している間に新規のフレームを挿入した場合、なるべく狭い形状のフレームを割り当てると、フレームの重なりが生じることなく見やすくなる。これを実現するには、割り当て可能なフレームの形状毎に、どの程度の表示幅が必要かを表示幅情報テーブルとして保持しておく。そして、フレームの識別表示を変更する際に、上記テーブルを参照し、左右のフレーム間隔に入り得る形状からフレームの形状を選択し、割り当てるようにする。

本実施形態に係るアニメーション設計装置１０１を用いることにより、次のような効果が得られる。アートワークを共有しているフレーム毎に異なる識別表示(例えば、色や形状)を設定することが可能となる。その際に、アートワークのサムネイルやアートワークに最も多く含まれる色を考慮した識別表示に変更することが可能である。これにより、そのフレームを見ただけで、アートワークを想起することが可能となる。また、タイムライン上で左右のフレームの色や配置間隔を考慮し、そのフレームの識別表示を変更することが可能となる。これにより、タイムライン上でフレーム同士が重なってしまうことが避けられ、視認性が向上する。

（第４実施形態）
第４実施形態では、アートワークを共有しているフレームをタイムライン上で移動させた場合に、識別表示(例えば、色や形状)を再び割り当てする動作について説明する。例えば、フレームの移動指示がマウス等で行われ、赤の色が割り当てられたフレームを、オレンジのフレームに挟まれた領域に移動した場合を想定する（特徴時点の識別表示の移動）。この場合、移動後のフレーム並びは、オレンジ、赤、オレンジとなり、類似度が高いため近接する特徴時点と区別し難くなり視認性が低下する。そこで、他のフレームをまたぐフレーム移動を行った場合、移動先のフレームの識別表示(例えば、色や形状)を再割り当てしても良い。このときの色割り当て方式は、例えば第３実施形態で説明した方式を利用しても良い。

本実施形態に係るアニメーション設計装置１０１を用いることにより、次のような効果が得られる。ＧＵＩ開発者がフレームの移動を行った場合でも、特徴時点の識別表示の再割り当てが行われるため、移動先でも視認性が保たれる。

（第５の実施形態）
第５実施形態では、アートワークを共有しているフレームをタイムライン上で移動させた場合に、連動するフレームの移動量を変更する動作について説明する。図１３は"Push"と"Fast push"という異なるアニメーションを編集しているアニメーション設計ツールの例である。"Push"はＧＵＩボタンが通常の速度で押下されたときのアニメーションであり、"Fast push"は通常よりも速い速度で押下されたときのアニメーションであるとする。このように、表示する速度は異なるが、表示するアートワークは同じであるようなアニメーションを設計する場合は、タイムライン上のフレームで、異なるアートワークを共有することが設計効率上望ましい。

ここでＧＵＩ開発者はマウス操作により、例えば、フレーム１３０３をタイムライン上で移動したとする。その際、１３０４がアートワークを共有するフレームであるとすると、第１実施形態により１３０４も連動させることが可能である。このときの連動量は、第１実施形態ではフレーム１３０３の移動量と同じであるとしていたが、この移動量に特定の定数をかけた値を１３０４の移動量としてもよい。

例えば、アニメーション設計ツールの設定画面等で、"Push"に対して"Fast push"は２倍の速度でアニメーションすることを前もって設定しておくと、この値を分母とする１／２という値を定数値として利用することが可能である。従って、もしフレーム１３０３を0.5秒分前に移動した場合、この0.5秒に定数１／２をかけた結果である0.25秒分前に移動することで連動させることが可能である。

あるいは、この定数値を設定画面等で前もって設定しておくのではなく、それぞれのアニメーションの長さの比から動的に計算してもよい。アニメーションの長さとは、アニメーションを構成する最終フレームの位置に相当するため、この長さの取得は容易に行うことが可能である。

例えば、"Push"アニメーションの終了時間（最終フレームの位置）が1.4秒であり、"Fast push"アニメーションの終了時間（最終フレームの位置）が0.7秒であったとする。この場合、"Push"のフレーム移動量に対する"Fast push"のフレーム移動定数を
"Fast push"アニメーションの終了時間 / "Push"アニメーションの終了時間
とおくことができ、0.5と算出することが可能である。そして、"Push"のフレームがＧＵＩ開発者によって移動した場合には、その移動量に0.5をかけた値の移動量で、"Fast push"のフレームを連動させることが可能となる。

本実施形態に係るアニメーション設計装置１０１を用いることにより、次のような効果が得られる。長さが異なるアニメーション上でアートワークを共有するフレームが存在していた場合、そのアニメーション時間を考慮した連動を行うことが可能となる。

（第６実施形態）
第６実施形態では、アートワークを共有しているフレームをタイムライン上で移動させた場合に、連動するフレームの移動を制限する動作について説明する。図１４は"Push1"と"Push2"という異なるアニメーションを編集しているアニメーション設計ツールの例である。"Push1"と"Push2"は、アニメーションの大枠は同じであるが、"Push2"の方は１４０５のフレームが一つ余分に入っているところが異なる。

第１実施形態を利用すると、１４０３のフレームをマウス操作等で移動すると、そのフレームとアートワークを共有するフレーム（１４０４）を同じ移動量分移動することが可能である。また、第５実施形態を利用すると、１４０３の移動量に特定の定数をかけた値だけ移動することが可能である。しかし、連動するフレームが別のフレームを跨いでしまう（別のフレームとの前後関係が変わってしまう）と、そのアニメーションでは、見えが大きく異なってしまう。そのため、連動動作により別のフレームを跨ぐまたぐことは避けた方がよい。

このため、本実施形態では、連動後のフレーム位置が別のフレーム（１４０５）を跨ぐ場合には、その別フレームを跨ぐ直前の位置にフレームの位置を移動する。これにより、最終的なフレームに並びが連動動作により変更されてしまう結果を避けることが可能となる。また、連動した結果が別のフレームと非常に近い位置となってしまう場合は、前もって設定された一定の距離分だけ間を開けてフレームを移動することも可能である。

本実施形態に係るアニメーション設計装置１０１を用いることにより、次のような効果が得られる。フレームの連動機能により、別のフレームとの並び順が変わってしまう状態を避けることが可能となる。

（その他の実施形態）
また、本発明は、以下の処理を実行することによっても実現される。即ち、上述した実施形態の機能を実現するソフトウェア（プログラム）を、ネットワーク又は各種記憶媒体を介してシステム或いは装置に供給し、そのシステム或いは装置のコンピュータ（またはＣＰＵやＭＰＵ等）がプログラムを読み出して実行する処理である。

Claims

時間軸上の複数の時点にキーフレームを設定し、前記キーフレームの各々におけるオブジェクトの表示形態を示す情報に基づいて該オブジェクトを含むアニメーションを設計する情報処理装置であって、
画面に表示された前記時間軸上で、前記キーフレームを設定する時点と、当該時点に設定されたキーフレームにおけるオブジェクトの表示形態とを指示する操作を受け付ける受付手段と、
キーフレームを示す情報と、該キーフレームにおけるオブジェクトの表示形態を示す情報とを対応づけた情報を保持する保持手段と、
前記画面に表示された前記時間軸上の、前記キーフレームが設定された各時点に、当該時点に設定されたキーフレームを表す標識を表示させる表示制御手段とを有し、
前記表示制御手段は、
前記受付手段が受け付けた操作によって指示された時点に設定されたキーフレームにおける前記オブジェクトの表示形態が、既に設定された他のキーフレームにおけるオブジェクトの表示形態を共有する場合、に表示する前記標識と、前記受付手段が受け付けた操作によって指示された時点に設定されるキーフレームにおける前記オブジェクトの表示形態が、既に設定された他のキーフレームにおけるオブジェクトの表示形態を共有しない場合に表示する前記標識とを異ならせることを特徴とする情報処理装置。
前記表示制御手段は、前記受付手段によって、前記設定されたキーフレームにおける前記オブジェクトの表示形態が、既に設定された他のキーフレームにおけるオブジェクトの表示形態と同じとする操作が受け付けられたことに応じて、前記設定されたキーフレームとオブジェクトの表示形態を共有するフレームの標識の色を変更することを特徴とする請求項１に記載の情報処理装置。
前記表示制御手段は、前記受付手段によって、前記設定されたキーフレームにおける前記オブジェクトの表示形態が、既に設定された他のキーフレームにおけるオブジェクトの表示形態と同じとする操作が受け付けられたことに応じて、前記設定されたキーフレームとオブジェクトの表示形態を共有するフレームの標識の形状を変更することを特徴とする請求項１に記載の情報処理装置。
前記表示制御手段は、前記受付手段によって、前記設定されたキーフレームにおける前記オブジェクトの表示形態が、既に設定された他のキーフレームにおけるオブジェクトの表示形態と同じとする操作が受け付けられたことに応じて、前記設定されたキーフレームとオブジェクトの表示形態を共有するフレームの標識を線で結んで表示することを特徴とする請求項１に記載の情報処理装置。
前記表示制御手段は、前記設定されたキーフレームとオブジェクトの表示形態を共有するフレームの標識を、オブジェクトの表示形態を共有するグループ毎に異なる標識とすることを特徴とする請求項１に記載の情報処理装置。
前記表示制御手段は、キーフレームの標識に対応づけられたオブジェクトの表示形態のサムネイル画像を更に付与することを特徴とする請求項１乃至４の何れか１項に記載の情報処理装置。
受付手段と、保持手段と、表示制御手段とを備え、時間軸上の複数の時点にキーフレームを設定し、前記キーフレームの各々におけるオブジェクトの表示形態を示す情報に基づいて該オブジェクトを含むアニメーションを設計する情報処理装置における情報処理方法であって、
前記受付手段が、画面に表示された前記時間軸上で、前記キーフレームを設定する時点と、当該時点に設定されたキーフレームにおけるオブジェクトの表示形態とを指示する操作を受け付ける受付工程と、
前記保持手段が、キーフレームを示す情報と、該キーフレームにおけるオブジェクトの表示形態を示す情報とを対応づけた情報を保持する保持工程と、
前記表示制御手段が、前記画面に表示された前記時間軸上の、前記キーフレームが設定された各時点に、当該時点に設定されたキーフレームを表す標識を表示させる表示制御工程とを有し、
前記表示制御工程では、
前記受付工程で受け付けた操作によって指示された時点に設定されたキーフレームにおける前記オブジェクトの表示形態が、既に設定された他のキーフレームにおけるオブジェクトの表示形態を共有する場合に表示する前記標識と、前記受付工程で受け付けた操作によって指示された時点に設定されるキーフレームにおける前記オブジェクトの表示形態が、既に設定された他のキーフレームにおけるオブジェクトの表示形態を共有しない場合に表示する前記標識とを異ならせることを特徴とする情報処理方法。
請求項７に記載の情報処理方法の各工程をコンピュータに実行させるためのプログラム。