JP2024516606A - グラフィカルインターフェース表示方法、電子デバイス、媒体、およびプログラム製品 - Google Patents

グラフィカルインターフェース表示方法、電子デバイス、媒体、およびプログラム製品 Download PDF

Info

Publication number
JP2024516606A
JP2024516606A JP2023564202A JP2023564202A JP2024516606A JP 2024516606 A JP2024516606 A JP 2024516606A JP 2023564202 A JP2023564202 A JP 2023564202A JP 2023564202 A JP2023564202 A JP 2023564202A JP 2024516606 A JP2024516606 A JP 2024516606A
Authority
JP
Japan
Prior art keywords
elements
distance
animation effect
electronic device
animation
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
JP2023564202A
Other languages
English (en)
Inventor
超 卞
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huawei Technologies Co Ltd
Original Assignee
Huawei Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Publication of JP2024516606A publication Critical patent/JP2024516606A/ja
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本開示は、グラフィカルインターフェース表示方法、電子デバイス、コンピュータ可読記憶媒体、およびコンピュータプログラム製品に関する。ここで説明されているグラフィカルインターフェース表示方法によれば、M個のユーザインターフェースUI要素が電子デバイスの画面上に表示され、Mは1より大きい正の整数である（810）。M個のUI要素内の第1のUI要素に対して実行されたドラッグが検出される（820）。ドラッグに応答して、画面上のN個のUI要素の各々は、対応するアニメーション効果を伴って移動することが可能にされ、Nは、1～M－1の範囲の正の整数である（830）。N個のUI要素が対応するアニメーション効果を伴って移動することを可能にすることは、UI上の第1のUI要素と第2のUI要素との間の距離を決定することと、距離に基づいて第2のUI要素の移動のアニメーション効果を決定することと、第2のUI要素が第1のUI要素と共に移動することを視覚的に示すように、第2のUI要素がアニメーション効果を伴って移動することを可能にすることとを含む。このようにして、異なるUI要素のアニメーション効果間のリンクは強化されることができ、独立したUI要素間の関係は強調されることが、これにより、UIのアニメーション効果はユーザの使用習慣により良好に適合し、それによってユーザ体験を大幅に改善する。

Description

本開示は、一般に、情報技術の分野に関し、特に、グラフィカルインターフェース表示方法、電子デバイス、コンピュータ可読記憶媒体、およびコンピュータプログラム製品に関する。
情報技術の発展に伴い、様々なタイプの電子デバイスは、様々なタイプの画面を具備している。したがって、画面上のユーザインターフェース（UI）の表示効果およびスタイルは、ユーザ体験に影響を及ぼす重要な要因となる。アニメーションはUIの重要な部分となっている。スマートフォンなどの電子デバイスの性能の改善に伴い、アニメーションもそれに応じて発展している。高リフレッシュレート、高度のレンダリング、および高複雑度を有するアニメーションの数が増加している。したがって、ユーザ体験を改善するために、アニメーションの表示はさらに改善される必要がある。
本開示の一部の実施形態によれば、異なるUI要素のアニメーション効果間のリンクを強化し、独立したUI要素間の関係を強調するために、グラフィカルインターフェース表示方法、電子デバイス、媒体、およびプログラム製品が提供される。このようにして、UIのアニメーション効果はユーザの使用習慣により良好に適合し、それによって、ユーザ体験を大幅に改善する。
第1の態様によれば、本開示は、グラフィカルインターフェース表示方法を提供する。第1の態様のグラフィカルインターフェース表示方法によれば、M個のユーザインターフェースUI要素が電子デバイスの画面上に表示され、Mは1より大きい正の整数である。M個のUI要素内の第1のUI要素に対して実行されたドラッグが検出される。ドラッグに応答して、画面上のN個のUI要素の各々は、対応するアニメーション効果を伴って移動することが可能にされ、Nは、1～M－1の範囲の正の整数である。N個のUI要素が対応するアニメーション効果を伴って移動することを可能にすることは、UI上の第1のUI要素と第2のUI要素との間の距離を決定することと、距離に基づいて第2のUI要素の移動のアニメーション効果を決定することと、第2のUI要素が第1のUI要素と共に移動することを視覚的に示すように、第2のUI要素がアニメーション効果を伴って移動することを可能にすることとを含む。このようにして、異なるUI要素のアニメーション効果間のリンクは強化されることができ、独立したUI要素間の関係は強調されることが、これにより、UIのアニメーション効果はユーザの使用習慣により良好に適合し、それによってユーザ体験を大幅に改善する。
一部の実施態様では、距離を決定するために、第1のUI要素の第1の基準点および第2のUI要素の第2の基準点が決定され得、第1の基準点と第2の基準点との間の距離が距離として決定される。このようにして、決定されたUI要素の基準点に基づいて距離が決定され得、それによって、決定された距離の精度および距離決定方法の柔軟性を改善し、ユーザ体験を改善する。
一部の実施態様では、距離を決定するために、第1のUI要素の第1の基準点が決定され得、第2のUI要素と交差し、かつ最小半径を有するターゲット円が、複数の円であって、各々が第1の基準点を中心として使用し、かつそれぞれの半径を有する複数の円の中から決定され、ターゲット円の半径が距離として決定される。このようにして、UI要素間の距離がより簡単かつ便利に決定され得、それによって、距離決定方法の柔軟性を改善し、ユーザ体験を改善する。
一部の実施態様では、距離を決定するために、第1のUI要素と第2のUI要素との間の水平間隔が決定され得、第1のUI要素と第2のUI要素との間の垂直間隔が決定され、距離は、以下のいずれか1つ、すなわち、水平間隔および垂直間隔の少なくとも一方、または第2のUI要素の第2の基準点から第1のUI要素の第1の基準点への方向ならびに水平間隔および垂直間隔の少なくとも一方のいずれか1つに基づいて決定される。このようにして、UI要素間の間隔に基づいてUI要素間の距離が決定され得、それによって、距離決定方法の柔軟性を改善し、ユーザ体験を改善する。
一部の実施態様では、本方法は、第1のUI要素のサイズに基づいて第1のUI要素の影響領域を決定するステップと、影響領域内にある、M個のUI要素内のUI要素をN個のUI要素として決定するステップとをさらに含み得る。このようにして、ドラッグされているUI要素と共に対応して移動するUI要素は、ドラッグされているUI要素のサイズに基づいて決定され得、これにより、UIのアニメーション効果はユーザの使用習慣により良好に適合し、それによってユーザ体験を大幅に改善する。
一部の実施態様では、本方法は、第1のUI要素以外の、M個のUI要素内のM－1個のUI要素をN個のUI要素として決定するステップをさらに含み得る。このようにして、画面上のドラッグされているUI要素以外のUI要素が対応して移動し得、これにより、対応して移動するUI要素がより簡単かつ便利に決定され、UIのアニメーション効果はユーザの使用習慣により良好に適合し、それによってユーザ体験を大幅に改善する。
一部の実施態様では、移動のアニメーション効果を決定するために、ドラッグに応答して第1のUI要素が移動する第1のアニメーション効果が決定され得、ドラッグに応答して第2のUI要素が移動するアニメーション効果は、以下のいずれか1つ、すなわち、第1のアニメーション効果および距離、または第1のアニメーション効果、距離、および第2のUI要素のサイズのいずれか1つに基づいて決定され得る。このようにして、第1のUI要素のアニメーション効果が第2のUI要素に伝達され得、第2のUI要素のアニメーション効果は、第1のUI要素と第2のUI要素との間の距離および第2のUI要素のサイズに基づいてさらに決定される。したがって、UIのアニメーション効果は、ユーザの使用習慣により良好に適合し得、それによってユーザ体験を大幅に改善する。
一部の実施態様では、第1のUI要素の移動の第1のアニメーション効果は、変位が時間と共に変化する事前定義された曲線に基づいて決定され得る。このようにして、第1のUI要素の移動は、変位が時間と共に変化する事前定義された曲線に基づいて便利に制御され得、これにより、UIのアニメーション効果はユーザの使用習慣により良好に適合し、それによってユーザ体験を大幅に改善する。
一部の実施態様では、事前定義された曲線は、ベッセル曲線または弾性力曲線であり得る。このようにして、第1のUI要素の移動は、ベッセル曲線または弾性力曲線に基づいて便利に制御され得、これにより、UIのアニメーション効果は、ユーザの使用習慣により良好に適合し、それによってユーザ体験を大幅に改善する。
一部の実施態様では、第2のUI要素がアニメーション効果を伴って移動することを可能にするステップは、ドラッグの方向を決定するステップと、第2のUI要素が方向に関連してアニメーション効果を伴って移動することを可能にするステップとを含み得る。このようにして、対応して移動するUI要素の移動方向は、ドラッグされているUI要素の移動方向に基づいて制御され得、これにより、UIのアニメーション効果はユーザの使用習慣により良好に適合し、それによってユーザ体験を大幅に改善する。
一部の実施態様では、第2のUI要素がアニメーション効果を伴って移動することを可能にするステップは、距離に基づいて遅延時間を決定するステップと、ドラッグに応答して、第2のUI要素が遅延時間後にアニメーション効果を伴って移動することを可能にするステップとを含み得る。このようにして、リンクされた移動が距離に応じて伝達されることが視覚的に提示され得、これにより、UIのアニメーション効果はユーザの使用習慣により良好に適合し、それによってユーザ体験を大幅に改善する。
一部の実施態様では、本方法は、AARファイル、JARファイル、およびシステムインターフェースのうちの少なくとも1つを使用して実施され得る。このようにして、リンクされた移動を伴うグラフィカルインターフェース表示が簡単かつ便利に実施され得る。
本開示の第2の態様によれば、電子デバイスが提供される。電子デバイスは、プロセッサと、命令を記憶するメモリとを含む。命令がプロセッサによって実行されるとき、電子デバイスは、第1の態様および第1の態様の実施態様のいずれか1つによる方法を実行することが可能にされる。
本開示の第3の態様によれば、コンピュータ可読記憶媒体が提供される。コンピュータ可読記憶媒体は命令を記憶する。命令がプロセッサによって実行されるとき、電子デバイスは、第1の態様および第1の態様の実施態様のいずれか1つによる方法を実行することが可能にされる。
本開示の第4の態様によれば、コンピュータプログラム製品が提供される。コンピュータプログラム製品は命令を含む。命令がプロセッサによって実行されるとき、電子デバイスは、第1の態様および第1の態様の実施態様のいずれか1つによる方法を実行することが可能にされる。
本開示における各実施態様の特徴、利点、および他の態様は、添付の図面を参照し、以下の詳細な説明を参照することによってより明確になる。本開示のいくつかの実施態様は、ここでは限定ではなく例として示されている。添付の図面において、
本開示の一実施形態を実施し得る電子デバイスのハードウェア構造の概略図である。 本開示の一実施形態を実施し得る電子デバイスのソフトウェア構造の概略図である。 本開示の一実施形態を実施し得る別の電子デバイスのブロック図である。 本開示の一部の実施形態による例示的なUIの概略図である。 本開示の一部の実施形態による例示的なUIの概略図である。 本開示の一部の実施形態による例示的なUIの概略図である。 本開示の一部の実施形態による例示的なドラッグリンクの概略図である。 本開示の一部の実施形態による、摩擦モデルの例示的な速度－時間曲線の概略図である。 本開示の一部の実施形態による、摩擦モデルの例示的な変位－時間曲線の概略図である。 本開示の一部の実施形態による、移動位置が限定されたおよび限定されない例の概略図である。 本開示の一部の実施形態による、臨界減衰状態のばねの変形量xが時間tにわたって変化する例示的な曲線の概略図である。 本開示の一部の実施形態による、不足減衰状態のばねの変形量xが時間tにわたって変化する例示的な曲線の概略図である。 本開示の一部の実施形態による、過減衰状態のばねの変形量xが時間tにわたって変化する例示的な曲線の概略図である。 本開示の一実施形態によるグラフィカルインターフェース表示方法のフローチャートである。 本開示の一実施形態によるUI要素の例示的な影響領域の概略図である。 本開示の一実施形態による、距離を決定する例の概略図である。 本開示の一実施形態による、距離を決定する例の概略図である。 本開示の一実施形態による、距離を決定する例の概略図である。 本開示の一実施形態による、距離を決定する例の概略図である。 本開示の一実施形態による、距離を決定する例の概略図である。 本開示の一実施形態による、距離を決定する例の概略図である。 本開示の一実施形態による、距離を決定する例の概略図である。 本開示の一実施形態による、距離を決定する例の概略図である。 本開示の一実施形態による例示的な遅延時間の概略図である。 本開示の一実施形態による、手によってUI要素が完全に移動する例示的なシナリオの概略図である。 本開示の一実施形態による、手によってUI要素が完全に移動するシナリオの例示的な変位－時間曲線の概略図である。 本開示の一実施形態による、手によってはUI要素が完全に移動しない例示的なシナリオの概略図である。 本開示の一実施形態による、手によってはUI要素が完全に移動しないシナリオの例示的な変位－時間曲線の概略図である。 本開示の一実施形態による、手によってUI要素が完全に移動する例示的なシナリオの概略図である。 本開示の一実施形態による、手によってUI要素が完全に移動するシナリオの例示的な変位－時間曲線の概略図である。 本開示の一実施形態による、手によってUI要素が完全に移動する例示的なシナリオの概略図である。 本開示の一実施形態による、手によってUI要素が完全に移動するシナリオの例示的な変位－時間曲線の概略図である。 本開示の一部の実施形態による、押圧されたときのUI要素の例示的な変化の概略図である。 本開示の一部の実施形態による、異なる位置で押圧されたときのUI要素の例示的な変化の概略図である。 本開示の一部の実施形態による、異なる力を使用して押圧されたときのUI要素の例示的な変化の概略図である。 本開示の一部の実施形態による、異なる持続時間にわたって押圧されたときのUI要素の例示的な変化の概略図である。 本開示の一部の実施形態による、異なるサイズのUI要素の例示的な変化の概略図である。 本開示の一実施形態によるグラフィカルインターフェース表示方法のフローチャートである。 本開示の一実施形態によるN個のUI要素の深度リンクの例の概略図である。 本開示の一実施形態によるUI要素の例示的な影響領域の概略図である。 本開示の一実施形態による、距離に基づいてUI要素をスケーリングする例の概略図である。 本開示の一実施形態による例示的な遅延時間の概略図である。 本開示による、遅延時間を伴うUI要素の例示的なスケーリングの概略図である。 本開示の一実施形態によるUI要素の移動の例示的な変位の概略図である。 本開示の一実施形態による、変位なしでUI要素を復元する例の概略図である。 本開示の一実施形態による、変位ありでUI要素を復元する例の概略図である。 本開示の一実施形態による、反発効果を伴ってUI要素を復元する例示的なサイズ－時間曲線の概略図である。 本開示の一実施形態による、反発効果を伴ってUI要素を復元する例示的な変位－時間曲線の概略図である。 本開示の一実施形態による、減少される反発振幅を有する複数の反発の反発効果を伴ってUI要素を復元する例示的なサイズ－時間曲線の概略図である。 本開示の一実施形態による、減少される反発振幅を有する複数の反発の反発効果を伴ってUI要素を復元する例示的な変位－時間曲線の概略図である。 本開示の一部の実施形態による、押圧されたときの剛体としてのUI要素の例示的な変化の概略図である。 本開示の一部の実施形態による、UI要素の押圧をシミュレートするためにばねを押圧するおよび伸ばす例の概略図である。 本開示の一部の実施形態による、押圧されたときの非剛体としてのUI要素の例示的な変化の概略図である。 本開示の一部の実施形態による、異なる力を使用して押圧されたときのUI要素の例示的な変化の概略図である。 本開示の一部の実施形態による、異なる持続時間にわたって押圧されたときのUI要素の例示的な変化の概略図である。 本開示の一部の実施形態による、異なるサイズのUI要素の例示的な変化の概略図である。 本開示の一実施形態によるグラフィカルインターフェース表示方法のフローチャートである。 本開示の一実施形態によるN個のUI要素の圧力リンクの例の概略図である。 本開示の一実施形態によるN個のUI要素の圧力リンクの別の例の概略図である。 本開示の一実施形態によるUI要素の例示的な影響領域の概略図である。 本開示の一実施形態による、距離に基づくUI要素の例示的な変化の概略図である。 本開示の一実施形態による例示的な遅延時間の概略図である。 本開示の一実施形態による、UI要素を復元する例の概略図である。 本開示の一実施形態による、反発効果を伴ってUI要素を復元する例示的な角度－時間曲線の概略図である。 本開示の一実施形態による、減少される反発振幅を有する複数の反発の反発効果を伴ってUI要素を復元する例示的な角度－時間曲線の概略図である。 本開示の一実施形態によるアニメーションの実施原理の図である。 本開示の一実施形態による、「リンク」アニメーション効果の能力または機能を実施するためのシステムフレームワークの概略図である。 本開示の一実施形態による、「リンク」アニメーション効果の能力または機能に関係するアプリケーション側とUIフレームワーク側との間の関係の概略図である。 本開示の一実施形態による、「リンク」アニメーション効果の能力または機能を実施する3つの方法の特定の説明の概略図である。
本開示の一部の例示的な実施態様が、添付の図面を参照して以下で詳細に説明される。本開示の一部の例示的な実施態様が添付の図面に示されているが、本開示は様々な形態で実施され得、ここに記載された例示的な実施態様によって限定されるものではないことを理解されたい。むしろ、これらの実施形態は、本開示をより完璧かつ完全にし、本開示の範囲を当業者に十全に伝えるために提供される。
本明細書で使用される「含む」という用語およびその変種は、非限定的な包含、すなわち「を含むがこれに限定されない」を示す。別段の記載がない限り、「または」という用語は「および／または」を意味する。「に基づいて」という用語は、「に少なくとも部分的に基づいて」を意味する。「実施形態」および「一部の実施形態」という用語は両方とも「少なくとも一部の実施形態」を表す。「第1の」および「第2の」などの用語は、異なる対象を区別するために記載されており、順番を表すものではなく、「第1の」および「第2の」は異なるタイプに限定されない。
本明細書で使用される「UI」という用語は、ユーザとアプリケーションまたはオペレーティングシステムとの間の対話および情報交換のためのインターフェースを表し、情報の内部形式とユーザに受け入れ可能な形式との間の変換を実施する。例えば、アプリケーションのUIは、特定のコンピュータ言語、例えばjavaまたは拡張可能マークアップ言語（extensible markup language、XML）で書かれたソースコードである。UIソースコードは、電子デバイス上で解析およびレンダリングされ、最終的に、ユーザによって識別されることができるコンテンツ、例えば、画像、テキスト、またはボタンなどのUI要素として提示される。
一部の実施形態では、UI上のUI要素の属性およびコンテンツは、ラベルまたはノードを使用して定義される。例えば、UIに含まれるUI要素は、XMLにおける＜Textview＞、＜ImgView＞、および＜VideoView＞などのノードを使用して指定される。1つのノードは、UI上の1つのUI要素または1つの属性に対応する。解析およびレンダリングされた後、ノードは、ユーザに可視的なコンテンツとして提示される。加えて、ハイブリッドアプリケーション（hybrid application）などの複数のアプリケーションのUIは、通常、ウェブページをさらに含む。ウェブページは、アプリケーションのUIに埋め込まれた特別なUI要素として理解され得る。ウェブページは、特定のコンピュータ言語、例えば、ハイパーテキストマークアップ言語（hyper text markup language、HTML）、カスケーディングスタイルシート（cascading style sheets、CSS）、またはjavaスクリプト（JavaScript、JS）で書かれたソースコードである。ウェブページソースコードは、ブラウザ、またはその機能がブラウザの機能と同様であるウェブページ表示コンポーネントを使用して、ユーザによって識別されることができるコンテンツとしてロードおよび表示され得る。ウェブページに含まれる特定のコンテンツも、ウェブページソースコード内のラベルまたはノードを使用して定義される。例えば、ウェブページの要素および属性は、HTMLにおける＜p＞、＜img＞、＜video＞、または＜canvas＞を使用して定義される。
本明細書で使用される「UI要素」という用語は、ウィンドウ（window）、スクロールバー（scroll bar）、テーブルビュー（table view）、ボタン（button）、メニューバー（menu bar）、テキストボックス（text box）、ナビゲーションバー、ツールバー（toolbar）、画像（image）、静的テキスト（static text）、およびウィジェット（Widget）などの視覚的UI要素を含むが、これらに限定されない。
本開示の実施形態で説明される一部の手順は、特定の順序で現れる複数の動作またはステップを含む。しかしながら、動作またはステップは、本開示の実施形態に現れる動作またはステップの順序に基づいて実行されなくてもよいし、または並列に実行されてもよいことを理解されたい。動作の連続番号は、異なる動作を区別するために使用されているにすぎず、連続番号は実行順序を表すものではない。加えて、手順は、より多くのまたはより少ない動作を含んでもよく、動作またはステップは、順番にまたは並列に実行されてもよく、動作またはステップは組み合わされてもよい。
AndroidおよびiOSなどのモバイルオペレーティングシステムでは、アニメーションは本質的に、リフレッシュレートに基づくユーザインターフェースUIまたはUI要素のリアルタイム表示である。人間の視覚の残像の原理により、ユーザは画像が動いていると感じる。アニメーションは、アニメーション持続時間後にアニメーションの初期状態から最終状態に変化する。この変換プロセスでは、アニメーションは、アニメーションタイプおよびアニメーション変換形式に基づいて制御され得る。例えば、アニメーションタイプは、変位アニメーション、回転アニメーション、スケーリングアニメーション、および透過アニメーションなどを含み得る。アニメーション変換形式は、補間器および推定器などのコントローラによって制御され得る。このようなコントローラは、アニメーション持続時間中にアニメーション変換速度を制御するように構成され得る。
しかしながら、従来、アニメーションは単純なアニメーション効果の組み合わせにすぎない。アニメーション効果は単調であり、物理的な規則に従わず、実際の使用シナリオおよびユーザの使用習慣は考慮されていない。
したがって、本開示の実施形態は、新しいグラフィカルインターフェース表示ソリューションを提供する。本開示の実施形態は、ドラッグリンク、深度リンク、および圧力リンクを含む、UI上のUI要素のアニメーション効果リンクに関する。リンク中、操作されているターゲットUI要素は、操作されていない他のUI要素に影響を及ぼし得る。具体的には、ターゲットUI要素のアニメーション効果をトリガすることは、1つ以上の他のUI要素、またはさらにはUI全体の他のUI要素のアニメーション効果を一緒にトリガし得る。
このようにして、異なるUI要素のアニメーション効果間のリンクは強化されることができ、独立したUI要素間の関係が強調され得る。アニメーション効果が単調であり、UI要素が独立していて無関係である従来のアニメーションと比較して、本開示の実施形態は、アニメーション効果を物理的な規則により良好に従わせ、実際の使用シナリオおよびユーザの使用習慣を考慮することができ、それによって、ユーザ体験を大幅に改善する。
以下は、図1A～図46を参照して、本開示の一部の例示的な実施形態を説明する。
図1Aは、本開示の一実施形態を実施し得る電子デバイス100のハードウェア構造の概略図である。図1に示されているように、電子デバイス100は、プロセッサ110、外部メモリインターフェース120、内部メモリ121、ユニバーサルシリアルバス（universal serial bus、USB）インターフェース130、充電管理モジュール140、電力管理モジュール141、バッテリ142、アンテナ1、アンテナ2、移動通信モジュール150、ワイヤレス通信モジュール160、オーディオモジュール170、スピーカ170A、レシーバ170B、マイクロフォン170C、ヘッドセットジャック170D、センサモジュール180、ボタン190、モータ191、インジケータ192、カメラ193、ディスプレイ194、および加入者識別モジュール（subscriber identity module、SIM）カードインターフェース195などを含み得る。センサモジュール180は、圧力センサ180A、ジャイロセンサ180B、気圧センサ180C、磁気センサ180D、加速度センサ180E、距離センサ180F、光学式近接センサ180G、指紋センサ180H、温度センサ180J、タッチセンサ180K、周囲光センサ180L、および骨伝導センサ180Mなどを含み得る。
本開示のこの実施形態に示されている構造は、電子デバイス100に対する特定の限定を構成しないことを理解されたい。本開示の一部の他の実施形態では、電子デバイス100は、図に示されているものより多くのもしくは少ないコンポーネントを含んでもよいし、または一部のコンポーネントは組み合わされてもよいし、または一部のコンポーネントは分割されてもよいし、または異なるコンポーネントの配置が使用されてもよい。図に示されているコンポーネントは、ハードウェア、ソフトウェア、またはソフトウェアとハードウェアとの組み合わせによって実施され得る。
プロセッサ110は、1つ以上の処理ユニットを含み得る。例えば、プロセッサ110は、アプリケーションプロセッサ（application processor、AP）、モデムプロセッサ、グラフィック処理装置（graphics processing unit、GPU）、画像信号プロセッサ（image signal processor、ISP）、コントローラ、ビデオコーデック、デジタル信号プロセッサ（digital signal processor、DSP）、ベースバンドプロセッサ、および／またはニューラルネットワーク処理装置（neural－network processing unit、NPU）を含み得る。異なる処理ユニットは、独立したデバイスであってもよいし、または1つ以上のプロセッサに統合されてもよい。コントローラは、命令の読み出しおよび命令の実行を制御するために、命令動作コードおよび時系列信号に基づいて動作制御信号を生成し得る。
メモリは、プロセッサ110にさらに配置されてもよく、命令およびデータを記憶するように構成される。一部の実施形態では、プロセッサ110内のメモリは、キャッシュメモリである。このメモリは、プロセッサ110によって直近に使用された、または周期的に使用される命令またはデータを記憶し得る。プロセッサ110が命令またはデータを再び使用する必要がある場合、プロセッサは、メモリから命令またはデータを直接呼び出し得る。これは、繰り返しのアクセスを回避し、プロセッサ110の待ち時間を低減し、システム効率を改善する。
一部の実施形態では、プロセッサ110は、1つ以上のインターフェースを含み得る。インターフェースは、集積回路間（inter－integrated circuit、I2C）インターフェース、集積回路間サウンド（inter－integrated circuit sound、I2S）インターフェース、パルス符号変調（pulse code modulation、PCM）インターフェース、汎用非同期受信機／伝送機（universal asynchronous receiver／transmitter、UART）インターフェース、モバイルインダストリプロセッサインターフェース（mobile industry processor interface、MIPI）、汎用入力／出力（general－purpose input／output、GPIO）インターフェース、加入者アイデンティティモジュール（subscriber identity module、SIM）インターフェース、および／またはユニバーサルシリアルバス（universal serial bus、USB）インターフェースなどを含み得る。
I2Cインターフェースは、双方向同期シリアルバスであり、1つのシリアルデータライン（serial data line、SDA）および1つのシリアルクロックライン（serial clock line、SCL）を含む。一部の実施形態では、プロセッサ110は、I2Cバスの複数のグループを含み得る。プロセッサ110は、異なるI2Cバスインターフェースを介してタッチセンサ180K、充電器、フラッシュ、およびカメラ193などに別々に結合され得る。例えば、プロセッサ110は、I2Cインターフェースを介してタッチセンサ180Kに結合され得、これにより、プロセッサ110は、電子デバイス100のタッチ機能を実施するために、I2Cバスインターフェースを介してタッチセンサ180Kと通信する。
I2Sインターフェースは、オーディオ通信を実行するように構成され得る。一部の実施形態では、プロセッサ110は、I2Sバスの複数のグループを含み得る。プロセッサ110は、プロセッサ110とオーディオモジュール170との間で通信を実施するために、I2Sバスを介してオーディオモジュール170に結合され得る。一部の実施形態では、オーディオモジュール170は、ブルートゥースヘッドセットを介して通話に応答する機能を実施するために、I2Sインターフェースを介してオーディオ信号をワイヤレス通信モジュール160に伝送し得る。
PCMインターフェースもまた、オーディオ通信を実行し、アナログ信号をサンプリング、量子化、および符号化するように構成され得る。一部の実施形態では、オーディオモジュール170は、PCMバスインターフェースを介してワイヤレス通信モジュール160に結合され得る。一部の実施形態では、オーディオモジュール170は、代わりに、ブルートゥースヘッドセットを介して通話に応答する機能を実施するために、PCMインターフェースを介してオーディオ信号をワイヤレス通信モジュール160に伝送してもよい。I2SインターフェースとPCMインターフェースとの両方は、オーディオ通信を実行するように構成され得る。
UARTインターフェースは、ユニバーサルシリアルデータバスであり、非同期通信を実行するように構成される。バスは、双方向通信バスであってもよい。バスは、シリアル通信とパラレル通信との間で、伝送されるデータを変換する。一部の実施形態では、UARTインターフェースは、通常、プロセッサ110とワイヤレス通信モジュール160とを接続するように構成される。例えば、プロセッサ110は、ブルートゥース機能を実施するために、UARTインターフェースを介してワイヤレス通信モジュール160内のブルートゥースモジュールと通信する。一部の実施形態では、オーディオモジュール170は、ブルートゥースヘッドセットを介して音楽を再生する機能を実施するために、UARTインターフェースを介してオーディオ信号をワイヤレス通信モジュール160に伝送し得る。
MIPIインターフェースは、プロセッサ110と、ディスプレイ194またはカメラ193などの周辺デバイスとを接続するように構成され得る。MIPIインターフェースは、カメラシリアルインターフェース（camera serial interface、CSI）およびディスプレイシリアルインターフェース（display serial interface、DSI）などを含む。一部の実施形態では、プロセッサ110は、電子デバイス100の画像撮影機能を実施するために、CSIを介してカメラ193と通信する。プロセッサ110は、電子デバイス100の表示機能を実施するために、DSIを介してディスプレイ194と通信する。
GPIOインターフェースは、ソフトウェアによって構成され得る。GPIOインターフェースは、制御信号またはデータ信号を伝送するように構成され得る。一部の実施形態では、GPIOインターフェースは、プロセッサ110と、カメラ193、ディスプレイ194、ワイヤレス通信モジュール160、オーディオモジュール170、およびセンサモジュール180などとを接続するように構成され得る。GPIOインターフェースは、代わりに、I2Cインターフェース、I2Sインターフェース、UARTインターフェース、またはMIPIインターフェースなどとして構成されてもよい。
USBインターフェース130は、USB標準仕様に準拠したインターフェースであり、具体的にはMini USBインターフェース、Micro USBインターフェース、またはUSB Type Cインターフェースなどであり得る。USBインターフェース130は、電子デバイス100を充電するために充電器に接続するように構成され得るし、または電子デバイス100と周辺デバイスとの間でデータを伝送するように構成され得るし、またはヘッドセットを介してオーディオを再生するためにヘッドセットに接続するように構成され得る。このインターフェースは、ARデバイスなどの別の電子デバイスに接続するようにさらに構成され得る。
本開示のこの実施形態に示されているモジュール間のインターフェース接続関係は、説明のための例にすぎず、電子デバイス100の構造に対する限定を構成しないことが理解され得る。本開示の一部の他の実施形態では、電子デバイス100は、代わりに、前述の実施形態とは異なるインターフェース接続方法を使用してもよいし、または複数のインターフェース接続方法の組み合わせを使用してもよい。
充電管理モジュール140は、充電器から充電入力を受け取るように構成される。充電器は、ワイヤレス充電器または有線充電器であってもよい。有線充電の一部の実施形態では、充電管理モジュール140は、USBインターフェース130を介して有線充電器から充電入力を受け取り得る。ワイヤレス充電の一部の実施形態では、充電管理モジュール140は、電子デバイス100のワイヤレス充電コイルを使用してワイヤレス充電入力を受け取り得る。充電管理モジュール140は、バッテリ142を充電しながら、電力管理モジュール141を介して電子デバイス100に電力をさらに供給し得る。
電力管理モジュール141は、バッテリ142、充電管理モジュール140、およびプロセッサ110を接続するように構成される。電力管理モジュール141は、バッテリ142および／または充電管理モジュール140から入力を受け取り、プロセッサ110、内部メモリ121、ディスプレイ194、カメラ193、およびワイヤレス通信モジュール160などに電力を供給する。電力管理モジュール141は、バッテリ容量、バッテリサイクル数、およびバッテリ健全性ステータス（漏電またはインピーダンス）などのパラメータを監視するようにさらに構成され得る。一部の他の実施形態では、電力管理モジュール141は、代わりに、プロセッサ110に配置されてもよい。一部の他の実施形態では、電力管理モジュール141および充電管理モジュール140は、代わりに、同じデバイスに配置されてもよい。
電子デバイス100のワイヤレス通信機能は、アンテナ1、アンテナ2、移動通信モジュール150、ワイヤレス通信モジュール160、モデムプロセッサ、およびベースバンドプロセッサなどによって実施され得る。アンテナ1およびアンテナ2は、電磁波信号を伝送および受信するように構成される。電子デバイス100の各アンテナは、1つ以上の通信周波数帯域をカバーするように構成され得る。アンテナ利用を改善するために、異なるアンテナがさらに多重化され得る。例えば、アンテナ1は、ワイヤレスローカルエリアネットワークにおいてダイバーシティアンテナとして多重化され得る。一部の他の実施形態では、アンテナは、チューニングスイッチと組み合わせて使用され得る。
移動通信モジュール150は、電子デバイス100で使用される2G、3G、4G、5G、および6Gなどのワイヤレス通信のためのソリューションを提供し得る。移動通信モジュール150は、少なくとも1つのフィルタ、スイッチ、電力増幅器、および低ノイズ増幅器（low noise amplifier、LNA）などを含み得る。移動通信モジュール150は、アンテナ1を介して電磁波を受信し、受信された電磁波に対してフィルタリングおよび増幅などの処理を実行し、復調のために電磁波をモデムプロセッサに伝送し得る。移動通信モジュール150はさらに、モデムプロセッサによって変調された信号を増幅し、アンテナ1を介した放射のために信号を電磁波に変換し得る。一部の実施形態では、移動通信モジュール150の少なくとも一部の機能モジュールは、プロセッサ110に配置され得る。一部の実施形態では、移動通信モジュール150の少なくとも一部の機能モジュールは、プロセッサ110の少なくとも一部のモジュールと同じデバイスに配置され得る。
モデムプロセッサは、変調器および復調器を含み得る。変調器は、送信される低周波ベースバンド信号を中または高周波信号に変調するように構成される。復調器は、受信された電磁波信号を低周波ベースバンド信号に復調するように構成される。次に、復調器は、復調によって取得された低周波ベースバンド信号を、処理のためにベースバンドプロセッサに伝送する。低周波ベースバンド信号は、ベースバンドプロセッサによって処理され、次にアプリケーションプロセッサに伝送される。アプリケーションプロセッサは、オーディオデバイス（スピーカ170Aもしくはレシーバ170Bなどに限定されない）を介して音響信号を出力したり、またはディスプレイ194を介して画像もしくはビデオを表示したりする。一部の実施形態では、モデムプロセッサは独立したデバイスであり得る。一部の他の実施形態では、モデムプロセッサは、プロセッサ110から独立していてもよく、移動通信モジュール150または別の機能モジュールと同じデバイスに配置される。
ワイヤレス通信モジュール160は、電子デバイス100で使用されるワイヤレス通信ソリューションを提供し得る。ワイヤレス通信ソリューションは、ワイヤレスローカルエリアネットワーク（wireless local area networks、WLAN）（例えば、ワイヤレスフィデリティ（wireless fidelity、Wi－Fi）ネットワーク）、ブルートゥース（Bluetooth、BT）、全地球航法衛星システム（global navigation satellite system、GNSS）、周波数変調（frequency modulation、FM）、近距離無線通信（near field communication、NFC）技術、または赤外線（infrared、IR）技術などを含む。ワイヤレス通信モジュール160は、少なくとも1つの通信処理モジュールを組み込んだ1つ以上のデバイスであり得る。ワイヤレス通信モジュール160は、アンテナ2を介して電磁波を受信し、電磁波信号に対して周波数変調およびフィルタリング処理を実行し、処理された信号をプロセッサ110に送信する。ワイヤレス通信モジュール160はさらに、プロセッサ110から、送信される信号を受信し、この信号に対して周波数変調および増幅を実行し、アンテナ2を介した放射のためにこの信号を電磁波に変換し得る。
一部の実施形態では、電子デバイス100がワイヤレス通信技術を使用してネットワークおよび別のデバイスと通信することができるように、電子デバイス100のアンテナ1および移動通信モジュール150は結合され、電子デバイス100のアンテナ2およびワイヤレス通信モジュール160は結合される。ワイヤレス通信技術は、グローバル・システム・フォー・モバイル・コミュニケーションズ（global system for mobile communications、GSM）、汎用パケット無線サービス（general packet radio service、GPRS）、符号分割多元接続（code division multiple access、CDMA）、広帯域符号分割多元接続（wideband code division multiple access、WCDMA）、時分割符号分割多元接続（time－division code division multiple access、TD－CDMA）、ロングタームエボリューション（long term evolution、LTE）、5Gおよびその後の発展規格、BT、GNSS、WLAN、NFC、FM、ならびに／またはIR技術などを含み得る。GNSSは、全地球測位システム（global positioning system、GPS）、全地球航法衛星システム（global navigation satellite system、GLONASS）、北斗衛星導航系統（beidou navigation satellite system、BDS）、準天頂衛星システム（quasi－zenith satellite system、QZSS）、および／または静止衛星型衛星航法補強システム（satellite based augmentation systems、SBAS）を含み得る。
電子デバイス100は、GPU、ディスプレイ194、およびアプリケーションプロセッサなどによって表示機能を実施する。GPUは、画像処理用のマイクロプロセッサであり、ディスプレイ194およびアプリケーションプロセッサに接続される。GPUは、数学的および幾何学的計算を実行し、画像をレンダリングするように構成される。プロセッサ110は、表示情報を生成するまたは変化させるためにプログラム命令を実行する1つ以上のGPUを含み得る。
ディスプレイ194は、画像およびビデオなどを表示するように構成される。ディスプレイ194は、表示パネルを含む。一部の実施形態では、電子デバイス100は、1つまたはN個のディスプレイ194を含み得る。Nは1より大きい正の整数である。
電子デバイス100は、ISP、カメラ193、ビデオコーデック、GPU、ディスプレイ194、およびアプリケーションプロセッサなどを使用して画像撮影機能を実施し得る。ISPは、カメラ193によってフィードバックされたデータを処理するように構成される。例えば、撮影中、シャッタが押され、光が、レンズを介してカメラ受光素子に伝達され、光信号が電気信号に変換され、カメラ受光素子は、電気信号を可視画像に変換するために、処理のために電気信号をISPに伝送する。ISPは、画像のノイズ、明度、および様相に対してアルゴリズム最適化をさらに実行し得る。ISPは、画像撮影シーンの露出および色温度などのパラメータをさらに最適化し得る。一部の実施形態では、ISPは、カメラ193に配置され得る。
カメラ193は、静止画像またはビデオを取り込むように構成される。対象の光学像が、レンズを介して生成され、受光素子に投影される。受光素子は、電荷結合素子（charge coupled device、CCD）または相補型金属酸化膜半導体（complementary metal－oxide－semiconductor、CMOS）フォトトランジスタであり得る。受光素子は、光信号を電気信号に変換し、次に、電気信号をデジタル画像信号に変換するために電気信号をISPに伝送する。ISPは、処理のためにデジタル画像信号をDSPに出力する。DSPは、デジタル画像信号を、RGBまたはYUVなどの標準フォーマットの画像信号に変換する。一部の実施形態では、電子デバイス100は、1つまたはN個のカメラ193を含み得る。Nは1より大きい正の整数である。
デジタル信号プロセッサは、デジタル信号を処理するように構成され、デジタル画像信号に加えて別のデジタル信号を処理し得る。例えば、電子デバイス100が周波数を選択したとき、デジタル信号プロセッサは、周波数エネルギーに対してフーリエ変換などを実行するように構成される。
ビデオコーデックは、デジタルビデオを圧縮または解凍するように構成される。電子デバイス100は、1つ以上のタイプのビデオコーデックをサポートし得る。このようにして、電子デバイス100は、複数の符号化フォーマット、例えば、動画専門家集団（moving picture experts group、MPEG）1、MPEG2、MPEG3、およびMPEG4でビデオを再生または録画し得る。
NPUは、ニューラルネットワーク（neural－network、NN）コンピューティングプロセッサである。NPUは、生物学的ニューラルネットワークの構造、例えば、人間の脳神経細胞間の伝達モードを参照して入力情報を迅速に処理し、さらに、自己学習を継続的に実行し得る。電子デバイス100のインテリジェント認知などのアプリケーションは、NPUによって実施され得る。インテリジェント認知は、画像認識、顔認識、音声認識、およびテキスト理解などを含む。
外部メモリインターフェース120は、電子デバイス100の記憶能力を拡張するために、外部メモリカード、例えばMicro SDカードに接続するように構成され得る。外部メモリカードは、データ記憶機能を実施するために、外部メモリインターフェース120を介してプロセッサ110と通信する。例えば、音楽およびビデオなどのファイルが、外部メモリカードに記憶される。
内部メモリ121は、コンピュータ実行可能プログラムコードを記憶するように構成され得る。実行可能プログラムコードは命令を含む。内部メモリ121は、プログラム記憶領域およびデータ記憶領域を含み得る。プログラム記憶領域は、オペレーティングシステム、ならびに少なくとも1つの機能（音響再生機能および画像表示機能など）に必要とされるアプリケーションなどを記憶し得る。データ記憶領域は、電子デバイス100の使用中に作成されたデータ（オーディオデータおよびアドレス帳など）などを記憶し得る。加えて、内部メモリ121は、高速ランダムアクセスメモリを含んでもよいし、または不揮発性メモリ、例えば、少なくとも1つの磁気ディスク記憶デバイス、フラッシュメモリ、もしくはユニバーサルフラッシュストレージ（universal flash storage、UFS）を含んでもよい。プロセッサ110は、電子デバイス100の様々な機能アプリケーションおよびデータ処理を実行するために、内部メモリ121に記憶された命令および／またはプロセッサに配置されたメモリに記憶された命令を動作させる。
電子デバイス100は、オーディオモジュール170、スピーカ170A、レシーバ170B、マイクロフォン170C、ヘッドセットジャック170D、およびアプリケーションプロセッサなどを使用してオーディオ機能、例えば音楽再生および録音を実施し得る。
SIMカードインターフェース195は、SIMカードに接続するように構成される。SIMカードは、電子デバイス100との接触または電子デバイス100からの分離を実施するために、SIMカードインターフェース195に挿入され得るし、またはSIMカードインターフェース195から取り外され得る。電子デバイス100は、1つまたはN個のSIMカードインターフェースをサポートし得る。Nは1より大きい正の整数である。SIMカードインターフェース195は、Nano SIMカード、Micro SIMカード、またはSIMカードなどをサポートし得る。複数のカードが、同じSIMカードインターフェース195に同時に挿入されてもよい。複数のカードは、同じタイプまたは異なるタイプのものであってもよい。SIMカードインターフェース195は、異なるタイプのSIMカードと互換性があってもよい。SIMカードインターフェース195はまた、外部メモリカードと互換性があってもよい。電子デバイス100は、通話およびデータ通信などの機能を実施するために、SIMカードによってネットワークと対話する。一部の実施形態では、電子デバイス100は、eSIM、つまり内蔵SIMカードを使用する。eSIMカードは、電子デバイス100に内蔵されてもよく、電子デバイス100から分離されることができない。
電子デバイス100のソフトウェアシステムは、階層化アーキテクチャ、イベントドリブンアーキテクチャ、マイクロカーネルアーキテクチャ、マイクロサービスベースのアーキテクチャ、またはクラウドアーキテクチャを使用し得る。本開示の実施形態では、電子デバイス100のソフトウェア構造を説明するために、階層化アーキテクチャのモバイルオペレーティングシステムが例として使用される。
図1Bは、本開示の一実施形態による電子デバイス100のソフトウェア構造の概略図である。階層化アーキテクチャでは、ソフトウェアはいくつかの層に分割され、各層は明確な役割およびタスクを有する。層は、ソフトウェアインターフェースを介して互いに通信する。一部の実施形態では、オペレーティングシステムは、上から下にかけて、4つの層、すなわち、アプリケーション層、アプリケーションフレームワーク層、オペレーティングシステムランタイム（runtime）およびシステムライブラリ、ならびにカーネル層に分割され得る。
アプリケーション層は、一連のアプリケーションパッケージを含み得る。図1Bに示されているように、アプリケーションパッケージは、カメラ、ギャラリー、カレンダー、通話、地図、ナビゲーション、WLAN、ブルートゥース、音楽、ビデオ、およびメッセージングなどのアプリケーションを含み得る。
アプリケーションフレームワーク層は、アプリケーション層のアプリケーションのためのアプリケーションプログラミングインターフェース（application programming interface、API）およびプログラミングフレームワークを提供する。アプリケーションフレームワーク層は、いくつかの事前定義された機能を含む。
図1Bに示されているように、アプリケーションフレームワーク層は、ウィンドウマネージャ、コンテンツプロバイダ、ビューシステム、電話マネージャ、リソースマネージャ、および通知マネージャなどを含み得る。ウィンドウマネージャは、ウィンドウプログラムを管理するように構成される。ウィンドウマネージャは、ディスプレイのサイズの取得、ステータスバーがあるかどうかの決定、画面ロックの実行、およびスクリーンショットの撮影などを行い得る。コンテンツプロバイダは、データを記憶および取得し、データがアプリケーションによってアクセス可能であることを可能にするように構成される。データは、ビデオ、画像、オーディオ、かけられたまたは応答された通話、閲覧履歴、ブックマーク、およびアドレス帳などを含み得る。ビューシステムは、テキストを表示するためのコントロールおよび画像を表示するためのコントロールなどの視覚的コントロールを含む。ビューシステムは、アプリケーションを構築するように構成され得る。表示インターフェースは、1つ以上のビューを含み得る。例えば、メッセージの通知アイコンを含む表示インターフェースは、テキスト表示ビューおよび画像表示ビューを含み得る。電話マネージャは、電子デバイス100の通信機能、例えば、通話ステータス（応答および拒否などを含む）の管理を提供するように構成される。リソースマネージャは、ローカライズされた文字列、アイコン、画像、レイアウトファイル、およびビデオファイルなどの様々なリソースをアプリケーションに提供する。通知マネージャは、アプリケーションがステータスバーに通知情報を表示することを可能にし、通知メッセージを伝えるように構成され得る。通知マネージャは、ユーザ対話を必要とすることなく、短い一時停止の後に自動的に消え得る。例えば、通知マネージャは、ダウンロード完了の通知およびメッセージ通知の提供などを行うように構成される。通知マネージャは、代わりに、システムの上部ステータスバーにグラフまたはスクロールバーテキストの形式で現れる通知、例えば、バックグラウンドで動作しているアプリケーションの通知またはダイアログウィンドウの形式で画面に現れる通知であってもよい。例えば、ステータスバーにテキスト情報が表示されたり、警告音が再生されたり、電子デバイスが振動したり、またはインジケータライトが点滅したりする。
さらに図1Bを参照されたい。オペレーティングシステムランタイムは、カーネルライブラリおよび仮想マシンを含む。オペレーティングシステムランタイムは、オペレーティングシステムのスケジューリングおよび管理を担当する。カーネルライブラリは、2つの部分、すなわち、Java言語で呼び出される必要がある関数およびオペレーティングシステムのカーネルライブラリを含む。アプリケーション層およびアプリケーションフレームワーク層は、仮想マシン上で動作する。仮想マシンは、アプリケーション層およびアプリケーションフレームワーク層のJavaファイルをバイナリファイルとして実行する。仮想マシンは、オブジェクトライフサイクル管理、スタック管理、スレッド管理、セキュリティおよび例外管理、ならびにガベージコレクションなどの機能を実施するように構成される。システムライブラリは、複数の機能モジュール、例えば、サーフェスマネージャ（surface manager）、メディアライブラリ（Media Libraries）、3次元グラフィック処理ライブラリ（例えば、OpenGL ES）、および2Dグラフィックエンジン（例えば、SGL）を含み得る。
サーフェスマネージャは、表示サブシステムを管理し、複数のアプリケーションに2Dおよび3D層の融合を提供するように構成される。メディアライブラリは、複数の一般的に使用されるオーディオおよびビデオフォーマットならびに静止画像ファイルなどの再生および記録をサポートする。メディアライブラリは、MPEG4、H．264、MP3、AAC、AMR、JPG、およびPNGなどの複数のオーディオおよびビデオ符号化フォーマットをサポートし得る。3次元グラフィック処理ライブラリは、3次元グラフィック描画、画像レンダリング、構成、および層処理などを実施するように構成される。2Dグラフィックエンジンは、2D描画用の描画エンジンである。
カーネル層は、ハードウェアとソフトウェアとの間の層である。カーネル層は、ディスプレイドライバ、カメラドライバ、オーディオドライバ、およびセンサドライバを少なくとも含む。
図2は、本開示の一実施形態を実施し得る別の電子デバイス200のブロック図である。図2に示されているように、電子デバイス200は、汎用コンピューティングデバイスの形態であり得る。電子デバイス200のコンポーネントは、1つ以上のプロセッサまたは処理ユニット210、メモリ220、記憶デバイス230、1つ以上の通信ユニット240、1つ以上の入力デバイス250、および1つ以上の出力デバイス260を含み得るが、これらに限定されない。処理ユニット210は、物理的または仮想的なプロセッサであってもよく、メモリ220に記憶されたプログラムに基づいて様々な処理を実行することが可能である。マルチプロセッサシステムでは、複数の処理ユニットが、電子デバイス200の並列処理能力を改善するために、コンピュータ実行可能命令を並列に実行する。
電子デバイス200は、一般に、複数のコンピュータ記憶媒体を含む。このような媒体は、揮発性および不揮発性媒体ならびにリムーバブルおよび非リムーバブル媒体を含むが、これらに限定されない、電子デバイス200にとってアクセス可能な任意の利用可能な媒体であり得る。メモリ220は、揮発性メモリ（例えば、レジスタ、キャッシュ、ランダムアクセスメモリ（RAM））、不揮発性メモリ（例えば、読み出し専用メモリ（ROM）、電気的消去可能プログラマブル読み出し専用メモリ（EEPROM）、フラッシュメモリ）、またはこれらの組み合わせであり得る。記憶デバイス230は、リムーバブルまたは非リムーバブル媒体であり得、フラッシュドライブ、ディスク、または任意の他の媒体などのマシン可読媒体を含み得る。記憶デバイス230は、情報および／またはデータ（例えば、トレーニングに使用されるトレーニングデータ）を記憶するように構成され得、電子デバイス200内でアクセスされ得る。
電子デバイス200は、別のリムーバブル／非リムーバブル記憶媒体または揮発性／不揮発性記憶媒体をさらに含み得る。図2には示されていないが、リムーバブル不揮発性ディスク（例えば、「フロッピーディスク」）に対して読み書きを実行するためのディスクドライブ、およびリムーバブル不揮発性光ディスクに対して読み書きを実行するための光ディスクドライブが設けられ得る。これらの場合、各ドライブは、1つ以上のデータ媒体インターフェースを介してバス（図示せず）に接続され得る。メモリ220は、コンピュータプログラム製品225を含み得、コンピュータプログラム製品225は、1つ以上のプログラムモジュールを有する。これらのプログラムモジュールは、本開示の実施形態におけるオブジェクト編集方法またはプロセスを実行するように構成される。
通信ユニット240は、通信媒体を介して別のコンピューティングデバイスと通信する。さらに、電子デバイス200のコンポーネントの機能は、単一のコンピューティングクラスタまたは複数のコンピューティングマシンを使用して実施されてもよい。これらのコンピューティングマシンは、通信接続を介して互いに通信することができる。したがって、電子デバイス200は、1つ以上の他のサーバ、ネットワークパーソナルコンピュータ（PC）、または別のネットワークノードへの論理接続を使用してネットワーク環境で動作され得る。
入力デバイス250は、マウス、キーボード、トラッキングボールなどの1つ以上の入力デバイスであり得る。出力デバイス260は、1つ以上の出力デバイス、例えばディスプレイ、スピーカ、またはプリンタであり得る。本開示のこの実施形態では、出力デバイス260は、タッチセンサを有するタッチスクリーンを含み得、タッチスクリーンは、ユーザのタッチ入力を受け付け得る。電子デバイス200は、要求に基づいて、通信ユニット240を介して1つ以上の外部デバイス（図示せず）とさらに通信し得る。記憶デバイスおよび表示デバイスなどの外部デバイスは、ユーザが電子デバイス200と対話することを可能にする1つ以上のデバイスと通信するか、または電子デバイス200が1つ以上の他のコンピューティングデバイスと通信することを可能にする任意のデバイス（例えば、ネットワークアダプタまたはモデム）と通信する。このような通信は、入力／出力（I／O）インターフェース（図示せず）を介して実行され得る。
図1に示されている電子デバイス100および図2に示されている電子デバイス200は、本開示の1つ以上の実施形態を実施することができる2つの例示的な電子デバイスにすぎず、本明細書に説明されている実施形態の機能および範囲に対する限定を構成するものではないことを理解されたい。
ドラッグリンク
現在、より多くの情報およびより良好な表示情報を表示するために、電子デバイスの画面はますます大きくなっており、画面上のUIのレイアウトはますます複雑になっており、UI要素のサイズおよび形状の違いはますます大きくなっている。この場合、UI上には、様々な不規則なレイアウトで配置された様々な不規則なUI要素がある。例えば、スマートフォンのHiBoard、制御センタ、アプリケーションマーケット、およびギャラリーには、コントロール、カード、画像、およびカバーなどの様々な不規則なUI要素が存在する。
従来、様々な不規則なUI要素間にはアニメーション効果のリンクはない。言い換えれば、ターゲットUI要素のアニメーション効果をトリガすることは、1つ以上の他のUI要素のアニメーション効果を一緒にトリガしない。UI要素のアニメーション効果は独立していて無関係である。したがって、従来のアニメーション効果は単調で柔軟性がなく、UI要素間の関係を反映することができない。
本開示の実施形態は、ドラッグリンクとも呼ばれる、ドラッグ中のUI上のUI要素のアニメーション効果リンクに関する。ドラッグリンク中、ドラッグされているターゲットUI要素は、ドラッグされていない別のUI要素に影響を及ぼし得る。具体的には、ドラッグリンク中、ターゲットUI要素のアニメーション効果をトリガすることは、1つ以上の他のUI要素、またはさらにはUI全体の他のUI要素のアニメーション効果を一緒にトリガし得る。例えば、ドラッグリンク中、ターゲットUI要素がドラッグされているとき、ターゲットUI要素が、ドラッグに従ってアニメーション効果を伴って移動することに加えて、別のUI要素も、リンクされたドラッグを視覚的に提示するように対応するアニメーション効果を伴って移動し得る。
このようにして、異なるUI要素のアニメーション効果間のリンクは強化されることができ、独立したUI要素間の関係が強調され得る。アニメーション効果が単調であり、UI要素が独立していて無関係である従来のアニメーションと比較して、本開示の実施形態は、アニメーション効果を物理的な規則により良好に従わせ、実際の使用シナリオおよびユーザの使用習慣を考慮することができ、それによって、ユーザ体験を大幅に改善する。
以下は、図3A～図19Bを参照して、ドラッグリンクの一部の例示的な実施形態を説明する。
図3A～図3Cは、本開示の一部の実施形態による例示的なUI300A～300Cの概略図である。一部の実施形態では、UI要素は不規則なサイズおよび形状を有し得る。例えば、図3Aに示されているように、UI300Aは、UI要素1～13などの複数のUI要素を含み得、UI要素1、2、4、および5は、異なるサイズおよび形状を有する。さらに、UIは、代わりに不規則な部分を有してもよい。例えば、図3Bに示されているように、UI300B上のUI要素16および18の右側は空いており、すなわち、UI要素は存在しない。しかしながら、本開示の実施形態は、規則的なレイアウトを有し、かつ規則的なサイズおよび形状のUI要素を有するUIにも適用可能である。例えば、図3Cに示されているように、UI300Cは規則的なレイアウトを有し、UI300C上のUI要素25～40はすべて同じサイズおよび同じ形状を有する。本開示の実施形態は、適切な規則的または不規則なレイアウトを有し、かつ規則的および不規則なサイズおよび形状のUI要素を有する任意のUIに適用可能であることを理解されたい。
UI上のUI要素はドラッグされ得る。例えば、ユーザがUI要素を移動させたいとき、ユーザはUI要素をドラッグし得る。例えば、ユーザがUI上のUI要素の位置を変化させたり、UI要素を別のUI要素とマージしたり、またはUI要素をツールバーもしくはゴミ箱に置いたりしたいとき、ユーザはUI要素をドラッグし得る。UI要素のドラッグが検出されているとき、UI要素は、ドラッグアクションを視覚的に提示するようにアニメーション効果を伴って移動し得る。上記で説明されたように、ドラッグリンク中、ドラッグされているターゲットUI要素は、ドラッグされていない別のUI要素に影響を及ぼし得る。具体的には、ターゲットUI要素がドラッグされているとき、ターゲットUI要素が、ドラッグに従ってアニメーション効果を伴って移動することに加えて、別のUI要素も、リンクされたドラッグを視覚的に提示するように対応するアニメーション効果を伴って移動し得る。
図4は、本開示の一部の実施形態による例示的なドラッグリンク400の概略図である。図4に示されているように、UI要素3のドラッグが検出されているとき、UI要素3は、ドラッグアクションを視覚的に提示するようにアニメーション効果を伴って移動し得る。ドラッグに従ってアニメーション効果を伴って移動するUI要素3に加えて、他のUI要素2および4も、リンクされたドラッグを視覚的に提示するように対応するアニメーション効果を伴って移動し得る。明確にするために、図4は、UI要素2および3のリンクされた移動のみを示す。リンクされた移動は、任意のUI上の任意の少なくとも2つのUI要素間、例えばUI300A～300C上の任意の少なくとも2つのUI要素間で行われ得ることを理解されたい。
具体的には、時間T01において、UI要素3のドラッグが検出され、これにより、UI要素3ならびに他のUI要素2および4が移動する。時間T02において、ドラッグ方向におけるUI要素3とUI要素4との間隔が短くなる。この間隔は、2つのUI要素の対応する基準点間の距離を表し得る。一部の実施形態では、UI要素の中心点がUI要素の基準点であると決定され得る。任意選択で、この間隔は、2つのUI要素の隣接する境界間の距離を表してもよい。図4に示されているように、一部の実施形態では、UI要素3は、UI要素4の少なくとも一部を覆うことさえし得る。一方、ドラッグ方向とは反対の方向におけるUI要素3とUI要素2との間隔は長くなる。これは、UI要素3の移動速度がUI要素2および4の移動速度よりも速いことを意味する。時間T03において、ドラッグ方向におけるUI要素3とUI要素4との間隔が長くなり、ドラッグ方向とは反対の方向におけるUI要素3とUI要素2との間隔は短くなる。これは、UI要素3の移動速度がUI要素2および4の移動速度よりも遅いことを意味する。時間T04において、UI要素3ならびに他の要素2および4は、事前決定された距離まで移動し、移動を停止する。一部の実施形態では、事前決定された距離は、摩擦モデルに基づいて決定され得る。以下は、摩擦モデルに基づいて距離を決定する方法を詳細に説明する。したがって、その説明はここでは省略される。
前述は、UI要素のリンクされた移動の例を説明しており、以下は、UI要素の移動の原理を説明する。
UI要素の移動は、以下の要因、すなわち、摩擦要因、リンク要因、手追従要因、手追従比要因、手解放反発要因、および／または慣性反発要因によって制御され得る。例えば、摩擦要因は、移動を停止するようにUI要素を制御し得る。リンク要因は、別のUI要素のアニメーション効果を制御し得る。手追従要因は、UI要素の手追従移動、例えば、境界を越えることなくドラッグされているときのUI要素の手追従移動を制御し得る。手追従比要因は、UI要素の手追従移動の比率、例えば、UI要素が境界を越えてドラッグされているときの手の変位に対するUI要素の変位の比率を制御し得る。手解放反発要因は、手が解放された後のUI要素のリセット、例えば、UI要素が境界を越えてドラッグされ、手が解放された後のUI要素のリセットを制御し得る。慣性反発要因は、UI要素が境界を越えた後のUI要素の反発を制御し得る。例えば、UI要素が境界を越えて移動するとき、摩擦要因は、UI要素の移動を停止することができない場合がある。この場合、慣性反発要因は、UI要素が境界を越えた後のUI要素の反発を制御し得る。
以下は、摩擦要因に関連する摩擦モデルおよびリンク要因に関連する弾性力モデルを詳細に説明する。一般に、UI要素の移動される距離は、UI要素の移動の元の位置および目標位置が決定されるように、摩擦モデルを使用して決定され得る。加えて、対応して移動する別のUI要素のばねパラメータは、以下で詳細に説明される伝達方法を使用して、ドラッグされているUI要素のばねパラメータ（例えば、弾性係数または減衰係数）に基づいて決定され得る。このようにして、ドラッグされているUI要素および対応して移動するUI要素の移動プロセスにおいて、各UI要素は、各UI要素のばねパラメータに基づいて弾性力モデルに従って移動するように制御される。
摩擦モデルは、UI要素の移動される距離、例えば、手が解放またはフリックされた後のUI要素の移動される距離を決定するために使用され得る。この距離は、以下の式（1）および（2）を使用して決定され得る。
ffrictionは摩擦を表し、電子デバイスまたはユーザによって構成可能である。tは移動持続時間を表す。V0は初期速度を表し、電子デバイスもしくはユーザによって構成可能であるか、またはユーザのドラッグ速度を検出することによって取得される。V（t）は最終速度を表し、UI要素の移動が最終的に停止するため、V（t）は0である。eは自然定数を表す。S（t）は、UI要素の移動される距離を表す。前述の式の定数は例にすぎず、電子デバイスまたはユーザによって設定され得ることを理解されたい。
前述の式から、移動持続時間tは、式（1）を使用して決定され得ることが知られることができる。したがって、距離S（t）は、式（2）を使用してさらに決定され得る。このようにして、UI要素の移動される距離は容易に決定され得る。加えて、式内の様々なパラメータ（例えば、摩擦および初期速度）が構成可能であるため、これらのパラメータを構成することによって、UI要素の移動される距離が影響を受け得、それによって、アニメーション効果の柔軟性およびユーザ体験を改善する。
摩擦モデルに適合するUI要素の移動は、摩擦モデルの速度－時間曲線および変位－時間曲線を満たす。図5Aおよび図5Bはそれぞれ、本開示の一部の実施形態による、摩擦モデルの例示的な速度－時間曲線500Aおよび例示的な変位－時間曲線500Bの概略図である。図5Aおよび図5Bに示されているように、摩擦のみの場合、UI要素の移動速度は時間と共に0まで減少し、UI要素の移動距離は、UI要素が移動を停止するまで時間と共に増加する。
前述は、どのように摩擦要因が、移動を停止するようにUI要素を制御するかを説明している。加えて、UI要素が移動されることができる位置が限定されるかどうかも、UI要素がどこで移動を停止するかを制御することができる。
具体的には、一部の実施形態では、UI要素が移動されることができる位置は限定されない。この場合、摩擦モデルに基づいて決定された距離は、UI要素の移動される距離である。しかしながら、一部の実施形態では、UI要素が移動されることができる位置は限定される。言い換えれば、UI要素は、事前決定された位置にのみ移動されることができる。この場合、UI要素の移動される距離は摩擦モデルに基づいて決定され得るが、UI要素が移動される距離を移動された後にUI要素が事前決定された位置に位置しない場合、UI要素が事前決定された位置に移動されることができるように、UI要素の移動される距離が調整される必要がある。例えば、UI要素は、摩擦モデルに基づいて決定された停止位置に最も近い事前決定された位置に移動されてもよい。したがって、UI要素の移動される距離は、摩擦モデルと事前決定された位置との両方に基づいて決定され得る。
図6は、本開示の一部の実施形態による、移動位置が限定されたおよび限定されない例600の概略図である。図6に示されているように、UI要素が移動されることができる位置が限定されているとき、UI要素は、画面610上の元の位置620から事前決定された位置630にのみ移動されることができる。これに対して、UI要素が移動されることができる位置が限定されていないとき、UI要素は、画面610上の元の位置620から任意の位置640に移動されることができる。
さらに、一部の実施形態では、UI要素が移動することができる範囲がさらに限定され得る。この範囲を越えるUI要素の移動は、境界を越えると考えられる。この範囲は、任意の適切な範囲であり得る。例えば、この範囲は、画面境界までの距離が画面サイズの事前決定された比率もしくは事前決定された画素（例えば、10％もしくは1000画素）未満である範囲であってもよいし、またはUI要素の元の位置から目標位置までの距離が画面サイズの事前決定された比率もしくは事前決定された画素（例えば、50％もしくは10000画素）未満である範囲であってもよい。したがって、UI要素の移動される距離はまた、この範囲に基づいて決定され得る。
前述は、摩擦モデルを詳細に説明しており、以下は、弾性力モデルをさらに説明する。
UI要素の移動の変位が時間と共に変化する曲線は、弾性力モデルに適合する弾性力曲線であり得る。速度は変位および時間に基づいて決定され得るため、UI要素の移動速度も弾性力モデルに適合する。したがって、UI要素の移動は、ばねの運動規則をシミュレートし得ると考えられ得る。ここでの弾性力モデルを説明するために、UI要素の移動の変位が時間と共に変化する曲線は、弾性力曲線として説明されることを理解されたい。しかしながら、UI要素の移動の変位が時間と共に変化する曲線はまた、ベッセル曲線などの任意の適切な事前定義された曲線であってもよい。
弾性力モデルは、フックの法則の下で減衰振動式（3）および（4）に基づき得る。
f＝ma （3）
fは、振動プロセスで（すなわち、移動中に）ばねに及ぼされる力を表し、電子デバイスまたはユーザによって構成可能であり得る。aは移動の加速度を表す。tは移動持続時間を表す。kはばねの弾性係数を表す。xはばねの変形量を表す。gはばねの減衰係数を表す。mはUI要素の質量を表す。ここでは、UI要素のサイズが、UI要素の質量に相当し得る。
弾性係数は、ばねの単位変形量によって必要とされる力の大きさである。より大きい弾性係数kは、ばねが最大振幅から平衡位置に戻る時間がより短いことを示し、逆もまた同様である。弾性係数kは、電子デバイスまたはユーザによって構成可能である。一部の実施形態では、弾性係数kの値範囲は1～999であってもよく、弾性係数kの推奨値範囲は150～400であってもよい。
減衰係数は、振動プロセスにおけるばねの衝撃吸収力（例えば、流体抵抗または摩擦）の定量的表現である。衝撃吸収力は、ばねが平衡位置で停止するまでばねの振幅を徐々に減少させ得る。より大きい減衰係数は、ばねがより容易に平衡位置で停止することを示し、逆もまた同様である。減衰係数gは、電子デバイスまたはユーザによって構成可能である。一部の実施形態では、減衰係数gの値範囲は、1～99であってもよい。
さらに、上記で説明されたように、UI要素の移動される距離S（t）は、摩擦モデルに基づいて決定され得ることを理解されたい。UI要素が距離S（t）を移動するとき、S（t）はばねの変形量と考えられ得る。したがって、S（t）はxに等しい。
弾性力モデルは、3つの減衰状態、すなわち、臨界減衰状態、不足減衰状態、および過減衰状態を有する。臨界減衰は、以下の式（5）を満たす。
g2＝4×m×k （5）
gはばねの減衰係数を表し、mはUI要素のサイズを表し、kはばねの弾性係数を表す。
臨界減衰を基準とすると、減衰値が臨界減衰値よりも大きい場合、状態は過減衰であり、または減衰値が臨界減衰値よりも小さい場合、状態は過小減衰である。
異なる減衰状態では、UI要素の変位－時間曲線は異なる。図7A～図7Cはそれぞれ、本開示の一部の実施形態による、臨界減衰状態、不足減衰状態、および過減衰状態のばねの変形量xが時間tにわたって変化する例示的な曲線700A～700Cの概略図である。図7Aに示されているように、臨海減衰状態では、ばねは移動を停止し、最も安定した速度および最短時間で平衡位置に戻った後は振動しない。図7Bに示されているように、不足減衰状態では、ばねの振幅は、複数回の振動にわたってゆっくりと徐々に減少し、ばねは最終的に平衡位置に戻る。図7Cに示されているように、過減衰状態では、ばねはほとんど振動せず、振幅は徐々に減少し、ばねは平衡位置に達する。
上記で説明されたように、UI要素の移動の変位が時間と共に変化する曲線は、弾性力モデルに適合する弾性力曲線であり得る。したがって、UI要素の移動は、ばねの運動規則をシミュレートし得ると考えられ得る。言い換えれば、UI要素の変位の変化規則は、ばねの変形量の変化規則をシミュレートし得る。UI要素の変位の変化規則は、減衰係数および／または弾性係数を調整することによって調整され得、これにより、UI要素は、臨界減衰状態、過減衰状態、または不足減衰状態のばねの運動規則をシミュレートする。
さらに、上記で説明されたように、対応して移動する別のUI要素のばねパラメータは、以下で詳細に説明される伝達方法を使用して、ドラッグされているUI要素のばねパラメータ（例えば、弾性係数または減衰係数）に基づいて決定され得る。このようにして、ドラッグされているUI要素および対応して移動するUI要素の移動プロセスにおいて、各UI要素は、各UI要素のばねパラメータに基づいて弾性力モデルに従って移動するように制御される。このようにして、ドラッグされているUI要素および対応して移動するUI要素は、ドラッグ方向におけるUI要素間の間隔が最初に短くなり、次に復元され（ばねが最初に圧縮され、次に復元されるのと同様に）、ドラッグ方向とは反対の方向におけるUI要素間の間隔が最初に長くなり、次に復元される（ばねが最初に引き伸ばされ、次に復元されるのと同様に）というアニメーション効果を提示するように、異なるばねパラメータを有するばねの運動規則をシミュレートし得る。これは、ユーザのドラッグアクションに対する動的なフィードバックを増加させる。
対応して移動するUI要素のアニメーション効果は、ドラッグされているUI要素の移動のアニメーション効果と、ドラッグされているUI要素と、対応して移動するUI要素との間の距離とに基づいて決定される。対応して移動するUI要素の移動のアニメーション効果は距離と共に変化するため、UI要素の移動のアニメーション効果が距離と共に伝達されるとも考えられ得る。一部の実施形態では、伝達は非線形伝達であり得る。任意選択で、伝達は、代わりに線形伝達であってもよい。
例えば、非線形伝達の場合、対応して移動するUI要素の移動のアニメーション効果は、以下の式（6）を使用して決定され得る。
xn＝x×（n＋1）－0．18×g （6）
xnは、対応して移動するUI要素の移動のアニメーション効果を表す。xは、ドラッグされているUI要素の移動のアニメーション効果を表す。nは、ドラッグされているUI要素と、対応して移動するUI要素との間の距離を表す。gは伝達係数を表す。伝達係数が0であるとき、対応して移動するUI要素の移動のアニメーション効果は、ドラッグされているUI要素の移動のアニメーション効果と同じである。式（6）の定数は例にすぎず、電子デバイスまたはユーザによって構成可能である。
UI要素の移動の変位が時間と共に変化する曲線が弾性力曲線であるとき、移動のアニメーション効果は、減衰係数および／または弾性係数によって制御され得る。したがって、xは、減衰係数および弾性係数の少なくとも一方に基づいて決定され得る。
例えば、xは、ドラッグされているUI要素の減衰係数に対する弾性係数の比であり得る。この場合、ドラッグされているUI要素の減衰係数に対する弾性係数の比は、距離nに基づいて、対応して移動するUI要素に伝達され、これにより、対応して移動するUI要素の減衰係数に対する弾性係数の比xnが取得される。したがって、ドラッグされているUI要素の移動のアニメーション効果は、距離に基づいて、対応して移動するUI要素に伝達され得る。減衰係数に対する弾性係数のより大きい比は、UI要素の移動間のより弱い関連性、およびUI要素のばね特性と移動との間のより大きい差を示す。このようにして、ばねは「柔らかい」と考えられ得る。反対に、減衰係数に対する弾性係数のより小さい比は、UI要素の移動間のより強い関連性、およびUI要素のばね特性と移動との間のより小さい差を示す。このようにして、ばねは「硬い」と考えられ得る。
ドラッグされているUI要素の減衰係数に対する弾性係数の比を表すxは例にすぎないことを理解されたい。xは、任意の適切な要因であってもよい。別の例では、xは、ドラッグされているUI要素の弾性係数であってもよい。さらに別の例では、xは、代わりに、ドラッグされているUI要素の減衰係数であってもよい。
さらに、弾性力曲線が上記で詳細に説明されているが、UI要素の移動のアニメーション効果は、ベッセル曲線などの任意の適切な事前決定された曲線に従い得る。ベッセル曲線の次数の数に応じて、ベッセル曲線は、次数に対応する制御点を有し得る。例えば、2次ベッセル曲線の場合、ベッセル曲線は2つの制御点を有し得る。同様に、1次ベッセル曲線の場合、ベッセル曲線は1つの制御点を有し得、3次ベッセル曲線の場合、ベッセル曲線は3つの制御点を有し得、以下同様である。UI要素の移動の変位が時間と共に変化する曲線がベッセル曲線であるとき、移動のアニメーション効果は、ベッセル曲線の少なくとも1つの制御点のうちの少なくとも1つの座標を使用して制御され得る。例えば、2次ベッセル曲線の場合、2次ベッセル曲線の2つの制御点の一方または両方が、移動のアニメーション効果を制御するために使用され得る。したがって、xは、少なくとも1つの制御点のうちの少なくとも1つの座標に基づいて決定され得る。
前述は、非線形伝達を詳細に説明している。線形伝達の場合、対応して移動するUI要素の移動のアニメーション効果は、以下の式（7）を使用して決定され得る。
xn＝x－g×n （7）
xnは、対応して移動するUI要素の移動のアニメーション効果を表す。xは、ドラッグされているUI要素の移動のアニメーション効果を表す。nは、ドラッグされているUI要素と、対応して移動するUI要素との間の距離を表す。gは伝達係数を表す。伝達係数が0であるとき、対応して移動するUI要素の移動のアニメーション効果は、ドラッグされているUI要素の移動のアニメーション効果と同じである。
非線形伝達と同様に、UI要素の移動の変位が時間と共に変化する曲線が弾性力曲線であるとき、移動のアニメーション効果は、減衰係数および／または弾性係数によって制御され得る。したがって、xは、減衰係数および弾性係数の少なくとも一方に基づいて決定され得る。UI要素の移動の変位が時間と共に変化する曲線がベッセル曲線であるとき、移動のアニメーション効果は、ベッセル曲線の少なくとも1つの制御点のうちの少なくとも1つの座標を使用して制御され得る。したがって、xは、少なくとも1つの制御点のうちの少なくとも1つの座標に基づいて決定され得る。
前述は、ドラッグリンクの原理を詳細に説明している。以下は、ドラッグリンクの原理を使用してUI要素のリンクされた移動を制御するプロセスをさらに説明する。
図8は、本開示の一実施形態によるグラフィカルインターフェース表示方法800のフローチャートである。方法800は、図1を参照して説明された電子デバイス100または図2を参照して説明された電子デバイス200によって実行され得ることを理解されたい。方法800は、ここでは、図3AのUI300Aを参照して説明される。しかしながら、UI300Aは例にすぎず、方法800は、UI300Bおよび300Cを含むが、これらに限定されない任意の適切なインターフェースに適用可能であることを理解されたい。
ブロック810において、M個のユーザインターフェースUI要素が電子デバイスの画面上に表示される。Mは1より大きい正の整数である。図9を参照されたい。例えば、M個のUI要素は、UI要素1～13であり得る。
ブロック820において、M個のUI要素内の第1のUI要素に対して実行されたドラッグが検出される。例えば、第1のUI要素はUI要素5であってもよい。第1のUI要素に対して実行されたドラッグは、ドラッグ効果を提示するように第1のUI要素がアニメーション効果を伴って移動することを可能にする。
ブロック830において、第1のUI要素に対して実行されたドラッグに応答して、画面上のN個のUI要素の各々が対応するアニメーション効果を伴って移動することが可能にされる。Nは、1～M－1の範囲の正の整数である。したがって、リンクされたドラッグが視覚的に示される。
一部の実施形態では、画面上のすべてのUI要素でドラッグリンクが使用され得る。この場合、第1のUI要素以外の、M個のUI要素内のM－1個のUI要素がN個のUI要素であると決定され得る。任意選択で、ドラッグリンクは、画面上のUI要素の一部にのみ適用されてもよい。この場合、第1のUI要素の影響領域は、第1のUI要素のサイズに基づいて決定されてもよく、M個のUI要素内の、影響領域内にあるUI要素が、N個のUI要素として決定される。例えば、第1のUI要素のより大きいサイズは、第1のUI要素のより大きい影響領域を示し得る。任意選択で、影響領域はまた、サイズ縮小と共に狭くされてもよい。これは本開示のここでは限定されない。例えば、影響領域は、第1のUI要素の基準点を中心として使用し、かつ事前決定された半径を有する円であってもよい。影響領域は、任意の形状を有する任意の適切な領域であってもよいことを理解されたい。例えば、影響領域は、事前決定されたサイズを有する矩形または菱形などである。影響領域は、電子デバイスおよびユーザによって構成可能であり得る。これは本開示のここでは限定されない。
加えて、一部の実施形態では、影響領域と交差するUI要素は、影響領域内にあると考えられ得る。任意選択で、影響領域が事前決定された半径を有する円であるときに、UI要素と第1のUI要素との間の距離が影響領域の事前決定された半径よりも短い場合、UI要素は影響領域内にあると考えられ得る。
図9は、本開示の一実施形態によるUI要素の例示的な影響領域の概略図である。図9に示されているように、UI要素3、4、7、および8はUI要素5の影響領域910内にあるため、UI要素3、4、7、および8は対応してUI要素5と共に移動する。加えて、UI要素1、2、6、および9～13はUI要素5の影響領域910内にないため、UI要素1、2、6、および9～13は対応してUI要素5と共に移動しない。
再び図8を参照されたい。N個のUI要素が対応するアニメーション効果を伴って移動することを可能にするために、第1のUI要素とN個のUI要素の各々との間の距離が決定され得る。以下は、N個のUI要素内の第1のUI要素と第2のUI要素との間の距離を決定する方法を説明する。
一部の実施形態では、距離は、距離が位置する範囲に基づいて複数の距離レベルに分類され得る。例えば、操作されたUI要素の距離レベルは0であってもよく、リンクされたUI要素の距離レベルは、リンクされたUI要素と操作されたUI要素との間の距離に基づいて1、2、3、…であってもよい。同じ距離レベルにあるUI要素は、操作されたUI要素までの距離が同じであると考えられてもよい。したがって、距離レベルを使用することによってUI要素間のリンクは簡略化され得、これにより、同じ距離レベルにあるUI要素は同じ方法でリンクされ、それによって、リンクの一貫性および調整を改善する。しかしながら、UI要素がより正確にリンクされるように、リンク中に距離が代わりに使用されてもよいことを理解されたい。以下では、距離レベルは、交換可能に距離と呼ばれ得る。
図10は、本開示の一実施形態による、距離を決定する例1000の概略図である。図10に示されているように、一部の実施形態では、第1のUI要素（例えば、UI要素5）の第1の基準点および第2のUI要素（例えば、UI要素2）の第2の基準点が決定され得る。図10では、各UI要素の基準点は「＋」で示されている。一部の実施形態では、UI要素の中心点がUI要素の基準点であると決定され得る。任意選択で、UI要素の基準点は、電子デバイスまたはユーザによって構成可能であってもよく、これにより、基準点の位置は任意の適切な位置であってもよい。これは本開示のここでは限定されない。したがって、第1の基準点と第2の基準点との間の距離は、第1のUI要素と第2のUI要素との間の距離であると決定され得る。
例えば、画面上の第1の基準点の位置座標は（x0，y0）であり、画面上の第2の基準点の位置座標は（x1，y1）であると仮定される。この場合、距離は、以下の式（8）を使用して決定され得る。
nは距離を表し、x0は第1の基準点の水平座標を表し、y0は第1の基準点の垂直座標を表し、x1は第2の基準点の水平座標を表し、y1は第2の基準点の垂直座標を表す。
図10に示されているように、前述の方法を使用して決定されたUI要素5と別のUI要素との間の距離は以下の通りである。UI要素5とUI要素5との間の距離は0である。UI要素5とUI要素3、7、および8の各々との間の距離は1である。UI要素5とUI要素2、4、6、および9の各々との間の距離は2である。UI要素5とUI要素1および10～13の各々との間の距離は3である。
図11A～図11Cは、本開示の一実施形態による、距離を決定する例1100A～1100Cの概略図である。図11Aに示されているように、一部の実施形態では、第1のUI要素の第1の基準点が決定され得る。第1の基準点を円の中心としてそれぞれ使用し、かつそれぞれの半径を有する複数の円、例えば円1110A～1130Aが決定され得る。円に加えて、第1の基準点を中心として使用し、かつそれぞれのサイズを有する、矩形または菱形などの任意の他の適切な形状が決定されてもよいことを理解されたい。これは本開示のここでは限定されない。
例えば、図11Bに示されているように、一部の実施形態では、第1のUI要素の第1の基準点が決定され得る。第1の基準点を中心として使用し、かつそれぞれのサイズを有する、矩形1110Bおよび1120Bなどの複数の矩形が決定され得る。加えて、図11Cに示されているように、一部の実施形態では、第1のUI要素の第1の基準点が決定され得る。第1の基準点を中心として使用し、かつそれぞれのサイズを有する、矩形1110C～1140Cなどの複数のひし形が決定され得る。
一部の実施形態では、複数の円の半径は、事前決定されたサイズまたは割合に基づいて増加され得る。任意選択で、複数の円の半径は、電子デバイスまたはユーザによって構成可能であってもよい。これは本開示のここでは限定されない。
したがって、第2のUI要素と交差する円が複数の円の中から決定され得、交差する円の半径が距離であると決定され得る。一部の実施形態では、1つより多くの円が第2のUI要素と交差する場合、第2のUI要素と交差し、かつ最小半径を有するターゲット円がこれらの円の中から決定され得る。さらに、一部の実施形態では、第2のUI要素と交差する円がない場合、第2のUI要素に最も近い円がターゲット円として使用され得る。したがって、ターゲット円の半径が距離であると決定され得る。
図11に示されているように、前述の方法を使用して決定されたUI要素5と別のUI要素との間の距離は以下の通りである。UI要素5とUI要素5との間の距離は0である。UI要素3、4、7、および8と交差し、かつ最小半径を有する円は円1110であるため、UI要素3、4、7、および8の各々とUI要素5との間の距離は1である。円1120がUI要素2、6、および9と交差するため、UI要素2、6、および9の各々とUI要素5との間の距離は2である。加えて、円1130がUI要素1および10～13と交差するため、UI要素1および10～13の各々とUI要素5との間の距離は3である。
図12は、本開示の一実施形態による、距離を決定する例1200の概略図である。図12に示されているように、一部の実施形態では、第1のUI要素と第2のUI要素との間の水平間隔および／または第1のUI要素と第2のUI要素との間の垂直間隔が決定され得る。一部の実施形態では、水平間隔は、第1のUI要素と第2のUI要素との間の1つ以上の水平間隔の長さの合計を表し得る。水平間隔は、画面上の2つのUI要素の垂直境界間の間隔を表し得る。水平間隔と同様に、垂直間隔は、第1のUI要素と第2のUI要素との間の1つ以上の垂直間隔の長さの合計を表し得る。垂直間隔は、画面上の2つのUI要素の水平境界間の間隔を表し得る。不規則なレイアウトの場合、UI要素間の水平間隔および垂直間隔の長さは不規則であり得る。加えて、UI要素間の水平間隔および垂直間隔の長さは、電子デバイスまたはユーザによって構成可能であり得る。
したがって、この距離は、水平間隔および／または垂直間隔に基づいて決定され得る。例えば、UI要素5とUI要素13との間には2つの垂直間隔がある。したがって、UI要素5とUI要素13との間の距離は、2つの垂直間隔の長さの合計であり得る。別の例では、UI要素12とUI要素13との間には1つの水平間隔がある。したがって、UI要素12とUI要素13との間の距離は、この水平間隔の長さであり得る。
図12に示されているように、前述の方法を使用して決定されたUI要素5と別のUI要素との間の距離は以下の通りである。UI要素5とUI要素5との間の距離は0である。UI要素5とUI要素2～4および6～9の各々との間の距離は1である。UI要素5とUI要素1および10～13の各々との間の距離は2である。
図13は、本開示の一実施形態による、距離を決定する例1300の概略図である。一部の実施形態では、UI要素間の中間間隔（例えば、水平間隔および垂直間隔）のみが水平間隔および垂直間隔において考えられる図12とは異なり、UI要素間の中間UI要素のサイズも水平間隔および垂直間隔において考慮され得る。図13に示されているように、水平間隔は、第1のUI要素と第2のUI要素との間の1つ以上の水平間隔の長さ、および1つ以上の中間UI要素の幅の合計を表し得る。垂直間隔は、第1のUI要素と第2のUI要素との間の1つ以上の垂直間隔の長さと1つ以上の中間UI要素の高さとの合計を表し得る。
したがって、この距離は、水平間隔および／または垂直間隔に基づいて決定され得る。例えば、UI要素5とUI要素13との間には2つの垂直間隔および1つの中間UI要素9がある。したがって、UI要素5とUI要素13との間の距離は、2つの垂直間隔の長さとUI要素9の高さとの合計であり得る。別の例では、UI要素11とUI要素13との間には1つの水平間隔および1つの中間UI要素12がある。したがって、UI要素11とUI要素13との間の距離は、水平間隔の長さとUI要素12の幅との合計であり得る。加えて、UI要素3とUI要素5との間には1つの垂直間隔がある。したがって、UI要素3とUI要素5との間の距離は、垂直間隔の長さである。UI要素3とUI要素11との間には3つの垂直間隔および2つの中間UI要素5および7がある。したがって、UI要素3とUI要素11との間の距離は、3つの垂直間隔の長さと2つの中間UI要素5および7の高さとの合計である。UI要素3とUI要素2との間には1つの水平間隔がある。したがって、UI要素3とUI要素2との間の距離は、水平間隔の長さである。
図13に示されているように、前述の方法を使用して決定されたUI要素5と別のUI要素との間の距離は以下の通りである。UI要素5とUI要素5との間の距離は0である。UI要素5とUI要素2～4および6～9の各々との間の距離は1である。UI要素5とUI要素1および10～13の各々との間の距離は2である。
図14Aおよび図14Bは、本開示の一実施形態による、距離を決定する例1400Aおよび1400Bの概略図である。一部の実施形態では、水平間隔および垂直間隔の長さならびに中間UI要素の幅および高さに加えて、操作方向も水平間隔および垂直間隔において考慮され得る。例えば、第1のUI要素がドラッグされるとき、操作方向は、第1のUI要素をドラッグする方向であり得る。加えて、ここではドラッグリンクシナリオが説明されているが、以下で説明されるように、深度リンクシナリオおよび圧力リンクシナリオが存在する。深度リンクシナリオおよび圧力リンクシナリオでは、操作方向が考慮される距離決定方法も使用され得る。具体的には、深度リンクシナリオおよび圧力リンクシナリオでは、UI要素が押圧され得る。第1のUI要素が押圧されているとき、操作方向はないが、第2のUI要素から第1のUI要素への方向（例えば、第2の基準点から第1の基準点への方向）が操作方向と考えられ得、この操作方向が水平間隔および垂直間隔において考慮される。
この場合、水平間隔および／または垂直間隔が、図12および図13を参照して説明された距離決定方法を使用して最初に決定され得る。次に、操作方向と水平方向および／または垂直方向との間の夾角が決定され得る。したがって、操作方向の距離は、三角関数の原理を使用して決定され得る。
一部の実施形態では、図14Aに示されているように、水平間隔、垂直間隔、および操作方向1410Aの各々と水平方向または垂直方向との間の夾角が知られているため、操作方向1410Aの距離は、三角関数の原理を使用して決定され得る。
任意選択で、操作方向の距離は、代わりに、操作方向と水平方向との間の夾角および操作方向と垂直方向との間の夾角に基づいて、操作方向により近い水平方向または垂直方向を基準方向として選択することによって決定されてもよい。例えば、図14Bに示されているように、操作方向1430Bが垂直方向により近いため、垂直方向が基準方向として選択されてもよい。加えて、操作方向1430Bの距離は、垂直間隔、および操作方向1430Bと垂直方向との間の夾角に基づいて三角関数の原理を使用して決定される。別の例では、操作方向1420Bが水平方向により近いため、水平方向が基準方向として選択されてもよい。操作方向1420Bの距離は、水平間隔、および操作方向1420Bと水平方向との間の夾角に基づいて三角関数の原理を使用して決定され得る。加えて、基準方向は、電子デバイスまたはユーザによって構成可能であり得る。これは本開示のここでは限定されない。例えば、基準方向は、水平方向、垂直方向、または任意の他の適切な方向に設定されてもよい。
前述では、操作方向の距離は、水平間隔および垂直間隔を使用して決定される。しかしながら、上記で説明されたように、水平間隔および垂直間隔は、中間間隔および中間UI要素のサイズを使用して決定され得る。したがって、操作方向の距離は、代わりに、各中間間隔および中間UI要素のセグメントによって決定されてもよい。具体的には、各中間間隔および中間UI要素に関して、中間間隔または中間UI要素のサイズ、および操作方向と水平方向または垂直方向との間の夾角が決定され得る。したがって、操作方向の距離は、三角関数の原理を使用して決定され得る。次に、操作方向の総距離を決定するために、中間間隔および中間UI要素に対して決定された操作方向の距離が合計され得る。
再び図8を参照されたい。第1のUI要素と第2のUI要素との間の距離が決定された後、第2のUI要素の移動のアニメーション効果は、距離に基づいて決定され得る。したがって、一部の実施形態では、ドラッグに応答して第1のUI要素が移動する第1のアニメーション効果が決定され得る。上記で説明されたように、一部の実施形態では、第1のUI要素の移動の第1のアニメーション効果は、変位が時間と共に変化する事前定義された曲線によって制御され得る。例えば、事前定義された曲線は、ベッセル曲線または弾性力曲線であり得る。
したがって、ドラッグに応答する第2のUI要素の移動のアニメーション効果は、第1のアニメーション効果および第1のUI要素と第2のUI要素との間の距離に基づいて決定され得る。一部の実施形態では、第1のUI要素の移動の第1のアニメーション効果が、変位が時間と共に変化する事前定義された曲線によって制御されるとき、第2のUI要素の変位が時間と共に変化する曲線は、第1のUI要素の変位が時間と共に変化する事前定義された曲線に基づいて決定され得る。例えば、弾性力曲線の場合、ばねの減衰係数および／または弾性係数は、距離に基づいて伝達され得る。ベッセル曲線の場合、ベッセル曲線の少なくとも1つの制御点のうちの少なくとも1つの座標は、距離に基づいて伝達され得る。上記で詳細に説明された伝達方法は、第2のUI要素のアニメーション効果を取得するために、第1のUI要素のアニメーション効果を第2のUI要素に伝達する方法を実施するために使用され得る。したがって、その説明はここでは省略される。
このようにして、第2のUI要素の移動のアニメーション効果は、第1のUI要素の移動のアニメーション効果および第2のUI要素と第1のUI要素との間の距離によって決定されるため、直感的で自然でユーザの使用習慣に従うドラッグリンクが実施され得る。
加えて、一部の実施形態では、第2のUI要素のサイズも、第2のUI要素の移動のアニメーション効果に影響を及ぼし得る。この場合、第2のUI要素のアニメーション効果を決定するために、第2のUI要素のサイズも考慮され得る。例えば、第2のUI要素のより大きいサイズは、第2のUI要素に対するより小さい可能なリンクの影響を示す。したがって、第2のUI要素の移動のアニメーション効果は、第2のUI要素のサイズに反比例し得る。したがって、一部の実施形態では、第2のUI要素の移動のアニメーション効果は、第1の振幅、距離、および第2のUI要素のサイズに基づいて決定され得る。
加えて、一部の実施形態では、第1のUI要素のサイズも、第2のUI要素の移動のアニメーション効果に影響を及ぼし得る。この場合、第2のUI要素のアニメーション効果を決定するために、第1のUI要素のサイズも考慮され得る。例えば、第1のUI要素のより大きいサイズは、第1のUI要素によって生じ得るより大きいリンクの影響を示す。したがって、第2のUI要素の移動のアニメーション効果は、第1のUI要素のサイズに正比例し得る。したがって、一部の実施形態では、第2のUI要素の移動のアニメーション効果は、第1の振幅、距離、および第1のUI要素のサイズに基づいて決定され得る。
さらに、上記で説明されたように、第1のUI要素のサイズと第2のUI要素のサイズとの両方が、第2のUI要素の移動のアニメーション効果に影響を及ぼし得る。したがって、一部の実施形態では、第2のUI要素の移動のアニメーション効果は、第1の振幅、距離、第1のUI要素のサイズ、および第2のUI要素のサイズに基づいて決定され得る。
再び図8を参照されたい。第2のUI要素の移動のアニメーション効果が決定された後、第2のUI要素は、第2のUI要素が第1のUI要素と共に移動することを視覚的に示すように、アニメーション効果を伴って移動することが可能にされ得る。N個のUI要素は、画面全体または画面の一部でドラッグを視覚的に示し、それによってドラッグリンクを提示するように、それぞれのアニメーション効果を伴って移動し得る。
一部の実施形態では、対応して移動するUI要素の移動方向は、ドラッグアクションを視覚的に示すように、ドラッグ方向に関連付けられ得る。したがって、一部の実施形態では、ドラッグ方向が決定され得、第2のUI要素は、方向に関連してアニメーション効果を伴って移動することが可能にされ得る。
加えて、一部の実施形態では、アニメーション効果の伝達をより良好に提示し、ユーザ体験を改善するために、第1のUI要素および第2のUI要素は同時に移動し始めない。例えば、第1のUI要素は、ドラッグが行われたときに移動し始め得、第2のUI要素は、ドラッグがある期間行われた後に移動し始め得る。したがって、一部の実施形態では、遅延時間は、第1のUI要素と第2のUI要素との間の距離に基づいて決定され得、第2のUI要素は、遅延時間後のドラッグに応答して移動することが可能にされる。さらに、一部の実施形態では、遅延係数が決定され得、遅延時間は、距離および遅延係数に基づいて決定される。例えば、遅延時間は、遅延係数で割られた距離の商であり得る。遅延係数は、電子デバイスおよびユーザによって構成可能であり得る。
図15は、本開示の一実施形態による例示的な遅延時間1500の概略図である。図15に示されているように、第1のUI要素（例えば、UI要素5）は、ドラッグが行われたときに移動し始め、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）は、第1のUI要素より後に移動し、その距離が2であるUI要素（例えば、UI要素2、6、および9）は、その距離が1であるUI要素より後に移動し、その距離が3であるUI要素（例えば、UI要素1および10～13）は、その距離が2であるUI要素より後に移動する。
このようにして、異なるUI要素のアニメーション効果間のリンクは強化されることができ、独立したUI要素間の関係が強調され得る。アニメーション効果が単調であり、UI要素が独立していて無関係である従来のアニメーションと比較して、本開示の実施形態は、アニメーション効果を物理的な規則により良好に従わせ、実際の使用シナリオおよびユーザの使用習慣を考慮することができ、それによって、ユーザ体験を大幅に改善する。
前述は、ドラッグリンクを実施するプロセスを詳細に説明している。以下は、異なるシナリオにおけるドラッグリンクをさらに説明する。これらのシナリオは、手によってUI要素が完全に移動するシナリオ、手によってはUI要素が完全に移動しないシナリオ、手が解放またはフリックされた後にUI要素が移動し続けるシナリオ、および手が解放またはフリックされた後にUI要素が移動し続け、反発するシナリオを含む。これらのシナリオは、より豊かなアニメーション効果を合成するために互いに組み合わされ得ることを理解されたい。例えば、UI要素は、手によっては完全に移動せず、手が解放またはフリックされた後に移動し続け得る。別の例では、UI要素は、手によっては完全に移動せず、手が解放またはフリックされた後に移動し続け、反発し得る。以下では、UI要素5がドラッグされ、対応してUI要素2～4および6～9が移動する例が説明に使用される。
図16Aは、本開示の一実施形態による、手によってUI要素が完全に移動する例示的なシナリオ1600Aの概略図である。図16Bは、本開示の一実施形態による、手によってUI要素が完全に移動するシナリオの例示的な変位－時間曲線1600Bの概略図である。
図16Aおよび図16Bに示されているように、T11において、UI要素5がドラッグされる。T11aにおいて、UI要素5は、指のドラッグに伴って移動し始める。一部の実施形態では、ドラッグが行われたときにUI要素5が移動し始める場合、T11aはT11に等しくなり得る。任意選択で、ドラッグが行われた後にUI要素5が移動し始める場合、T11aはT11より後になり得る。加えて、ドラッグされているUI要素5に加えて、他のUI要素（例えば、UI要素2～4および6～9）も対応して移動する。明確にするために、他のUI要素は、UI要素5と同時に移動を開始するように示されていることを理解されたい。しかしながら、上記で説明されたように、他のUI要素の各々は、UI要素の遅延時間後に移動し始めてもよい。
T12において、ユーザは手を解放するかまたはフリックする。この場合、UI要素5のドラッグが終了する。T12aにおいて、UI要素5は移動を停止する。一部の実施形態では、手が解放またはフリックされたときにUI要素5が移動を停止する場合、T12aはT12に等しくなり得る。任意選択で、手が解放またはフリックされた後にUI要素5が移動を停止した場合、T12aはT12より後になり得る。この場合、UI要素5のドラッグ方向の変位はS10である。その距離が1であるUI要素3、4、7、および8のドラッグ方向の変位はS11である。その距離が2であるUI要素2、6、および9のドラッグ方向の変位はS12である。変位S10は変位S11よりも大きく、変位S11は変位S12よりも大きい。この場合、UI要素5は移動を停止し、その距離が1であるUI要素3、4、7、および8およびその距離が2であるUI要素2、6、および9は、事前定義された曲線（例えば、弾性力曲線）によって制御されるアニメーション効果を伴って移動し続ける。
T13において、その距離が1であるUI要素3、4、7、および8の各々とUI要素5との間隔がドラッグ方向において短くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々とその距離が2であるUI要素9とのドラッグ方向の間隔がドラッグ方向において短くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々と、その距離が2であるUI要素2および6の各々との、ドラッグ方向と反対方向の間隔がドラッグ方向において長くなる。
T14において、UI要素5のドラッグ方向の変位はS10のままである。その距離が1であるUI要素3、4、7、および8は、ドラッグ方向の変位S10で移動し、次に移動を停止する。その距離が2であるUI要素2、6、および9のドラッグ方向の変位はS10に達しておらず、UI要素2、6、および9は、事前定義された曲線によって制御されるアニメーション効果を伴って移動し続ける。T13と比較すると、その距離が1であるUI要素3、4、7、および8の各々とその距離が2であるUI要素9とのドラッグ方向の間隔がドラッグ方向において長くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々と、その距離が2であるUI要素2および6の各々との、ドラッグ方向と反対方向の間隔がドラッグ方向において短くなる。
T15において、UI要素5およびその距離が1であるUI要素3、4、7、および8のドラッグ方向の変位はS10のままである。その距離が2であるUI要素2、6、および9は、ドラッグ方向の変位S10で移動し、次に移動を停止する。この場合、ドラッグリンクが完了する。
図17Aは、本開示の一実施形態による、手によってはUI要素が完全に移動しない例示的なシナリオ1700Aの概略図である。図17Bは、本開示の一実施形態による、手によってはUI要素が完全に移動しないシナリオの例示的な変位－時間曲線1700Bの概略図である。
図17Aおよび図17Bに示されているように、T21において、UI要素5がドラッグされる。T21aにおいて、UI要素5は、指のドラッグに伴って移動し始める。一部の実施形態では、ドラッグが行われたときにUI要素5が移動し始める場合、T21aはT21に等しくなり得る。任意選択で、ドラッグが行われた後にUI要素5が移動し始める場合、T21aはT21より後になり得る。加えて、ドラッグされているUI要素5に加えて、他のUI要素（例えば、UI要素2～4および6～9）も対応して移動する。明確にするために、他のUI要素は、UI要素5と同時に移動を開始するように示されていることを理解されたい。しかしながら、上記で説明されたように、他のUI要素の各々は、UI要素の遅延時間後に移動し始めてもよい。
T22において、ユーザは手を解放するかまたはフリックする。この場合、UI要素5のドラッグが終了する。T22aにおいて、UI要素5は移動を停止する。一部の実施形態では、手が解放またはフリックされたときにUI要素5が移動を停止する場合、T22aはT22に等しくなり得る。任意選択で、手が解放またはフリックされた後にUI要素5が移動を停止した場合、T22aはT22より後になり得る。この場合、指のドラッグ方向の変位はSF2である。UI要素5のドラッグ方向の変位はS20である。その距離が1であるUI要素3、4、7、および8のドラッグ方向の変位はS21である。その距離が2であるUI要素2、6、および9のドラッグ方向の変位はS22である。変位SF2は変位S20よりも大きく、変位S20は変位S21よりも大きく、変位S21は変位S22よりも大きい。この場合、UI要素5は移動を停止し、その距離が1であるUI要素3、4、7、および8およびその距離が2であるUI要素2、6、および9は、事前定義された曲線（例えば、弾性力曲線）によって制御されるアニメーション効果を伴って移動し続ける。T21と比較して、UI要素5とその距離が1であるUI要素3、4、7、および8の各々との間隔はドラッグ方向において長くなる。その距離が1であるUI要素3、4、7、および8の各々とその距離が2であるUI要素9とのドラッグ方向の間隔がドラッグ方向において短くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々と、その距離が2であるUI要素2および6の各々との、ドラッグ方向と反対方向の間隔がドラッグ方向において長くなる。
T23において、その距離が1であるUI要素3、4、7、および8の各々とUI要素5との間隔がドラッグ方向において短くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々とその距離が2であるUI要素9とのドラッグ方向の間隔がドラッグ方向において短くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々と、その距離が2であるUI要素2および6の各々との、ドラッグ方向と反対方向の間隔がドラッグ方向において長くなる。
T24において、UI要素5のドラッグ方向の変位はS20のままである。その距離が1であるUI要素3、4、7、および8は、ドラッグ方向の変位S20で移動し、次に移動を停止する。その距離が2であるUI要素2、6、および9のドラッグ方向の変位はS20に達しておらず、UI要素2、6、および9は、事前定義された曲線によって制御されるアニメーション効果を伴って移動し続ける。T23と比較すると、その距離が1であるUI要素3、4、7、および8の各々とその距離が2であるUI要素9とのドラッグ方向の間隔がドラッグ方向において長くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々と、その距離が2であるUI要素2および6の各々との、ドラッグ方向と反対方向の間隔がドラッグ方向において短くなる。
T25において、UI要素5およびその距離が1であるUI要素3、4、7、および8のドラッグ方向の変位はS20のままである。その距離が2であるUI要素2、6、および9は、ドラッグ方向の変位S20で移動し、次に移動を停止する。この場合、ドラッグリンクが完了する。
図16A～図17Bを参照して説明されたシナリオでは、ドラッグが停止された後、UI要素5は移動を停止する。しかしながら、UI要素5は、代わりに、ドラッグが停止された後にある距離だけ移動し続けてもよい。一部の実施形態では、この距離は、上記で説明されたような摩擦モデルに基づいて決定され得る。ドラッグが停止された後にUI要素5が移動し続けるかどうかは、電子デバイスおよびユーザによって構成可能である。例えば、手が解放またはフリックされた後にUI要素5が移動し続けることを可能にするように電子デバイスが構成される場合、UI要素5は移動し続け得る。そうでない場合、UI要素5は、ドラッグが停止したときに移動を停止する。
図18Aは、本開示の一実施形態による、手によってUI要素が完全に移動する例示的なシナリオ1800Aの概略図である。図18Bは、本開示の一実施形態による、手によってUI要素が完全に移動するシナリオの例示的な変位－時間曲線1800Bの概略図である。
図18Aおよび図18Bに示されているように、T31において、UI要素5がドラッグされる。T11aにおいて、UI要素5は、指のドラッグに伴って移動し始める。一部の実施形態では、ドラッグが行われたときにUI要素5が移動し始める場合、T31aはT31に等しくなり得る。任意選択で、ドラッグが行われた後にUI要素5が移動し始める場合、T31aはT31より後になり得る。加えて、ドラッグされているUI要素5に加えて、他のUI要素（例えば、UI要素2～4および6～9）も対応して移動する。明確にするために、他のUI要素は、UI要素5と同時に移動を開始するように示されていることを理解されたい。しかしながら、上記で説明されたように、他のUI要素の各々は、UI要素の遅延時間後に移動し始めてもよい。
T32において、ユーザは手を解放するかまたはフリックする。この場合、UI要素5のドラッグが終了する。T32aにおいて、UI要素5は、事前定義された曲線（例えば、弾性力曲線）によって制御されるアニメーション効果を伴って移動し続ける。一部の実施形態では、ドラッグが終了したときにUI要素5が事前定義された曲線によって制御されるアニメーション効果を伴って移動する場合、T32aはT32に等しくなり得る。任意選択で、ドラッグが終了した後にUI要素5が事前定義された曲線によって制御されるアニメーション効果を伴って移動する場合、T32aはT32より後になり得る。この場合、UI要素5のドラッグ方向の変位はSF3である。その距離が1であるUI要素3、4、7、および8のドラッグ方向の変位はS31である。その距離が2であるUI要素2、6、および9のドラッグ方向の変位はS32である。変位SF3は変位S31よりも大きく、変位S31は変位S32よりも大きい。加えて、その距離が1であるUI要素3、4、7、および8、ならびにその距離が2であるUI要素2、6、および9もまた、事前定義された曲線のアニメーション効果を伴って移動し続ける。T31と比較して、UI要素5とその距離が1であるUI要素3、4、7、および8の各々との間隔はドラッグ方向において長くなる。その距離が1であるUI要素3、4、7、および8の各々とその距離が2であるUI要素9とのドラッグ方向の間隔がドラッグ方向において短くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々と、その距離が2であるUI要素2および6の各々との、ドラッグ方向と反対方向の間隔がドラッグ方向において長くなる。
T33において、UI要素5とその距離が1であるUI要素3、4、7、および8の各々との間隔はドラッグ方向において長くなる。その距離が1であるUI要素3、4、7、および8の各々とその距離が2であるUI要素9とのドラッグ方向の間隔がドラッグ方向において短くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々と、その距離が2であるUI要素2および6の各々との、ドラッグ方向と反対方向の間隔がドラッグ方向において長くなる。
T34において、すべてのUI要素は、事前定義された曲線によって制御されるアニメーション効果を伴って移動し続ける。T33と比較して、その距離が1であるUI要素3、4、7、および8の各々とUI要素5との間隔がドラッグ方向において短くなる。その距離が1であるUI要素3、4、7、および8の各々とその距離が2であるUI要素9とのドラッグ方向の間隔がドラッグ方向において長くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々と、その距離が2であるUI要素2および6の各々との、ドラッグ方向と反対方向の間隔がドラッグ方向において短くなる。
T35において、すべてのUI要素は、ドラッグ方向の変位S30で移動し、移動を停止する。移動が停止される位置の変位S30と、手が解放されるまたはフリックされる位置の変位SF3との間のドラッグ方向の距離は、上記で説明されたような摩擦モデルに基づいて決定され得る。この場合、ドラッグリンクが完了する。
さらに、一部の実施形態では、ドラッグが停止された後にUI要素が移動し続ける場合、UI要素はある距離だけ反発し得る。上記で説明されたように、不足減衰状態では、ばねの変位は、時間と共に正の値と負の値との間を行き来する。したがって、不足減衰状態の弾性力曲線が、UI要素の反発を制御するために使用され得る。
図18Aおよび図18Bでは、UI要素が互いに重なり合うことを許すように示されていることを理解されたい。例えば、時間T32～T34において、UI要素8とUI要素9とが重なり合っている。しかしながら、UI要素は、互いに重なり合うことを許されなくてもよい。重なり合いが許されるかどうかは、電子デバイスまたはユーザによって構成可能である。重なり合いが許されるとき、UI要素の移動は、不足減衰状態の弾性力曲線に従う。重なり合いが許されないとき、UI要素の移動は、過減衰状態の弾性力曲線に従う。さらに、任意の2つのUI要素が重なり合うかどうかは、2つのUI要素の相対移動振幅にさらに依存し得る。例えば、2つのUI要素の相対移動振幅が小さいとき、UI要素は通常重なり合わない。しかしながら、2つのUI要素の相対移動振幅が大きいとき、UI要素は重なり合い得る。
図19Aは、本開示の一実施形態による、手によってUI要素が完全に移動する例示的なシナリオ1900Aの概略図である。図19Bは、本開示の一実施形態による、手によってUI要素が完全に移動するシナリオの例示的な変位－時間曲線1900Bの概略図である。
図19Aおよび図19Bに示されているように、T41において、UI要素5がドラッグされる。T41aにおいて、UI要素5は、指のドラッグに伴って移動し始める。一部の実施形態では、ドラッグが行われたときにUI要素5が移動し始める場合、T41aはT41に等しくなり得る。任意選択で、ドラッグが行われた後にUI要素5が移動し始める場合、T41aはT41より後になり得る。加えて、ドラッグされているUI要素5に加えて、他のUI要素（例えば、UI要素2～4および6～9）も対応して移動する。明確にするために、他のUI要素は、UI要素5と同時に移動を開始するように示されていることを理解されたい。しかしながら、上記で説明されたように、他のUI要素の各々は、UI要素の遅延時間後に移動し始めてもよい。
T42において、ユーザは手を解放するかまたはフリックする。この場合、UI要素5のドラッグが終了する。T42aにおいて、UI要素5は、事前定義された曲線（例えば、弾性力曲線）によって制御されるアニメーション効果を伴って移動し続ける。一部の実施形態では、ドラッグが終了したときにUI要素5が事前定義された曲線によって制御されるアニメーション効果を伴って移動する場合、T42aはT42に等しくなり得る。任意選択で、ドラッグが終了した後にUI要素5が事前定義された曲線によって制御されるアニメーション効果を伴って移動する場合、T42aはT42より後になり得る。この場合、UI要素5のドラッグ方向の変位はSF4である。その距離が1であるUI要素3、4、7、および8のドラッグ方向の変位はS41である。その距離が2であるUI要素2、6、および9のドラッグ方向の変位はS42である。変位SF4は変位S41よりも大きく、変位S41は変位S42よりも大きい。加えて、その距離が1であるUI要素3、4、7、および8、ならびにその距離が2であるUI要素2、6、および9もまた、事前定義された曲線のアニメーション効果を伴って移動し続ける。T41と比較して、UI要素5とその距離が1であるUI要素3、4、7、および8の各々との間隔はドラッグ方向において長くなる。その距離が1であるUI要素3、4、7、および8の各々とその距離が2であるUI要素9とのドラッグ方向の間隔がドラッグ方向において短くなる。加えて、その距離が1であるUI要素3、4、7、および8の各々と、その距離が2であるUI要素2および6の各々との、ドラッグ方向と反対方向の間隔がドラッグ方向において長くなる。
T43において、UI要素5は、ドラッグ方向の変位S40で移動し、反発し始める。一部の実施形態では、反発の位置のドラッグ方向の変位S40と、解放またはフリックの位置のドラッグ方向の変位SF4との間の距離は、上記で説明されたような摩擦モデルに基づいて決定され得る。
T44において、その距離が2であるUI要素9は、ドラッグ方向の変位S40で移動し、同様に反発し始める。
T45において、すべてのUI要素は、ドラッグ方向の変位SF4で反発し、移動を停止する。この場合、ドラッグリンクが完了する。
その距離が1であるUI要素3、4、7、および8の前にUI要素5が反発するように示され、その距離が1であるUI要素3、4、7、および8がその距離が2であるUI要素2、6、および9の前に反発するように示されているが、すべてのUI要素が一緒に反発してもよいことを理解されたい。例えば、UI要素5は、移動を停止し、他のUI要素が変位S40で移動するのを待ち、次に一緒に反発し始めてもよい。加えて、すべてのUI要素は、解放またはフリックの位置に反発するように示されているが、すべてのUI要素は、より大きな振幅またはより小さな振幅で反発してもよい。これは、本開示のこの実施形態では限定されない。
深度リンク
本開示の実施形態は、深度リンクとも呼ばれる、深度方向のUI上のUI要素のリンクに関する。深度方向は、電子デバイスの画面に垂直な方向である。深度リンク中、押圧されたターゲットUI要素は、押圧されていない別のUI要素に影響を及ぼし得る。具体的には、深度リンク中、ターゲットUI要素のアニメーション効果をトリガすることは、1つ以上の他のUI要素、またはさらには、他のすべてのUI要素がターゲットUI要素の影響を受けるようにUI全体の他のUI要素のアニメーション効果を一緒にトリガし得る。例えば、深度リンク中、ターゲットUI要素がある期間押圧されたとき、時間と共にスケーリングされたターゲットUI要素に加えて、リンクされたスケーリングを視覚的に提示するように、別のUI要素も対応する振幅でスケーリングされてもよい。
このようにして、異なるUI要素のアニメーション効果間のリンクは強化されることができ、独立したUI要素間の関係が強調され得る。アニメーション効果が単調であり、UI要素が独立していて無関係である従来のアニメーションと比較して、本開示の実施形態は、アニメーション効果を物理的な規則により良好に従わせ、実際の使用シナリオおよびユーザの使用習慣を考慮することができ、それによって、ユーザ体験を大幅に改善する。
以下は、図20～図33を参照して、深度リンクの一部の例示的な実施形態を説明する。
深度リンクは、任意の適切な規則的または不規則なレイアウトを有するUI上で行われ得、UI上のUI要素は、任意の適切なサイズおよび形状を有し得る。例えば、図3A～図3Cに示されているUI300A～300C上で、深度リンクは行われ得る。
UI上のUI要素は押圧され得る。例えば、ユーザがUI要素に関連する動作を実行するつもりであるとき、ユーザはUI要素を押圧し得る。例えば、ユーザがUI要素によって表されるアプリケーションに入ったり、またはUI要素に関連するメニューを開いたりなどを行うつもりであるとき、ユーザはUI要素を押圧し得る。UI要素に対して実行された押圧が検出されたとき、UI要素は変化され得る。例えば、UI要素は、深度方向の押圧アクションを提示するようにスケーリングされ得る。例えば、UI要素は、深度方向の距離を提示するように縮小され得る。任意選択で、UI要素は、深度方向の近接を提示するように拡大されてもよい。以下は、UI要素を縮小することを例として使用してスケーリングを説明する。しかしながら、UI要素は代わりに拡大されてもよいことを理解されたい。
図20は、本開示の一部の実施形態による、UI要素が押圧されたときのUI要素の例示的な変化2000の概略図である。図20に示されているように、UI要素に対して実行された押圧が検出されたとき、UI要素は、深度方向の距離を提示するように縮小され得る。
UI要素の変化は、表面圧力モデルに適合し得る。表面圧力モデルでは、UI要素の各部分（例えば、任意の他の適切な方法で分割された各画素または各部分）で圧力が同じである。言い換えれば、UI要素のどの部分が押圧されたか（例えば、UI要素の中心と縁のどちらが押圧されたか）にかかわらず、UI要素のすべての部分に関して圧力は同じである。したがって、UI要素のどの部分が押圧されたかにかかわらず、UI要素は同じ変化を有する。
図21は、本開示の一部の実施形態による、UI要素が異なる位置で押圧されたときのUI要素の例示的な変化2100の概略図である。図21に示されているように、押圧がUI要素の中心で検出されるか、それともUI要素の縁で検出されるかにかかわらず、UI要素は、深度方向の距離を提示するように同じ振幅で縮小され得る。
加えて、図21に示されているように、UI要素が縮小された後、押圧された位置は、縮小されたUI要素の範囲内になくてもよい。この場合、押圧された位置はそれでも、縮小前のUI要素の範囲内か、または任意の他の適切な範囲にあるため、押圧は、UI要素に対する押圧として検出され続け得る。任意選択で、押圧された位置は縮小されたUI要素の範囲内にもはやないため、押圧は、UI要素に対する押圧として検出されない。この場合、押圧は終了したと考えられ得る。
加えて、一部の実施形態では、UI要素の変化が自然法則およびユーザの使用習慣に従うことを可能にするために、変化振幅は押圧力の大きさに依存してもよい。実際の世界では、力の大きさは通常、実際の力の大きさである。この場合、より大きい押圧力は、より大きい深度方向の変化を示す。一部の実施形態では、押圧力は、ユーザによって加えられ、電子デバイスによって検出される押圧力であり得る。任意選択で、押圧力は、代わりに、電子デバイスまたはユーザによって設定された事前設定された押圧力であってもよい。
図22は、本開示の一部の実施形態による、異なる力を使用して押圧されたときのUI要素の例示的な変化2200の概略図である。図22に示されているように、押圧力が大きいとき、UI要素は、深度方向のより長い距離を提示するように、より大きい程度で縮小されてもよい。一部の実施形態では、UI要素はさらに、深度方向の最大距離を提示するように、UIから消えるように縮小されてもよく、すなわち、0のサイズに縮小されてもよい。一方、押圧力が小さいとき、UI要素は、深度方向のより短い距離を提示するように、より小さい程度で縮小されてもよい。
しかしながら、これは、本開示の実施形態ではこれに限定されない。異なる押圧の力に応答するUI要素のスケーリング方法は、電子デバイスまたはユーザによって構成可能である。例えば、押圧力が大きいとき、UI要素はより小さい程度で縮小されてもよく、押圧力が小さいとき、UI要素はより大きい程度で縮小されてもよい。
さらに、電子デバイスでは、実際の押圧力に完全に基づく深度方向の変化に関してユーザに対して比較的高い要求があり得、電子デバイスは、関係するハードウェアを具備する必要があり得る。したがって、一部の実施形態では、押圧力は、押圧持続時間によってシミュレートされ得る、または押圧持続時間に置き換えられ得る。例えば、押圧持続時間がより長い場合、押圧力はより大きいと考えられ得、したがって、深度方向の変化はより大きくなる。
図23は、本開示の一部の実施形態による、異なる持続時間にわたって押圧されたときのUI要素の例示的な変化2300の概略図である。図23に示されているように、押圧持続時間が長いとき、UI要素は、深度方向のより長い距離を提示するように、より大きい程度で縮小されてもよい。一部の実施形態では、UI要素はさらに、深度方向の最大距離を提示するように、UIから消えるように縮小されてもよく、すなわち、0のサイズに縮小されてもよい。一方、押圧持続時間が短いとき、UI要素は、深度方向のより短い距離を提示するように、より小さい程度で縮小されてもよい。
しかしながら、これは、本開示の実施形態ではこれに限定されない。異なる押圧の持続時間に応答するUI要素のスケーリング方法は、電子デバイスまたはユーザによって構成可能である。例えば、押圧持続時間が長いとき、UI要素はより小さい程度で縮小されてもよく、押圧持続時間が短いとき、UI要素はより大きい程度で縮小されてもよい。
加えて、一部の実施形態では、UI要素の変化が自然法則およびユーザの使用習慣に従うことをさらに可能にするために、変化振幅はUI要素のサイズに依存してもよい。例えば、視覚的に、同じ押圧の下で、大きなUI要素を押圧することは困難であり得るが、小さなUI要素を押圧することは容易である。この場合、比較的大きなUI要素に対する押圧の影響は小さくなり得、比較的小さなUI要素に対する押圧の影響は大きくなり得る。
図24は、本開示の一部の実施形態による、異なるサイズのUI要素の例示的な変化2400の概略図である。図24に示されているように、UI要素のサイズが大きいとき、UI要素は、深度方向のより長い距離を提示するように、より大きい程度で縮小されてもよい。一方、UI要素のサイズが小さいとき、UI要素は、深度方向のより短い距離を提示するように、より小さい程度で縮小されてもよい。
しかしながら、これは、本開示の実施形態ではこれに限定されない。異なるサイズのUI要素のスケーリング方法は、電子デバイスまたはユーザによって構成可能である。例えば、スケーリングされたUI要素のサイズをよりバランスよくするために、比較的大きなUI要素に対する押圧の影響は大きくなり得、比較的小さなUI要素に対する押圧の影響は小さくなり得る。したがって、深度方向のより短い距離を提示するように、UI要素のサイズが大きいとき、UI要素はより小さい程度で縮小されてもよく、UI要素のサイズが小さいとき、UI要素は、より大きい程度で縮小されてもよい。
加えて、一部の実施形態では、ユーザ体験を改善するために、UI要素が許された振幅範囲内でのみスケーリングされることができるように、UI要素をスケーリングする振幅が限定され得る。例えば、振幅範囲は、UI要素のサイズの10％～90％、100～10000画素、または画面対本体比の2％～50％などの任意の適切な範囲であってもよい。例えば、振幅範囲はUI要素のサイズの10％～90％であると仮定される。この場合、押圧力および押圧持続時間にかかわらず、押圧されたUI要素は、最大で元のサイズの10％までしか縮小されることができず、画面から消えることはできない。
前述は、押圧されたUI要素のスケーリングを詳細に説明している。上記で説明されたように、深度リンク中、押圧されたターゲットUI要素は、押圧されていない別のUI要素に影響を及ぼし得る。具体的には、深度リンク中、ターゲットUI要素のアニメーション効果をトリガすることは、1つ以上の他のUI要素、またはさらには、他のすべてのUI要素がターゲットUI要素の影響を受けるようにUI全体の他のUI要素のアニメーション効果を一緒にトリガし得る。例えば、深度リンク中、ターゲットUI要素がある期間押圧されたとき、時間と共にスケーリングされたターゲットUI要素に加えて、リンクされたスケーリングを視覚的に提示するように、別のUI要素も対応する振幅でスケーリングされてもよい。したがって、以下は、図25～図33を参照して、深度リンクを詳細に説明する。
図25は、本開示の一実施形態によるグラフィカルインターフェース表示方法2500のフローチャートである。方法2500は、図1を参照して説明された電子デバイス100または図2を参照して説明された電子デバイス200によって実行され得ることを理解されたい。方法2500は、ここでは、図3AのUI300Aを参照して説明される。しかしながら、UI300Aは例にすぎず、方法2500は、UI300Bおよび300Cを含むが、これらに限定されない任意の適切なインターフェースに適用可能であることを理解されたい。
ブロック2510において、M個のユーザインターフェースUI要素が電子デバイスの画面上に表示される。Mは1より大きい正の整数である。例えば、M個のUI要素は、UI要素1～13であり得る。
ブロック2520において、M個のUI要素内の第1のUI要素においてある期間保持された押圧が検出される。例えば、第1のUI要素はUI要素5であってもよい。上記で説明されたように、第1のUI要素においてある期間保持された押圧は、深度方向の押圧効果を提示するように第1のUI要素が時間と共にスケーリングされることを可能にする。
ブロック2530において、画面上のN個のUI要素の各々は、第1のUI要素において検出された、ある期間保持された押圧に応答してスケーリングされることが可能にされる。Nは、1～M－1の範囲の正の整数である。したがって、リンクされた押圧が視覚的に示される。
図26は、本開示の一実施形態によるN個のUI要素の深度リンク2600の例の概略図である。図26に示されているように、UI要素5はある期間押圧され、これにより、UI要素5は、深度方向の押圧効果を提示するように、時間と共にスケーリングされる。加えて、押圧に応答して、画面上の他のUI要素（例えば、UI要素1～4および6～13）もまた、深度方向の押圧効果を提示するように、時間と共に異なる振幅でスケーリングされる。したがって、リンクされた押圧が視覚的に提示される。明確にするために、図26は、UI300A上のUI要素1～13のみの深度リンクを示す。深度リンクは、任意のUI上の任意の少なくとも2つのUI要素間、例えばUI300A～300C上の任意の少なくとも2つのUI要素間で行われ得ることを理解されたい。
一部の実施形態では、画面上のすべてのUI要素で深度リンクが使用され得る。この場合、第1のUI要素以外の、M個のUI要素内のM－1個のUI要素がN個のUI要素であると決定され得る。任意選択で、深度リンクは、画面上の一部のUI要素にのみ適用されてもよい。この場合、第1のUI要素の影響領域は、第1のUI要素のサイズに基づいて決定されてもよく、M個のUI要素内の、影響領域内にあるUI要素が、N個のUI要素として決定される。例えば、第1のUI要素のより大きいサイズは、第1のUI要素のより大きい影響領域を示し得る。任意選択で、影響領域はまた、サイズ縮小と共に狭くされてもよい。これは本開示のここでは限定されない。例えば、影響領域は、第1のUI要素の基準点を中心として使用し、かつ事前決定された半径を有する円であってもよい。影響領域は、任意の形状を有する任意の適切な領域であってもよいことを理解されたい。例えば、影響領域は、事前決定されたサイズを有する矩形または菱形などである。影響領域は、電子デバイスおよびユーザによって構成可能であり得る。これは本開示のここでは限定されない。
加えて、一部の実施形態では、影響領域と交差するUI要素は、影響領域内にあると考えられ得る。任意選択で、影響領域が事前決定された半径を有する円であるときに、UI要素と第1のUI要素との間の距離が影響領域の事前決定された半径よりも短い場合、UI要素は影響領域内にあると考えられ得る。
図27は、本開示の一実施形態によるUI要素の例示的な影響領域2700の概略図である。図27に示されているように、UI要素3、4、7、および8はUI要素5の影響領域2710内にあるため、UI要素3、4、7、および8は対応してUI要素5と共にスケーリングされる。加えて、UI要素1、2、6、および9～13はUI要素5の影響領域2710内にないため、UI要素1、6、および9～13は対応してUI要素5と共にスケーリングされない。
再び図25を参照されたい。N個のUI要素が対応する振幅でスケーリングされることを可能にするために、第1のUI要素とN個のUI要素の各々との間の距離が決定され得る。上記で説明されたように、一部の実施形態では、距離は、距離が位置する範囲に基づいて複数の距離レベルに分類され得る。例えば、操作されたUI要素の距離レベルは0であってもよく、リンクされたUI要素の距離レベルは、リンクされたUI要素と操作されたUI要素との間の距離に基づいて1、2、3、…であってもよい。同じ距離レベルにあるUI要素は、操作されたUI要素までの距離が同じであると考えられてもよい。したがって、距離レベルを使用することによってUI要素間のリンクは簡略化され得、これにより、同じ距離レベルにあるUI要素は同じ方法でリンクされ、それによって、リンクの一貫性および調整を改善する。しかしながら、UI要素がより正確にリンクされるように、リンク中に距離が代わりに使用されてもよいことを理解されたい。以下では、距離レベルは、交換可能に距離と呼ばれ得る。
前述では、N個のUI要素内の第1のUI要素と第2のUI要素との間の距離を決定する方法が、図10～図14Bを参照して説明されている。したがって、その説明はここでは省略される。
再び図25を参照されたい。第1のUI要素と第2のUI要素との間の距離が決定された後、第2のUI要素をスケーリングする振幅は、距離に基づいて決定され得る。任意選択で、第1のUI要素と第2のUI要素との間の距離がより長い場合、遠くのUI要素に対する押圧のより小さい影響を視覚的に示すように、第2のUI要素をスケーリングする振幅はより小さくてもよい。任意選択で、第1のUI要素と第2のUI要素との間の距離がより長い場合、遠くのUI要素に対する押圧のより大きい影響を視覚的に示すように、第2のUI要素をスケーリングする振幅はまたより大きくてもよい。
一部の実施形態では、第2のUI要素をスケーリングする振幅を決定するために、押圧に応答して第1のUI要素をスケーリングする第1の振幅が決定され得る。一部の実施形態では、第1のUI要素をスケーリングする第1の振幅は、第1のUI要素に関連する様々な要因に基づいて決定され得る。これらの要因は、第1のUI要素のサイズ、第1のUI要素を変化させる振幅範囲、押圧持続時間、および事前決定された押圧力を含み得るが、これらに限定されない。前述は、UI要素をスケーリングする振幅に対するこれらの要因の影響を詳細に説明している。したがって、その説明はここでは省略される。
次に、押圧に応答して第2のUI要素をスケーリングする振幅が、第1の振幅および第1のUI要素と第2のUI要素との間の距離に基づいて決定され得る。上記で詳細に説明された伝達方法は、第2のUI要素をスケーリングする振幅を取得するために、第1のUI要素をスケーリングする振幅を第2のUI要素に伝達する方法を実施するために使用され得る。違いは、深度リンク中、伝達式（7）および（8）のxnが、対応してスケーリングされるUI要素（例えば、第2のUI要素）をスケーリングする振幅を表し、伝達式（7）および（8）のxが、押圧されたUI要素（例えば、第1のUI要素）をスケーリングする振幅を表すことにある。したがって、その説明はここでは省略される。
このようにして、第2のUI要素をスケーリングする振幅は、第1のUI要素をスケーリングする振幅と、第2のUI要素と第1のUI要素との間の距離とによって決定されるため、直感的で自然でユーザの使用習慣に従う深度リンクが実施され得る。
加えて、一部の実施形態では、第2のUI要素のサイズも、第2のUI要素をスケーリングする振幅に影響を及ぼし得る。この場合、第2のUI要素をスケーリングする振幅を決定するために、第2のUI要素のサイズも考慮され得る。例えば、第2のUI要素がより大きい場合、第2のUI要素をスケーリングする振幅はより大きくてもよく、これにより、画面上のスケーリングされたUI要素のサイズは視覚的により類似し、より調整される。任意選択で、第2のUI要素がより大きい場合、第2のUI要素をスケーリングする振幅はより小さくてもよく、これにより、画面上のスケーリングされたUI要素間のサイズ差がより大きくなる。したがって、一部の実施形態では、押圧に応答して第2のUI要素をスケーリングする振幅は、第1の振幅、距離、および第2のUI要素のサイズに基づいて決定され得る。
加えて、一部の実施形態では、第1のUI要素のサイズも、第2のUI要素をスケーリングする振幅に影響を及ぼし得る。この場合、第2のUI要素をスケーリングする振幅を決定するために、第1のUI要素のサイズも考慮され得る。例えば、第1のUI要素のより大きいサイズは、第1のUI要素によって生じ得るより大きいリンクの影響を示す。したがって、第2のUI要素をスケーリングするアニメーション効果は、第1のUI要素のサイズに正比例し得る。したがって、一部の実施形態では、第2のUI要素をスケーリングする振幅は、第1の振幅、距離、および第1のUI要素のサイズに基づいて決定され得る。
さらに、上記で説明されたように、第1のUI要素のサイズと第2のUI要素のサイズとの両方が、第2のUI要素をスケーリングする振幅に影響を及ぼし得る。したがって、一部の実施形態では、第2のUI要素をスケーリングする振幅は、第1の振幅、距離、第1のUI要素のサイズ、および第2のUI要素のサイズに基づいて決定され得る。
再び図25を参照されたい。第2のUI要素をスケーリングする振幅が決定された後、第2のUI要素は、第2のUI要素が第1のUI要素に対して実行された押圧によってスケーリングされることを視覚的に示すように、その振幅でスケーリングされることが可能にされ得る。N個のUI要素は、画面全体または画面の一部に対する押圧を視覚的に示し、それによって、押圧リンクを提示するように、それぞれの振幅でスケーリングされることが可能にされ得る。
図28は、本開示の一実施形態による、距離に基づくUI要素の例示的なスケーリング2800の概略図である。図2800に示されているように、その距離が0であるUI要素（例えば、UI要素5）をスケーリングする振幅は、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）をスケーリングする振幅よりも大きく、その距離が1であるUI要素をスケーリングする振幅は、その距離が2であるUI要素（例えば、UI要素2、6、および9）をスケーリングする振幅よりも大きく、その距離が2であるUI要素をスケーリングする振幅は、その距離が3であるUI要素（例えば、UI要素1および10～13）をスケーリングする振幅よりも大きい。
加えて、一部の実施形態では、アニメーション効果の伝達をより良好に提示し、ユーザ体験を改善するために、第1のUI要素と第2のUI要素とは同時にスケーリングされない。例えば、第1のUI要素は、押圧が行われたときにスケーリングされ始め得、第2のUI要素は、押圧がある期間行われた後にスケーリングされ始め得る。したがって、一部の実施形態では、遅延時間は、第1のUI要素と第2のUI要素との間の距離に基づいて決定され得、第2のUI要素は、遅延時間後の押圧に応答してスケーリングされることが可能にされ得る。さらに、一部の実施形態では、遅延係数が決定され得、遅延時間は、距離および遅延係数に基づいて決定される。例えば、遅延時間は、遅延係数で割られた距離の商であり得る。遅延係数は、電子デバイスおよびユーザによって構成可能であり得る。
図29は、本開示の一実施形態による例示的な遅延時間2900の概略図である。図29に示されているように、その距離が0である第1のUI要素は、押圧が行われたときにスケーリングされ始め、その距離が1であるUI要素は、第1のUI要素より後にスケーリングされ、その距離が2であるUI要素は、その距離が1であるUI要素より後にスケーリングされ、その距離が3であるUI要素は、その距離が2であるUI要素より後にスケーリングされる。
図30は、本開示による、遅延時間を伴うUI要素の例示的なスケーリング3000の概略図である。図30に示されているように、その距離が0であるUI要素5は、押圧が行われた時間T51にスケーリングされ始め、その距離が1であるUI要素3、4、7、および8は、時間T51の後の時間T52にスケーリングされ始め、その距離が2であるUI要素2、4、6、および9は、それより後の時間T53にスケーリングされ始め、その距離が3であるUI要素1および10～13は、最も遅いT54にスケーリングされ始める。
さらに、一部の実施形態では、UI要素のスケーリング速度が、振幅が時間と共に変化する事前定義された曲線によって制御され得る。例えば、事前定義された曲線は、ベッセル曲線または弾性力曲線であり得る。弾性力曲線の場合、スケーリング速度は、ばねの減衰係数および剛性係数を制御することによって制御され得る。ベッセル曲線の場合、スケーリング速度は、ベッセル曲線の少なくとも1つの制御点のうちの少なくとも1つの座標を制御することによって制御され得る。
さらに、一部の実施形態では、ユーザ体験を改善するために、対応してスケーリングされるUI要素は、押圧されたUI要素に向かってさらに移動し得る。具体的には、N個のUI要素は、押圧をさらに視覚的に強調するために、第1のUI要素に向かって移動し得る。例えば、変位振幅は、対応してスケーリングされるUI要素と押圧されるUI要素との間の距離、押圧持続時間、第2のUI要素のサイズ、および第1のUI要素のサイズのうちの少なくとも1つに依存し得る。したがって、一部の実施形態では、第2のUI要素の移動の変位は、第1のUI要素と第2のUI要素との間の距離、押圧持続時間、第1のUI要素のサイズ、および／または第2のUI要素のサイズに基づいて決定され得る。
次に、第2のUI要素は、第2のUI要素から第1のUI要素への方向にこの変位で移動することが可能にされ得る。例えば、第2のUI要素は、第2のUI要素の第2の基準点から第1のUI要素の第1の基準点への方向にこの変位で移動することが可能にされ得る。これの視覚的効果は、第2のUI要素が第1のUI要素によって引き付けられることである。これは、本開示の実施形態ではこれに限定されないことを理解されたい。例えば、第2のUI要素は、代わりに、反対方向（例えば、第1のUI要素の第1の基準点から第2のUI要素の第2の基準点への方向）にこの変位で移動することが可能にされてもよい。これの視覚的効果は、第2のUI要素が第1のUI要素によって排除されることである。
図31は、本開示の一実施形態によるUI要素の移動の例示的な変位3100の概略図である。図3100に示されているように、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）の変位振幅は、その距離が2であるUI要素（例えば、UI要素2、6、および9）の変位振幅よりも大きく、その距離が2であるUI要素の変位振幅は、その距離が3であるUI要素（例えば、UI要素1および10～13）の変位振幅よりも大きい。
加えて、一部の実施形態では、スケーリングされたUI要素は、押圧が終了した後（例えば、ユーザが画面から指を離した後）に復元され得る。具体的には、押圧されたUI要素と、対応してスケーリングされたN個のUI要素との両方が復元され得る。したがって、一部の実施形態では、スケーリングされた第2のUI要素は、スケーリング前の第2のUI要素に復元され得る。復元プロセスは、スケーリングの逆のプロセスであり得、したがって、その詳細な説明はここでは省略される。
図32Aは、本開示の一実施形態によるUI要素の復元3200Aの例の概略図である。図32Aに示されているように、スケーリングされたすべてのUI要素（例えば、UI要素1～13）が、スケーリング前の初期サイズに復元される。
さらに、上記で説明されたように、一部の実施形態では、UI要素はまた、押圧に応答して移動し得る。この場合、押圧が終了した後、移動されたUI要素はリセットされ得る。具体的には、押圧されたUI要素に向かって移動したN個のUI要素のすべてがリセットされ得る。したがって、一部の実施形態では、第2のUI要素は、移動後の位置から移動前の位置に復元され得る。
図32Bは、本開示の一実施形態による、変位を伴うUI要素の復元3200Bの例の概略図である。図32Bに示されているように、移動およびスケーリングされたUI要素（例えば、UI要素1～13）は、移動前の位置およびスケーリング前の初期サイズに復元される。
一部の実施形態では、スケーリングの復元または移動の復元は、反発効果を有し得る。例えば、スケーリングの復元に関して、ユーザが手を解放した後、UI要素のサイズは、最初に初期サイズよりも大きくなるように増加され、次に初期サイズまで減少され得る。加えて、移動の復元に関して、ユーザが手を解放した後、対応して移動したUI要素は、最初に、押圧されたUI要素から離れて移動前の初期位置よりも遠い位置に移動し、次に初期位置に戻り得る。
図33Aおよび図33Bはそれぞれ、本開示の一実施形態による、反発効果を伴ってUI要素を復元する例示的なサイズ－時間曲線3300Aおよび例示的な変位－時間曲線3300Bの概略図である。
スケーリングの反発に関して、図33Aに示されているように、T61において、UI要素5が押圧されて縮小される。加えて、別のUI要素（例えば、UI要素1～4および6～13）も対応して縮小される。
T62において、ユーザは手を解放する。この場合、UI要素5は、初期サイズの0．5倍に縮小されている。加えて、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）は対応して縮小されるが、UI要素の縮小振幅はUI要素5の縮小振幅よりも小さい。加えて、その距離が2であるUI要素（例えば、UI要素2、6、および9）も対応して縮小されるが、UI要素の縮小振幅は、その距離が1であるUI要素の縮小振幅よりも小さい。さらに、その距離が3であるUI要素（例えば、UI要素1および10～13）も対応して縮小されるが、UI要素の縮小振幅は、その距離が2であるUI要素の縮小振幅よりも小さい。
T62時およびT63時に、UI要素はスケーリングに関して反発し始める。
T63において、UI要素5のサイズは初期サイズの1．2倍に拡大される。加えて、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）のサイズは対応して増加されるが、UI要素の増加振幅はUI要素5の増加振幅よりも小さい。加えて、その距離が2であるUI要素（例えば、UI要素2、6、および9）のサイズも対応して増加されるが、UI要素の増加振幅は、その距離が1であるUI要素の増加振幅よりも小さい。さらに、その距離が3であるUI要素（例えば、UI要素1および10～13）のサイズも対応して増加されるが、UI要素の増加振幅は、その距離が2であるUI要素の増加振幅よりも小さい。
T64において、すべてのUI要素のサイズが初期サイズに復元される。
加えて、移動の反発に関して、図33Bに示されているように、T71において、UI要素5が押圧される。他のUI要素は、UI要素5に向かって移動する。
T72において、ユーザは手を解放する。この場合、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）のUI要素5への移動の変位は－1である。加えて、その距離が2であるUI要素（例えば、UI要素2、6、および9）もUI要素5に向かって移動するが、UI要素の変位振幅は、その距離が1であるUI要素の変位振幅よりも小さい。さらに、その距離が3であるUI要素（例えば、UI要素1および10～13）もUI要素5に向かって移動するが、UI要素の変位振幅は、その距離が2であるUI要素の変位振幅よりも小さい。
T72時およびT73時に、UI要素は移動に関して反発し始める。
T73において、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）の変位は、初期位置を超え、＋0．7である。加えて、その距離が2であるUI要素（例えば、UI要素2、6、および9）の変位も初期位置を超えるが、UI要素の変位振幅は、その距離が1であるUI要素の変位振幅よりも小さい。さらに、その距離が3であるUI要素（例えば、UI要素1および10～13）の変位も初期位置を超えるが、UI要素の変位振幅は、その距離が2であるUI要素の変位振幅よりも小さい。
T74において、すべてのUI要素の位置が初期位置に復元される。
図33Aおよび図33Bにおけるスケーリングサイズ（例えば、0．5倍または1．2倍）および移動変位（例えば、－1の変位または0．7の変位）は例にすぎず、UI要素は、任意の適切なサイズを有する小さな振幅によってスケーリングされてもよいし、または任意の適切な変位で移動してもよいことを理解されたい。さらに、図33Aおよび図33Bでは、1つの反発のみの反発効果が示されているが、複数の反発の反発効果が実施されてもよい。反発の数は、任意の適切な反発の数であり得る。これは本開示のここでは限定されない。一部の実施形態では、複数の反発の反発振幅は、時間と共に減少され得る。
図33Cおよび図33Dはそれぞれ、本開示の一実施形態による、減少される反発振幅を有する複数の反発の反発効果を伴ってUI要素を復元する例示的なサイズ－時間曲線3300Cおよび変位－時間曲線3300Dの概略図である。
図33Cに示されているように、UI要素は、複数の反発後に初期サイズに復元される。その距離が0であるUI要素（例えば、UI要素5）の反発のスケーリング振幅は、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）の反発のスケーリング振幅よりも大きい。その距離が1であるUI要素の反発のスケーリング振幅は、その距離が2であるUI要素（例えば、UI要素2、6、および9）の反発のスケーリング振幅よりも大きい。その距離が2であるUI要素の反発のスケーリング振幅は、その距離が3であるUI要素（例えば、UI要素1および10～13）の反発のスケーリング振幅よりも大きい。
同様に、図33Dに示されているように、UI要素は、複数の反発後に初期位置に復元される。その距離が0であるUI要素（例えば、UI要素5）の反発の変位振幅は、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）の反発の変位振幅よりも大きい。その距離が1であるUI要素の反発の変位振幅は、その距離が2であるUI要素（例えば、UI要素2、6、および9）の反発の変位振幅よりも大きい。その距離が2であるUI要素の反発の変位振幅は、その距離が3であるUI要素（例えば、UI要素1および10～13）の反発の変位振幅よりも大きい。
さらに、一部の実施形態では、反発効果はまた、事前定義された曲線（例えば、弾性力曲線またはベッセル曲線など）によって制御され得る。例えば、これらのUI要素は、事前定義された曲線によって制御されるアニメーション効果を伴ってスケーリングまたは移動に関して反発し得る。
圧力リンク
本開示の実施形態は、圧力リンクとも呼ばれる、押圧のアニメーション効果のためのUI上のUI要素のリンクに関する。圧力リンク中、押圧されたターゲットUI要素は、押圧されていない別のUI要素に影響を及ぼし得る。具体的には、圧力リンク中、ターゲットUI要素のアニメーション効果をトリガすることは、1つ以上の他のUI要素、またはさらには、他のすべてのUI要素がターゲットUI要素の影響を受けるようにUI全体の他のUI要素のアニメーション効果を一緒にトリガし得る。例えば、圧力リンク中、ターゲットUI要素が押圧されたとき、アニメーション効果を伴う押圧効果を提示するターゲットUI要素に加えて、別のUI要素も、リンクされた押圧を視覚的に提示するように、対応するアニメーション効果を伴う押圧効果を提示し得る。
このようにして、異なるUI要素のアニメーション効果間のリンクは強化されることができ、独立したUI要素間の関係が強調され得る。アニメーション効果が単調であり、UI要素が独立していて無関係である従来のアニメーションと比較して、本開示の実施形態は、アニメーション効果を物理的な規則により良好に従わせ、実際の使用シナリオおよびユーザの使用習慣を考慮することができ、それによって、ユーザ体験を大幅に改善する。
以下は、図34～図46を参照して、圧力リンクの一部の例示的な実施形態を説明する。
圧力リンクは、任意の適切な規則的または不規則なレイアウトを有するUI上で行われ得、UI上のUI要素は、任意の適切なサイズおよび形状を有し得る。例えば、図3A～図3Cに示されているUI300A～300C上で、圧力リンクは行われ得る。
UI上のUI要素は押圧され得る。例えば、ユーザがUI要素に関連する動作を実行するつもりであるとき、ユーザはUI要素を押圧し得る。例えば、ユーザがUI要素によって表されるアプリケーションに入ったり、またはUI要素に関連するメニューを開いたりなどを行うつもりであるとき、ユーザはUI要素を押圧し得る。UI要素に対して実行された押圧が検出されたとき、UI要素は、アニメーション効果を伴って変化され得る。例えば、UI要素は、押圧アクションを提示するように、押圧された位置に対して視覚的に反るように動いてもよい（以下では代わりに回転と呼ばれ得る）し、または押圧された位置に対して視覚的に押し下げられてもよい、もしくは突き出されてもよい。この場合、UI要素の変化は点圧力モデルに適合し得る。点圧力モデルでは、押圧された位置のUI要素の圧力は、別の部分の圧力よりも大きい。
一部の実施形態では、UI要素は剛体と考えられ得る。この場合、UI要素に対して実行された押圧が検出されたとき、UI要素は、押圧効果を提示するように、押圧された位置に対してその位置を視覚的に反るように動かし得る。
図34は、本開示の一部の実施形態による、押圧されたときの剛体としてのUI要素の例示的な変化3400の概略図である。図34に示されているように、UI要素に対して実行された押圧が検出されたとき、UI要素は、押圧された位置に対してその位置を視覚的に反るように動かすために、初期形状3410からアニメーション効果を伴って変化され得る。例えば、押圧された位置がUI要素の左側にあるとき、UI要素は、UI要素の基準点（「＋」として示されている）を中心に左側に視覚的に回転され、それによって形状3420に変化する。変化された形状3420は、その左側が押圧され、その右側が傾けられた反った板に似ている。さらに、押圧された位置がUI要素の右側にあるとき、UI要素は、UI要素の基準点を中心に右側に視覚的に回転され、それによって形状3430に変化する。変化された形状3430は、その左側が傾けられ、その右側が押圧された反った板に似ている。
この場合、UI要素は、両端がばねに接続された反った板と考えられ得、UI要素を押圧することは、一方の側でばねを押圧し、他方の側でばねを伸ばすことと考えられ得、それによって、UI要素がUI要素の基準点を中心に回転される全体的なアニメーション効果を実施する。
図35は、本開示の一部の実施形態による、UI要素の押圧をシミュレートするためにばね3500を押圧するおよび伸ばす例の概略図である。3510は、初期状態の両側のばねを示す。3520は、押圧された位置がUI要素の左側にあるときに、左側のばねが押圧され、右側のばねが伸ばされていることを示す。3530は、押圧された位置がUI要素の右側にあるときに、右側のばねが押圧され、左側のばねが伸ばされていることを示す。
この場合、ばねモデルは、以下の式（9）を使用して表され得る。
Lは、UI要素の押圧された位置と基準点との間の水平距離を表し、cは、押圧された位置と基準点との間の直線距離を表し、k’は、ばねの弾性係数を表す。
さらに、前述の式（9）は、以下の式（10）の形式に変換され得る。
k’はばねの弾性係数を表し、x’はばねの変形量を表し、g’はばねの減衰係数を表し、Tは変形時間を表し、m’はUI要素のサイズを表す。
さらに、一部の実施形態では、UI要素は非剛体と考えられ得る。この場合、UI要素に対して実行された押圧が検出されたとき、UI要素は、押圧効果を提示するように、押圧された位置に対して視覚的に押し下げられ得る、または突き出され得る。
図36は、本開示の一部の実施形態による、押圧されたときの非剛体としてのUI要素の例示的な変化3600の概略図である。図36に示されているように、UI要素はグリッド図として考えられ得る。UI要素に対して実行された押圧が検出されたとき、初期UI要素3610は、押圧された位置に対して視覚的に押し下げられるまたは突き出されるようにアニメーション効果を伴って変化され得る。例えば、初期UI要素3610内のグリッドの座標が変化され得、それによって、押圧された位置に対して押し下げられたUI要素3620に変化する。加えて、一部の実施形態では、UI要素の色（例えば、色相、明度、および彩度）もまた、押圧を強調するために変化され得る。例えば、初期UI要素3610は、代わりに、押圧された位置に対して押し下げられ、その色がより深いUI要素3630に変化されてもよい。色の変化は、剛体としてのUI要素にも適用可能であり得ることを理解されたい。
一部の実施形態では、UI要素が変化された後、押圧された位置が変化されたUI要素の範囲内にもはやない場合がある。この場合、押圧された位置はそれでも、変化前のUI要素の範囲内か、または任意の他の適切な範囲にあるため、押圧は、UI要素に対する押圧として検出され続け得る。任意選択で、押圧された位置は変化されたUI要素の範囲内にもはやないため、押圧は、UI要素に対する押圧として検出されない。この場合、押圧は終了したと考えられ得る。
以下は、UI要素が押圧された位置に対してその位置を視覚的に反るように動かす例を使用して、本開示の実施形態を説明する。しかしながら、UI要素は、代わりに、別の方法で変化されてもよく、例えば、押圧された位置に対して視覚的に押し下げられてもよい、または突き出されてもよいことを理解されたい。
加えて、一部の実施形態では、UI要素の変化が自然法則およびユーザの使用習慣に従うことを可能にするために、変化振幅は押圧力の大きさに依存してもよい。実際の世界では、力の大きさは通常、実際の力の大きさである。この場合、より大きい押圧力は、より大きいUI要素の変化を示す。一部の実施形態では、押圧力は、ユーザによって加えられ、電子デバイスによって検出される押圧力であり得る。任意選択で、押圧力は、代わりに、電子デバイスまたはユーザによって設定された事前設定された押圧力であってもよい。
図37は、本開示の一部の実施形態による、異なる力を使用して押圧されたときのUI要素の例示的な変化3700の概略図である。図37に示されているように、押圧力が大きいとき、UI要素はより大きい程度で変化され（例えば、回転され）てもよい。一方、押圧力が小さいとき、UI要素はより小さい程度で変化されてもよい。しかしながら、これは、本開示の実施形態ではこれに限定されない。異なる押圧の力に応答するUI要素の変化方法は、電子デバイスまたはユーザによって構成可能である。例えば、押圧力が大きいとき、UI要素はより小さい程度で変化されてもよく、押圧力が小さいとき、UI要素はより大きい程度で変化されてもよい。
さらに、電子デバイスでは、実際の押圧力に完全に基づく変化に関してユーザに対して比較的高い要求があり得、電子デバイスは、関係するハードウェアを具備する必要があり得る。したがって、一部の実施形態では、押圧力は、押圧持続時間によってシミュレートされ得る、または押圧持続時間に置き換えられ得る。例えば、押圧持続時間がより長い場合、押圧力はより大きいと考えられ得、したがって、変化はより大きくなる。
図38は、本開示の一部の実施形態による、異なる持続時間にわたって押圧されたときのUI要素の例示的な変化3800の概略図である。図38に示されているように、押圧持続時間が長いとき、UI要素はより大きい程度で変化され（例えば、回転され）てもよい。一方、押圧持続時間が短いとき、UI要素はより小さい程度で変化されてもよい。
しかしながら、これは、本開示の実施形態ではこれに限定されない。異なる押圧の持続時間に応答するUI要素の変化方法は、電子デバイスまたはユーザによって構成可能である。例えば、押圧持続時間が長いとき、UI要素はより小さい程度で変化されてもよく、押圧持続時間が短いとき、UI要素はより大きい程度で変化されてもよい。
加えて、一部の実施形態では、UI要素の変化が自然法則およびユーザの使用習慣に従うことをさらに可能にするために、変化振幅はUI要素のサイズに依存してもよい。例えば、視覚的に、同じ押圧の下で、大きなUI要素を押圧することは困難であり得るが、小さなUI要素を押圧することは容易である。この場合、比較的大きなUI要素に対する押圧の影響は小さくなり得、比較的小さなUI要素に対する押圧の影響は大きくなり得る。
図39は、本開示の一部の実施形態による、異なるサイズのUI要素の例示的な変化3900の概略図である。図39に示されているように、UI要素のサイズが大きいとき、UI要素はより大きい程度で変化されてもよい。一方、UI要素のサイズが小さいとき、UI要素はより小さい程度で変化されてもよい。
しかしながら、これは、本開示の実施形態ではこれに限定されない。異なるサイズのUI要素の変化方法は、電子デバイスまたはユーザによって構成可能である。例えば、UI要素のサイズが大きいとき、UI要素はより小さい程度で変化されてもよく、UI要素のサイズが小さいとき、UI要素はより大きい程度で変化されてもよい。
加えて、一部の実施形態では、ユーザ体験を改善するために、UI要素が許された振幅範囲内でのみ変化されることができるように、UI要素を変化させる振幅が限定され得る。例えば、振幅範囲は、任意の適切な範囲、例えば、UI要素の0～60度の回転角度、UI要素の色変化の10％～50％のグレースケール、またはUI要素内のグリッドの100～10000画素の座標変化であってもよい。例えば、振幅範囲は、UI要素の回転角度が0～60度であることであると仮定される。この場合、事前決定された押圧力および押圧持続時間にかかわらず、押圧されたUI要素は、基準点を中心に最大で60度だけ回転されることができ、より大きな振幅で回転されることはできない。
前述は、押圧されたUI要素の変化を詳細に説明している。上記で説明されたように、圧力リンク中、押圧されたターゲットUI要素は、押圧されていない別のUI要素に影響を及ぼし得る。具体的には、圧力リンク中、ターゲットUI要素のアニメーション効果をトリガすることは、1つ以上の他のUI要素、またはさらには、他のすべてのUI要素がターゲットUI要素の影響を受けるようにUI全体の他のUI要素のアニメーション効果を一緒にトリガし得る。例えば、圧力リンク中、ターゲットUI要素がある期間押圧されたとき、アニメーション効果を伴って変化されるターゲットUI要素に加えて、別のUI要素も、リンクされた押圧を視覚的に提示するように、対応するアニメーション効果を伴って変化され得る。したがって、以下は、図40～図46を参照して、圧力リンクを詳細に説明する。
図40は、本開示の一実施形態によるグラフィカルインターフェース表示方法4000のフローチャートである。方法4000は、図1を参照して説明された電子デバイス100または図2を参照して説明された電子デバイス200によって実行され得ることを理解されたい。方法4000は、ここでは、図3AのUI300Aを参照して説明される。しかしながら、UI300Aは例にすぎず、方法2500は、UI300Bおよび300Cを含むが、これらに限定されない任意の適切なインターフェースに適用可能であることを理解されたい。
ブロック4010において、M個のユーザインターフェースUI要素が電子デバイスの画面上に表示される。Mは1より大きい正の整数である。例えば、M個のUI要素は、UI要素1～13であり得る。
ブロック4020において、M個のUI要素内の第1のUI要素に対して実行された押圧が検出される。例えば、第1のUI要素はUI要素5であってもよい。上記で説明されたように、第1のUI要素に対して実行された押圧は、押圧効果を提示するように、第1のUI要素を回転させる。
ブロック4030において、第1のUI要素で検出された押圧に応答して、画面上のN個のUI要素の各々が、対応するアニメーション効果を伴って変化される。Nは、1～M－1の範囲の正の整数である。したがって、リンクされた押圧が視覚的に示される。
一部の実施形態では、N個のUI要素が押圧された位置に対して変化される方向は、N個のUI要素の各々が押圧された位置を指し示す方向であり得る。一部の実施形態では、この方向は、N個のUI要素の各々の対応する基準点から押圧されたUI要素の基準点への方向であり得る。この場合、押圧された位置は、N個の要素の変化のための変化基準点である。言い換えれば、押圧された位置は、押圧の中心として視覚的に示される。図41は、本開示の一実施形態によるN個のUI要素の圧力リンク4000の例の概略図である。図41に示されているように、UI要素5が押圧され、これにより、UI要素5は、押圧効果を提示するように回転する。加えて、押圧に応答して、画面上の他のUI要素（例えば、UI要素1～4および6～13）もまた、押圧効果を提示するように、異なる振幅で、押圧された位置に対して回転する。したがって、リンクされた押圧が視覚的に提示される。
任意選択で、押圧された位置に対するN個のUI要素の変化方向は、押圧されたUI要素の変化方向と同じであってもよい。図42は、本開示の一実施形態によるN個のUI要素の圧力リンク4000の別の例の概略図である。図42に示されているように、UI要素5が押圧され、これにより、UI要素5は、押圧効果を提示するように回転する。加えて、押圧に応答して、画面上の他のUI要素（例えば、UI要素1～4および6～13）もまた、押圧効果を提示するように、異なる振幅でUI要素5と同じ方向に回転する。この場合、N個の要素の変化基準点は、N個の要素の基準点である。したがって、リンクされた押圧が視覚的に提示される。
明確にするために、図41および図42は、UI300A上のUI要素1～13の圧力リンクのみを示す。圧力リンクは、任意のUI上の任意の少なくとも2つのUI要素間、例えばUI300A～300C上の任意の少なくとも2つのUI要素間で行われ得ることを理解されたい。
一部の実施形態では、画面上のすべてのUI要素で圧力リンクが使用され得る。この場合、第1のUI要素以外の、M個のUI要素内のM－1個のUI要素がN個のUI要素であると決定され得る。任意選択で、圧力リンクは、画面上の一部のUI要素にのみ適用されてもよい。この場合、第1のUI要素の影響領域は、第1のUI要素のサイズに基づいて決定されてもよく、M個のUI要素内の、影響領域内にあるUI要素が、N個のUI要素として決定される。例えば、第1のUI要素のより大きいサイズは、第1のUI要素のより大きい影響領域を示し得る。任意選択で、影響領域はまた、サイズ縮小と共に狭くされてもよい。これは本開示のここでは限定されない。例えば、影響領域は、第1のUI要素の基準点を中心として使用し、かつ事前決定された半径を有する円であってもよい。影響領域は、任意の形状を有する任意の適切な領域であってもよいことを理解されたい。例えば、影響領域は、事前決定されたサイズを有する矩形または菱形などである。影響領域は、電子デバイスおよびユーザによって構成可能であり得る。これは本開示のここでは限定されない。
加えて、一部の実施形態では、影響領域と交差するUI要素は、影響領域内にあると考えられ得る。任意選択で、影響領域が事前決定された半径を有する円であるときに、UI要素と第1のUI要素との間の距離が影響領域の事前決定された半径よりも短い場合、UI要素は影響領域内にあると考えられ得る。
図43は、本開示の一実施形態によるUI要素の例示的な影響領域4300の概略図である。図43に示されているように、UI要素3、4、7、および8はUI要素5の影響領域4310内にあるため、UI要素3、4、7、および8は対応してUI要素5と共に変化される。加えて、UI要素1、2、6、および9～13はUI要素5の影響領域4310内にないため、UI要素1、6、および9～13は対応してUI要素5と共に変化されない。
再び図40を参照されたい。N個のUI要素が対応するアニメーション効果を伴って変化されることを可能にするために、第1のUI要素とN個のUI要素の各々との間の距離が決定され得る。上記で説明されたように、一部の実施形態では、距離は、距離が位置する範囲に基づいて複数の距離レベルに分類され得る。例えば、操作されたUI要素の距離レベルは0であってもよく、リンクされたUI要素の距離レベルは、リンクされたUI要素と操作されたUI要素との間の距離に基づいて1、2、3、…であってもよい。同じ距離レベルにあるUI要素は、操作されたUI要素までの距離が同じであると考えられてもよい。したがって、距離レベルを使用することによってUI要素間のリンクは簡略化され得、これにより、同じ距離レベルにあるUI要素は同じ方法でリンクされ、それによって、リンクの一貫性および調整を改善する。しかしながら、UI要素がより正確にリンクされるように、リンク中に距離が代わりに使用されてもよいことを理解されたい。以下では、距離レベルは、交換可能に距離と呼ばれ得る。
前述では、N個のUI要素内の第1のUI要素と第2のUI要素との間の距離を決定する方法が、図10～図14Bを参照して説明されている。したがって、その説明はここでは省略される。
再び図40を参照されたい。第1のUI要素と第2のUI要素との間の距離が決定された後、第2のUI要素を変化させるアニメーション効果は、距離に基づいて決定され得る。任意選択で、第1のUI要素と第2のUI要素との間の距離がより長い場合、遠くのUI要素に対する押圧のより小さい影響を視覚的に示すように、第2のUI要素を変化させる振幅はより小さくてもよい。任意選択で、第1のUI要素と第2のUI要素との間の距離がより長い場合、遠くのUI要素に対する押圧のより大きい影響を視覚的に示すように、第2のUI要素を変化させる振幅はまたより大きくてもよい。
一部の実施形態では、第2のUI要素を変化させる振幅を決定するために、押圧に応答して第1のUI要素を変化させる第1の振幅が決定され得る。一部の実施形態では、第1のUI要素を変化させる第1の振幅は、第1のUI要素に関連する様々な要因に基づいて決定され得る。これらの要因は、第1のUI要素のサイズ、第1のUI要素の第1の基準点の位置、第1のUI要素を変化させる振幅範囲、押圧された位置、押圧持続時間、および事前決定された押圧力を含み得るが、これらに限定されない。前述は、UI要素を変化させる振幅に対するこれらの要因の影響を詳細に説明している。したがって、その説明はここでは省略される。
次に、押圧に応答して第2のUI要素を変化させる振幅が、第1の振幅および第1のUI要素と第2のUI要素との間の距離に基づいて決定され得る。上記で詳細に説明された伝達方法は、第2のUI要素を変化させる振幅を取得するために、第1のUI要素を変化させる振幅を第2のUI要素に伝達する方法を実施するために使用され得る。違いは、圧力リンク中、伝達式（7）および（8）のxnが、対応して変化されるUI要素（例えば、第2のUI要素）を変化させる振幅を表し、伝達式（7）および（8）のxが、押圧されたUI要素（例えば、第1のUI要素）を変化させる振幅を表すことにある。したがって、その説明はここでは省略される。
このようにして、第2のUI要素を変化させる振幅は、第1のUI要素を変化させる振幅と、第2のUI要素と第1のUI要素との間の距離とによって決定されるため、直感的で自然でユーザの使用習慣に従う圧力リンクが実施され得る。
加えて、一部の実施形態では、第2のUI要素のサイズも、第2のUI要素を変化させるアニメーション効果に影響を及ぼし得る。この場合、第2のUI要素を変化させるアニメーション効果を決定するために、第2のUI要素のサイズも考慮され得る。例えば、第2のUI要素がより大きい場合、第2のUI要素を変化させる振幅はより大きくてもよい。任意選択で、第2のUI要素がより大きい場合、第2のUI要素を変化させる振幅はより小さくてもよい。したがって、一部の実施形態では、押圧に応答して第2のUI要素を変化させる振幅は、第1の振幅、距離、および第2のUI要素のサイズに基づいて決定され得る。
加えて、一部の実施形態では、第1のUI要素のサイズも、第2のUI要素を変化させるアニメーション効果に影響を及ぼし得る。この場合、第2のUI要素を変化させるアニメーション効果を決定するために、第1のUI要素のサイズも考慮され得る。例えば、第1のUI要素のより大きいサイズは、第1のUI要素によって生じ得るより大きいリンクの影響を示す。したがって、第2のUI要素を変化させる振幅は、第1のUI要素のサイズに正比例し得る。したがって、一部の実施形態では、第2のUI要素の振幅は、第1の振幅、距離、および第1のUI要素のサイズに基づいて決定され得る。
さらに、上記で説明されたように、第1のUI要素のサイズと第2のUI要素のサイズとの両方が、第2のUI要素を変化させるアニメーション効果に影響を及ぼし得る。したがって、一部の実施形態では、第2のUI要素を変化させる振幅は、第1の振幅、距離、第1のUI要素のサイズ、および第2のUI要素のサイズに基づいて決定され得る。
再び図40を参照されたい。第2のUI要素の変化のアニメーション効果が決定された後、第2のUI要素は、第2のUI要素が第1のUI要素に対して実行された押圧によって変化されることを視覚的に示すように、アニメーション効果を伴って変化されることが可能にされ得る。N個のUI要素は、画面全体または画面の一部に対する押圧を視覚的に示し、それによって、押圧リンクを提示するように、それぞれのアニメーション効果を伴って変化されることが可能にされ得る。
図44は、本開示の一実施形態による、距離に基づくUI要素の例示的な変化4400の概略図である。図4400に示されているように、その距離が0であるUI要素（例えば、UI要素5）を変化させる振幅は、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）を変化させる振幅よりも大きく、その距離が1であるUI要素を変化させる振幅は、その距離が2であるUI要素（例えば、UI要素2、6、および9）を変化させる振幅よりも大きく、その距離が2であるUI要素を変化させる振幅は、その距離が3であるUI要素（例えば、UI要素1および10～13）を変化させる振幅よりも大きい。
加えて、一部の実施形態では、アニメーション効果の伝達をより良好に提示し、ユーザ体験を改善するために、第1のUI要素と第2のUI要素とは同時に変化されない。例えば、第1のUI要素は、押圧が行われたときに変化され始め得、第2のUI要素は、押圧がある期間行われた後に変化され始め得る。したがって、一部の実施形態では、遅延時間は、第1のUI要素と第2のUI要素との間の距離に基づいて決定され得、第2のUI要素は、遅延時間後の押圧に応答して変化されることが可能にされ得る。さらに、一部の実施形態では、遅延係数が決定され得、遅延時間は、距離および遅延係数に基づいて決定される。例えば、遅延時間は、遅延係数で割られた距離の商であり得る。遅延係数は、電子デバイスおよびユーザによって構成可能であり得る。
図45は、本開示の一実施形態による例示的な遅延時間4500の概略図である。図45に示されているように、その距離が0である第1のUI要素（例えば、UI要素5）は、押圧が行われた時間T81に変化され始め、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）は、その後の時間T82に変化され始め、その距離が2であるUI要素（例えば、UI要素2、4、6、および9）は、それより後の時間T83に変化され始め、その距離が3であるUI要素（例えば、UI要素1および10～13）は、最も遅い時間T84に変化され始める。
加えて、一部の実施形態では、UI要素の変化速度が、振幅が時間と共に変化する事前定義された曲線によって制御され得る。例えば、事前定義された曲線は、ベッセル曲線または弾性力曲線であり得る。弾性力曲線の場合、変化速度は、ばねの減衰係数および剛性係数を制御することによって制御され得る。ベッセル曲線の場合、変化速度は、ベッセル曲線の少なくとも1つの制御点のうちの少なくとも1つの座標を制御することによって制御され得る。
加えて、一部の実施形態では、変化されたUI要素は、押圧が終了した後（例えば、ユーザが画面から指を離した後）に復元され得る。具体的には、押圧されたUI要素と、対応して変化されたN個のUI要素との両方が復元され得る。したがって、一部の実施形態では、変化された第2のUI要素は、変化前の第2のUI要素に復元され得る。復元プロセスは、変化の逆のプロセスであり得、したがって、その詳細な説明はここでは省略される。
図46は、本開示の一実施形態によるUI要素の復元4600の例の概略図である。図46に示されているように、変化されたすべてのUI要素（例えば、UI要素1～13）は、変化前の初期形態に復元される。
一部の実施形態では、変化の復元は反発効果を有し得る。例えば、ユーザが手を解放した後、UI要素の変化は、右側が傾けられている一方で左側が押圧されている状態から、右側が押圧されている一方で左側が傾けられている状態へ、次に初期形状へのものであり得る。言い換えれば、ユーザが手を解放した後、UI要素がフリップされ、次に復元されるという効果が視覚的に提示される。
図46Bは、本開示の一実施形態による、反発効果を伴ってUI要素を復元する例示的な角度－時間曲線4600Bの概略図である。
図46Bに示されているように、T91において、UI要素5が押圧されて変化される。例えば、UI要素5の左側が押圧され、UI要素5は、UI要素5の基準点を中心に回転する。具体的には、UI要素5の左側が押圧され、同時にUI要素5の右側が傾けられる。加えて、別のUI要素（例えば、UI要素1～4および6～13）も対応して変化される。
T92において、ユーザは手を解放する。この場合、UI要素5の回転角度は－60°である。加えて、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）は対応して回転されるが、UI要素の回転振幅はUI要素5の回転振幅よりも小さい。加えて、その距離が2であるUI要素（例えば、UI要素2、6、および9）も対応して回転されるが、UI要素の回転振幅は、その距離が1であるUI要素の回転振幅よりも小さい。さらに、その距離が3であるUI要素（例えば、UI要素1および10～13）も対応して回転されるが、UI要素の回転振幅は、その距離が2であるUI要素の回転振幅よりも小さい。
T92時およびT93時に、UI要素は回転に関して反発し始める。
T93において、UI要素5は、45°の回転角度で反発する。加えて、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）は対応して回転に関して反発するが、UI要素の回転反発の振幅はUI要素5の回転反発の振幅よりも小さい。加えて、その距離が2であるUI要素（例えば、UI要素2、6、および9）も対応して回転に関して反発するが、UI要素の回転反発の振幅は、その距離が1であるUI要素の回転反発の振幅よりも小さい。さらに、その距離が3であるUI要素（例えば、UI要素1および10～13）も対応して回転に関して反発するが、UI要素の回転反発の振幅は、その距離が2であるUI要素の回転反発の振幅よりも小さい。
T94において、すべてのUI要素が初期形状に復元される。言い換えれば、すべてのUI要素の回転角度が0°に復元される。
図46Bの回転角度は例にすぎず、UI要素は任意の適切なパターンで変化され得ることを理解されたい。さらに、図46Bでは、1つの反発のみの反発効果が示されているが、複数の反発の反発効果が実施されてもよい。反発の数は、任意の適切な反発の数であり得る。これは本開示のここでは限定されない。一部の実施形態では、複数の反発の反発振幅は、時間と共に減少され得る。
図46Cは、本開示の一実施形態による、減少される反発振幅を有する複数の反発の反発効果を伴ってUI要素を復元する例示的な角度－時間曲線4600Cの概略図である。
図46Cに示されているように、UI要素は、複数の反発後に初期形状に復元される。その距離が0であるUI要素（例えば、UI要素5）の反発の回転振幅（例えば、回転角度）は、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）の反発の回転振幅よりも大きい。その距離が1であるUI要素の反発の回転振幅は、その距離が2であるUI要素（例えば、UI要素2、6、および9）の反発の回転振幅よりも大きい。その距離が2であるUI要素の反発の回転振幅は、その距離が3であるUI要素（例えば、UI要素1および10～13）の反発の回転振幅よりも大きい。
さらに、一部の実施形態では、反発効果はまた、事前定義された曲線（例えば、弾性力曲線またはベッセル曲線など）によって制御され得る。例えば、これらのUI要素は、事前定義された曲線によって制御されるアニメーション効果を伴って変化に関して反発し得る。
以下は、本開示の一実施形態によるリンクアニメーションの実施原理およびシステムアーキテクチャを説明する。
図47は、本開示の一実施形態によるアニメーション実施原理の図4700である。上記で説明されたように、アニメーションは本質的に、リフレッシュレートに基づくUIまたはUI要素のリアルタイム表示である。人間の視覚の残像の原理により、ユーザは画像が動いていると感じる。図47に示されているように、アニメーションは、アニメーション持続時間後にアニメーションの初期状態から最終状態に変化する。この変換プロセスでは、アニメーションは、アニメーションタイプおよびアニメーション変換形式に基づいて制御され得る。例えば、アニメーションタイプは、変位アニメーション、回転アニメーション、スケーリングアニメーション、および透過アニメーションなどを含み得る。アニメーション変換形式は、補間器および推定器などのコントローラによって制御され得る。このようなコントローラは、アニメーション持続時間中にアニメーション変換速度を制御するように構成され得る。
具体的には、補間器は、アニメーションが以下のレート、すなわち、一定速度、加速、減速、および放物線レートのうちの1つ以上で変化されることができるように、アニメーション変化レートを制御するために、初期状態から最終状態へのアニメーション属性値の遷移に関して変化論理を設定するように構成される。
一部の実施形態では、電子デバイス100は、システム補間器またはカスタマイズされた補間器（例えば、弾性補間器または摩擦補間器）を使用してアニメーション属性値の変化論理を設定し得る。アニメーションが動作しているときに、電子デバイス100が、変化論理に基づいて、アニメーション属性値が変化されたと決定した場合、電子デバイス100は、アニメーション属性値に基づいてフレーム画像を描画し、ビューをリフレッシュする。
一部の実施形態では、補間器の変化論理に基づいて、アニメーション属性値が変化されたと決定したとき、電子デバイス100は、アニメーション属性値に基づいて、ビューをリフレッシュするためにinvalidate（）関数を呼び出す、すなわち、ビューを再描画してビューを表示するためにonDraw（）関数を呼び出す。
一部の実施形態では、電子デバイス100は弾性補間器をカスタマイズする。例えば、弾性補間器の関数におけるパラメータは、剛性係数（stiffness）および減衰係数（damping）を少なくとも含む。例えば、弾性補間器の関数コードは、以下のうちの1つ、すなわち、「SpringInterpolator（float stiffness，float damping）」、「SpringInterpolator（float stiffness，float damping，float endPos）」、「SpringInterpolator（float stiffness，float damping，float endPos，float velocity）」、および「SpringInterpolator（float stiffness，float damping，float endPos，float velocity，float valueThreshold）」のうちの1つとして表現され得る。
endPosパラメータは、相対変位、すなわち、ばねの初期位置と静止位置との差を表す。一部の実施形態では、endPosは、UI要素の相対変位を表し得る。
velocityパラメータは、初期速度を表す。一部の実施形態では、velocityは、UI要素の初期速度を表し得る。
valueThresholdパラメータは、アニメーションが停止したと決定するための閾値を表す。2つの隣接するフレーム間の変位（または別の属性）の差が閾値未満であるとき、アニメーションは動作を停止する。閾値がより大きいとき、アニメーションはより停止しやすくなり、動作時間がより短くなる。逆に、閾値がより小さいとき、アニメーションの動作時間がより長くなる。閾値の値は、特定のアニメーション属性に基づいて設定され得る。一部の実施形態では、弾性補間器のFloatValueHoldパラメータはデフォルトで1／1000であり、別の構築方法では閾値の値は1である。一部の実施形態では、閾値がカスタマイズされるとき、表1に示されている推奨値がアニメーション属性に基づいて使用され得る。
加えて、閾値は直接的に、DynamicAnimationクラスによって提供される以下の定数、すなわち、MIN＿VISIBLE＿CHANGE＿PIXELS、IN＿VISIBLE＿CHANGE＿ROTATION＿DEGREES、MIN＿VISIBLE＿CHANGE＿ALPHA、およびMIN＿VISIBLE＿CHANGE＿SCALEであってもよい。
例えば、カスタマイズされた弾性補間器のアニメーションクラスの特定のコードは、以下のように、すなわち、
「PhysicalInterpolatorBase interpolator＝new SpringInterpolator（400F，40F，200F，2600F，1F）；
ObjectAnimator animator＝ObjectAnimator．ofFloat（listView，“translationY”，0，346）；
animator．setDuration（interpolator．getDuration（））；／／アニメーション持続時間を取得する
animator．setInterpolator（interpolator）；／／カスタマイズされた補間器をアニメーションクラスのために設定する
animator．start（）；／／アニメーションを動作させる」
のように表現され得る。
一部の実施形態では、電子デバイス100は、摩擦補間器をカスタマイズする。例えば、摩擦補間器の関数コードは、「FlingInterpolator（float initVelocity，float friction）」のように表現され得る。initVelocityは初期速度を表し、frictionは摩擦を表す。
例えば、摩擦補間器を使用するアニメーションクラスの特定のコードは、以下のように、すなわち、
「PhysicalInterpolatorBase interpolator＝new FlingInterpolator（600F，0．5F）；
ObjectAnimator animator＝ObjectAnimator．ofFloat（listView，“translationY”，0，interpolator．getEndOffset（））；
animator．setDuration（interpolator．getDuration（））；／／アニメーション持続時間を取得する
animator．setInterpolator（interpolator）；／／カスタマイズされた補間器をアニメーションクラスのために設定する
animator．start（）；」／／アニメーションを動作させる
のように表現され得る。
一部の実施形態では、電子デバイス100は、アニメーション持続時間（Duration）および開始位置をそれ自体で設定してもよいし、またはエンジンモデルを呼び出してアニメーション持続時間（Duration）および終了位置を取得し、次にアニメーションクラス（Animatorクラス）のアニメーション持続時間および終了位置を設定してもよい。
例えば、アニメーション持続時間を取得するために電子デバイス100によってエンジンモデルを呼び出すためのコードは、「com．xxx．dynamicanimation．interpolator．PhysicalInterpolatorBase＃getDuration」のように表現され得る。
例えば、ばねの終了位置を取得するためにエンジンモデルを呼び出するためのコードは、「com．xxx．dynamicanimation．interpolator．PhysicalInterpolatorBase＃getEndOffset」のように表現され得る。
例えば、valueThresholdパラメータを設定するためのコードは、「com．xxx．dynamicanimation．interpolator．PhysicalInterpolatorBase＃setValueThreshold」と表現され得る。
一部の実施形態では、弾性エンジンを使用するアニメーションクラスのコードは、以下のコード、すなわち、
「SpringAnimation（K object，FloatPropertyCompat＜K＞property，float stiffness，float damping，float startValue，float endValue，float velocity）」、および「SpringAnimation（K object，FloatPropertyCompat＜K＞property，float stiffness，float damping，float endValue，float velocity）」
のうちの1つとして表現され得る。
objectパラメータは、アニメーションオブジェクトを表し、Propertyパラメータは、アニメーションクラスまたは補間器が適用される属性オブジェクトを表す。表1を参照されたい。パラメータは、valueThresholdを間接的に設定するために使用され得る。パラメータは、補間器バージョンでは任意選択であり、別の方法でvalueThresholdが設定されるとき、パラメータは設定されなくてもよく、すなわち、propertyパラメータなしの構築方法が直接使用される。パラメータは、アニメーションクラスバージョンでは必須のパラメータである。DynamicAnimationクラスは、直接使用されることができる以下の定数を提供する。
「TRANSLATION＿X、TRANSLATION＿Y、TRANSLATION＿Z、SCALE＿X、SCALE＿Y、ROTATION、ROTATION＿X、ROTATION＿Y、X、Y、Z、ALPHA、SCROLL＿X、およびSCROLL＿Y」。電子デバイス100は、ViewPropertyインターフェースをカスタマイズし得る。
例えば、ばねエンジンを使用するアニメーションクラスの特定のコードは、以下のように、すなわち、
「SpringAnimation animation＝SpringAnimation（listView，DynamicAnimation．TRANSLATION＿Y，400F，40F，0，1000F）；
animation．start（）；」
のように表現され得る。
一部の実施形態では、摩擦エンジンを使用するアニメーションクラスのコードは、以下のように、すなわち、
「FlingAnimation（K object，FloatPropertyCompat＜K＞property，float initVelocity，float friction）」
のように表現され得る。
例えば、摩擦を使用するアニメーションクラスの特定のコードは、以下のように、すなわち、
「FlingAnimation animation＝FlingAnimation（listView，DynamicAnimation．TRANSLATION＿Y，2000F，0．5F）；
animation．start（）；」
のように表現され得る。
図48は、本開示の一実施形態による、「リンク」アニメーション効果の能力または機能を実施するためのシステムフレームワーク4800の概略図である。UIフレームワークのアニメーション効果能力は、主流の4層論理処理を含む、Android（登録商標）またはHarmonyOS（登録商標）の全体的なアーキテクチャに基づいて実施される。データ処理プロセスは、下から上までユーザに提示される。ユーザは、アプリケーション層でアニメーション効果機能を主に使用および体験する。本開示のこの実施形態では、デスクトップとUIフレームワークとの間の能力対話関係が図48に示されている。具体的には、図48に示されているように、システムフレームワーク4800は、アプリケーション層4810、アプリケーションフレームワーク層4830、ハードウェア抽象化層4850、およびカーネル層4870を含み得る。アプリケーション層4810は、デスクトップ4812を含み得る。UI要素操作4814は、デスクトップ4812上で実施され得る。UI要素操作4814は、ドラッグ操作、押圧操作、および深度押圧操作などを含み得る。アプリケーションフレームワーク層4830は、システムサービス4832および拡張サービス4834を含み得る。システムサービス4832は、様々なシステムサービス、例えば、Service4833を含み得る。拡張サービス4834は、SDK4835などの様々な拡張サービスを含み得る。ハードウェア抽象化層（HAL）4850は、HAL3．0 4852およびアルゴリズムAlgo4854を含み得る。カーネル層4870は、ドライバ4872および物理デバイス4874を含み得る。物理デバイス4874は、元のパラメータフローをドライバ4872に提供し得、ドライバ4872は、機能処理パラメータフローを物理デバイス4874に提供し得る。図48にさらに示されているように、リンクアニメーション効果4825を実施するためのUIフレームワーク4820は、アプリケーション層4810とアプリケーションフレームワーク層4830との間で実施され得る。UIフレームワーク4820は、プラットフォーム能力4822およびシステム能力4824を含み得、両方ともリンクアニメーション効果4825を提供するために使用され得る。リンクアニメーション効果4825は、アプリケーション層4810においてUI要素操作4814に対して提供され得る。
図49は、本開示の一実施形態による、「リンク」アニメーション効果の能力または機能に関係するアプリケーション側とUIフレームワーク側との間の関係の概略図である。図49に示されているように、アプリケーション側4910は、デスクトップ4915を含み得、ドラッグ、押圧、および深度押圧などの操作が、デスクトップ4915上のUI要素に対して実施され得る。UIフレームワーク側4950は、UIフレームワークアニメーション効果4952を含み得、UIフレームワークアニメーション効果4952は、リンクアニメーション効果能力4954を実施し得、リンクアニメーション効果能力4954は、AAR4951、JAR4953、およびシステムインターフェース4955などの方法を使用して実施され得る。アプリケーション側4910は、統合4930および呼出し4940によって、UIフレームワーク側4950によって提供される「リンク」アニメーション効果能力または機能を呼び出し得る。アプリケーション側4910とUIフレームワーク側4950との間の対話によって、新しいリンク「アニメーション効果」が、元の独立したUI要素（アイコン、カード、およびコントロールなど）が関連付けられるように、本開示のこの実施形態において実施される。
図50は、本開示の一実施形態による、「リンク」アニメーション効果の能力または機能を実施する3つの方法の特定の説明の概略図である。図50に示されているように、AAR4951と電子デバイス100のシステムとの間の関係5001は以下の通りであり、AAR4951は、統合のためにシステム内のアプリケーション側に提供される、バイナリ方法で能力に基づいてパッケージ化された能力である。AAR4951のバージョンスケジュールは、システムに従わずに自由に制御され得る。JAR4953と電子デバイス100のシステムとの間の関係5003は以下の通りであり、JAR4953は、システム内のすべてのコンポーネントに提供される、バイナリ方法で能力に基づいてパッケージ化された能力である。JAR4953のバージョンスケジュールは、システムに従わずに自由に制御され得る。システムインターフェース4955と電子デバイス100のシステムとの間の関係5005は以下の通りであり、システムインターフェース4955は、システムバージョンのフレームワーク層のインターフェースであり、システム内のすべてのコンポーネントに提供される能力であり、システムと共にアップグレードされる。本開示は、リンクアニメーション効果能力の実施に焦点を当てている。統合はAARおよびJARの方法によって実施され、呼出しはシステムインターフェースの方法によって実施される。シナリオは限定されないが、能力表示方法は異なる。言い換えれば、本開示において上記で説明された方法の機能は、電子デバイス100のAARファイル、JARファイル、および／またはシステムインターフェースを使用して実施され得る。このようにして、「リンク」アニメーション効果の能力または機能は、簡単かつ便利に実施され、電子デバイス、例えばデスクトップのアプリケーションに提供され得る。
100 電子デバイス、110 プロセッサ、120 外部メモリインターフェース、121 内部メモリ、130 USBインターフェース、140 充電管理モジュール、141 電力管理モジュール、142 バッテリ、150 移動通信モジュール、160 ワイヤレス通信モジュール、170 オーディオモジュール、170A スピーカ、170B レシーバ、170C マイクロフォン、170D ヘッドセットジャック、180 センサモジュール、180A 圧力センサ、180B ジャイロセンサ、180C 気圧センサ、180D 磁気センサ、180E 加速度センサ、180F 距離センサ、180G 光学式近接センサ、180H 指紋センサ、180J 温度センサ、180K タッチセンサ、180L 周囲光センサ、180M 骨伝導センサ、190 ボタン、191 モータ、192 インジケータ、193 カメラ、194 ディスプレイ、195 SIMカードインターフェース、200 電子デバイス、210 処理ユニット、220 メモリ、225 コンピュータプログラム製品、230 記憶デバイス、240 通信ユニット、250 入力デバイス、260 出力デバイス、300A UI、300B UI、300C UI、400 ドラッグリンク、500A 速度－時間曲線、500B 変位－時間曲線、600 例、610 画面、620 元の位置、630 事前決定された位置、640 任意の位置、700A 曲線、700B 曲線、700C 曲線、910 影響領域、1000 例、1100A 例、1110A 円、1111A 円、1113A 円、1114A 円、1115A 円、1116A 円、1117A 円、1118A 円、1119A 円、1120A 円、1121A 円、1122A 円、1123A 円、1124A 円、1125A 円、1126A 円、1127A 円、1128A 円、1129A 円、1130A 円、1100B 例、1110B 矩形、1120B 矩形、1100C 例、1110C 矩形、1111C 矩形、1112C 矩形、1113C 矩形、1114C 矩形、1115C 矩形、1116C 矩形、1117C 矩形、1118C 矩形、1119C 矩形、1120C 矩形、1121C 矩形、1122C 矩形、1123C 矩形、1124C 矩形、1125C 矩形、1126C 矩形、1127C 矩形、1128C 矩形、1129C 矩形、1130C 矩形、1131C 矩形、1132C 矩形、1133C 矩形、1134C 矩形、1135C 矩形、1136C 矩形、1137C 矩形、1138C 矩形、1139C 矩形、1140C 矩形、1200 例、1300 例、1400A 例、1410A 操作方向、1400B 例、1420B 操作方向、1430B 操作方向、1500 遅延時間、1600A シナリオ、1600B 変位－時間曲線、1700A シナリオ、1700B 変位－時間曲線、1800A シナリオ、1800B 変位－時間曲線、1900A シナリオ、1900B 変位－時間曲線、2000 変化、2100 変化、2200 変化、2300 変化、2400 変化、2500 グラフィカルインターフェース表示方法、2600 深度リンク、2700 影響領域、2710 影響領域、2800 スケーリング、2900 遅延時間、3000 スケーリング、3100 変位、3200A 復元、3200B 復元、3300A サイズ－時間曲線、3300B 変位－時間曲線、3300C サイズ－時間曲線、3300D 変位－時間曲線、3400 変化、3410 初期形状、3420 変化された形状、3430 変化された形状、3500 ばね、3600 変化、3610 初期UI要素、3620 押し下げられたUI要素、3630 その色がより深いUI要素、3700 変化、3800 変化、3900 変化、4100 圧力リンク、4200 圧力リンク、4300 影響領域、4310 影響領域、4400 変化、4500 遅延時間、4600A 復元、4600B 角度－時間曲線、4600C 角度－時間曲線、4700 図、4800 システムフレームワーク、4810 アプリケーション層、4812 デスクトップ、4814 UI要素操作、4820 UIフレームワーク、4822 プラットフォーム能力、4824 システム能力、4825 リンクアニメーション効果、4830 アプリケーションフレームワーク層、4832 システムサービス、4833 Service、4834 拡張サービス、4835 SDK、4850 ハードウェア抽象化層、4852 HAL3．0、4854 アルゴリズムAlgo、4870 カーネル層、4872 ドライバ、4874 物理デバイス、4910 アプリケーション側、4915 デスクトップ、4920 UI要素操作、4930 統合、4940 呼出し、4950 UIフレームワーク側、4951 AAR、4952 UIフレームワークアニメーション効果、4953 JAR、4954 リンクアニメーション効果能力、4955 システムインターフェース
図18Aおよび図18Bに示されているように、T31において、UI要素5がドラッグされる。T31aにおいて、UI要素5は、指のドラッグに伴って移動し始める。一部の実施形態では、ドラッグが行われたときにUI要素5が移動し始める場合、T31aはT31に等しくなり得る。任意選択で、ドラッグが行われた後にUI要素5が移動し始める場合、T31aはT31より後になり得る。加えて、ドラッグされているUI要素5に加えて、他のUI要素（例えば、UI要素2～4および6～9）も対応して移動する。明確にするために、他のUI要素は、UI要素5と同時に移動を開始するように示されていることを理解されたい。しかしながら、上記で説明されたように、他のUI要素の各々は、UI要素の遅延時間後に移動し始めてもよい。
図28は、本開示の一実施形態による、距離に基づくUI要素の例示的なスケーリング2800の概略図である。図28に示されているように、その距離が0であるUI要素（例えば、UI要素5）をスケーリングする振幅は、その距離が1であるUI要素（例えば、UI要素3、4、7、および8）をスケーリングする振幅よりも大きく、その距離が1であるUI要素をスケーリングする振幅は、その距離が2であるUI要素（例えば、UI要素2、6、および9）をスケーリングする振幅よりも大きく、その距離が2であるUI要素をスケーリングする振幅は、その距離が3であるUI要素（例えば、UI要素1および10～13）をスケーリングする振幅よりも大きい。
図40は、本開示の一実施形態によるグラフィカルインターフェース表示方法4000のフローチャートである。方法4000は、図1を参照して説明された電子デバイス100または図2を参照して説明された電子デバイス200によって実行され得ることを理解されたい。方法4000は、ここでは、図3AのUI300Aを参照して説明される。しかしながら、UI300Aは例にすぎず、方法4000は、UI300Bおよび300Cを含むが、これらに限定されない任意の適切なインターフェースに適用可能であることを理解されたい。
ブロック4100において、M個のユーザインターフェースUI要素が電子デバイスの画面上に表示される。Mは1より大きい正の整数である。例えば、M個のUI要素は、UI要素1～13であり得る。
ブロック4200において、M個のUI要素内の第1のUI要素に対して実行された押圧が検出される。例えば、第1のUI要素はUI要素5であってもよい。上記で説明されたように、第1のUI要素に対して実行された押圧は、押圧効果を提示するように、第1のUI要素を回転させる。
ブロック4300において、第1のUI要素で検出された押圧に応答して、画面上のN個のUI要素の各々が、対応するアニメーション効果を伴って変化される。Nは、1～M－1の範囲の正の整数である。したがって、リンクされた押圧が視覚的に示される。
一部の実施形態では、N個のUI要素が押圧された位置に対して変化される方向は、N個のUI要素の各々が押圧された位置を指し示す方向であり得る。一部の実施形態では、この方向は、N個のUI要素の各々の対応する基準点から押圧されたUI要素の基準点への方向であり得る。この場合、押圧された位置は、N個の要素の変化のための変化基準点である。言い換えれば、押圧された位置は、押圧の中心として視覚的に示される。図41は、本開示の一実施形態によるN個のUI要素の圧力リンク4100の例の概略図である。図41に示されているように、UI要素5が押圧され、これにより、UI要素5は、押圧効果を提示するように回転する。加えて、押圧に応答して、画面上の他のUI要素（例えば、UI要素1～4および6～13）もまた、押圧効果を提示するように、異なる振幅で、押圧された位置に対して回転する。したがって、リンクされた押圧が視覚的に提示される。
任意選択で、押圧された位置に対するN個のUI要素の変化方向は、押圧されたUI要素の変化方向と同じであってもよい。図42は、本開示の一実施形態によるN個のUI要素の圧力リンク4200の別の例の概略図である。図42に示されているように、UI要素5が押圧され、これにより、UI要素5は、押圧効果を提示するように回転する。加えて、押圧に応答して、画面上の他のUI要素（例えば、UI要素1～4および6～13）もまた、押圧効果を提示するように、異なる振幅でUI要素5と同じ方向に回転する。この場合、N個の要素の変化基準点は、N個の要素の基準点である。したがって、リンクされた押圧が視覚的に提示される。

Claims (15)

  1. グラフィカルインターフェース表示方法であって、
    電子デバイスの画面上にM個のユーザインターフェースUI要素を表示するステップであって、Mは1より大きい正の整数である、ステップと、
    前記M個のUI要素内の第1のUI要素に対して実行されたドラッグを検出するステップと、
    前記ドラッグに応答して、前記画面上のN個のUI要素の各々が対応するアニメーション効果を伴って移動することを可能にするステップであって、Nは1～M－1の範囲の正の整数であり、前記N個のUI要素が対応するアニメーション効果を伴って移動することを可能にする前記ステップは、
    前記UI上の前記第1のUI要素と第2のUI要素との間の距離を決定するステップ、
    前記距離に基づいて前記第2のUI要素の移動のアニメーション効果を決定するステップ、および
    前記第2のUI要素が前記第1のUI要素と共に移動することを視覚的に示すように、前記第2のUI要素が前記アニメーション効果を伴って移動することを可能にするステップ
    を含む、ステップと
    を含む、グラフィカルインターフェース表示方法。
  2. 距離を決定する前記ステップは、
    前記第1のUI要素の第1の基準点および前記第2のUI要素の第2の基準点を決定するステップと、
    前記第1の基準点と前記第2の基準点との間の距離を前記距離として決定するステップと
    を含む、請求項1に記載の方法。
  3. 距離を決定する前記ステップは、
    前記第1のUI要素の第1の基準点を決定するステップと、
    複数の円であって、各々が前記第1の基準点を中心として使用し、かつそれぞれの半径を有する複数の円の中から、前記第2のUI要素と交差し、かつ最小半径を有するターゲット円を決定するステップと、
    前記ターゲット円の前記半径を前記距離として決定するステップと
    を含む、請求項1に記載の方法。
  4. 距離を決定する前記ステップは、
    前記第1のUI要素と前記第2のUI要素との間の水平間隔を決定するステップと、
    前記第1のUI要素と前記第2のUI要素との間の垂直間隔を決定するステップと、
    以下のいずれか1つ、すなわち、
    前記水平間隔および前記垂直間隔の少なくとも一方、または
    前記第2のUI要素の第2の基準点から前記第1のUI要素の第1の基準点への方向ならびに前記水平間隔および前記垂直間隔の少なくとも一方
    のいずれか1つに基づいて前記距離を決定するステップと
    を含む、請求項1に記載の方法。
  5. 前記第1のUI要素のサイズに基づいて前記第1のUI要素の影響領域を決定するステップと、
    前記影響領域内にある、前記M個のUI要素内のUI要素を前記N個のUI要素として決定するステップと
    をさらに含む、請求項1から4のいずれか一項に記載の方法。
  6. 前記第1のUI要素以外の、前記M個のUI要素内のM－1個のUI要素を前記N個のUI要素として決定するステップ
    をさらに含む、請求項1から4のいずれか一項に記載の方法。
  7. 前記移動のアニメーション効果を決定するステップは、
    前記ドラッグに応答して前記第1のUI要素が移動する第1のアニメーション効果を決定するステップと、
    以下のいずれか1つ、すなわち、
    前記第1のアニメーション効果および前記距離、または
    前記第1のアニメーション効果、前記距離、ならびに前記第2のUI要素のサイズおよび前記第1のUI要素のサイズの少なくとも一方
    のいずれか1つに基づいて、前記ドラッグに応答して前記第2のUI要素が移動するアニメーション効果を決定するステップと
    を含む、請求項1に記載の方法。
  8. 前記第1のUI要素の前記移動の前記第1のアニメーション効果は、変位が時間と共に変化する事前定義された曲線に基づいて決定される、請求項7に記載の方法。
  9. 前記事前定義された曲線は、ベッセル曲線または弾性力曲線である、請求項8に記載の方法。
  10. 前記第2のUI要素が前記アニメーション効果を伴って移動することを可能にする前記ステップは、
    前記ドラッグの方向を決定するステップと、
    前記第2のUI要素が前記方向に関連して前記アニメーション効果を伴って移動することを可能にするステップと
    を含む、請求項1から9のいずれか一項に記載の方法。
  11. 前記第2のUI要素が前記アニメーション効果を伴って移動することを可能にする前記ステップは、
    前記距離に基づいて遅延時間を決定するステップと、
    前記ドラッグに応答して、前記第2のUI要素が前記遅延時間後に前記アニメーション効果を伴って移動することを可能にするステップと
    を含む、請求項1から10のいずれか一項に記載の方法。
  12. 前記方法は、AARファイル、JARファイル、およびシステムインターフェースのうちの少なくとも1つを使用して実施される、請求項1から11のいずれか一項に記載の方法。
  13. プロセッサと、命令を記憶するメモリとを備える電子デバイスであって、前記命令が前記プロセッサによって実行されるとき、前記電子デバイスは、請求項1から12のいずれか一項に記載の方法を実行することが可能にされる、電子デバイス。
  14. コンピュータ可読記憶媒体であって、前記コンピュータ可読記憶媒体は命令を記憶し、前記命令が電子デバイスによって実行されるとき、前記電子デバイスは、請求項1から12のいずれか一項に記載の方法を実行することが可能にされる、コンピュータ可読記憶媒体。
  15. コンピュータプログラム製品であって、前記コンピュータプログラム製品は命令を含み、前記命令が電子デバイスによって実行されるとき、前記電子デバイスは、請求項1から12のいずれか一項に記載の方法を実行することが可能にされる、コンピュータ可読記憶媒体。
JP2023564202A 2021-04-20 2022-04-01 グラフィカルインターフェース表示方法、電子デバイス、媒体、およびプログラム製品 Pending JP2024516606A (ja)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
CN202110426820.7 2021-04-20
CN202110426820.7A CN113552987B (zh) 2021-04-20 2021-04-20 图形界面显示方法、电子设备、介质以及程序产品
PCT/CN2022/084921 WO2022222738A1 (zh) 2021-04-20 2022-04-01 图形界面显示方法、电子设备、介质以及程序产品

Publications (1)

Publication Number Publication Date
JP2024516606A true JP2024516606A (ja) 2024-04-16

Family

ID=78101748

Family Applications (1)

Application Number Title Priority Date Filing Date
JP2023564202A Pending JP2024516606A (ja) 2021-04-20 2022-04-01 グラフィカルインターフェース表示方法、電子デバイス、媒体、およびプログラム製品

Country Status (5)

Country Link
US (1) US20240201839A1 (ja)
EP (1) EP4293488A1 (ja)
JP (1) JP2024516606A (ja)
CN (2) CN113552987B (ja)
WO (1) WO2022222738A1 (ja)

Families Citing this family (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114691002B (zh) * 2020-12-14 2023-10-20 华为技术有限公司 一种页面滑动的处理方法及相关装置
CN113552987B (zh) * 2021-04-20 2022-09-16 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN113568549A (zh) * 2021-04-20 2021-10-29 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN115220621A (zh) * 2021-04-20 2022-10-21 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN114995929B (zh) * 2021-11-17 2023-04-21 荣耀终端有限公司 一种弹窗的显示方法及装置
CN116431046A (zh) * 2022-01-04 2023-07-14 华为技术有限公司 用户界面显示方法、电子设备、介质以及程序产品
CN114428923A (zh) * 2022-01-26 2022-05-03 北京有竹居网络技术有限公司 弹窗效果的呈现方法、装置、电子设备及存储介质
CN114546568A (zh) * 2022-02-25 2022-05-27 重庆紫光华山智安科技有限公司 页面元素拖放方法、装置、电子设备及存储介质
CN114911406B (zh) * 2022-06-01 2023-10-17 北京字节跳动网络技术有限公司 一种动效生成方法、装置、介质及设备
CN116048361B (zh) * 2022-06-24 2024-04-12 荣耀终端有限公司 交互方法、可读存储介质和电子设备
CN117435097A (zh) * 2022-07-12 2024-01-23 荣耀终端有限公司 一种显示方法及电子设备
CN117472485A (zh) * 2022-07-22 2024-01-30 华为技术有限公司 一种界面显示的方法以及电子设备

Family Cites Families (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7607102B2 (en) * 2002-03-14 2009-10-20 Apple Inc. Dynamically changing appearances for user interface elements during drag-and-drop operations
US7958460B2 (en) * 2007-10-30 2011-06-07 International Business Machines Corporation Method for predictive drag and drop operation to improve accessibility
CN105159574A (zh) * 2010-08-19 2015-12-16 上海博泰悦臻电子设备制造有限公司 通过电子设备屏幕的手势控制设备操作的方法和装置
US20130111382A1 (en) * 2011-11-02 2013-05-02 Microsoft Corporation Data collection interaction using customized layouts
CN103870092A (zh) * 2012-12-10 2014-06-18 联想(北京)有限公司 一种桌面图标显示方法及电子设备
CN106020621B (zh) * 2013-09-16 2019-05-31 北京奇虎科技有限公司 一种智能终端的桌面元素调整方法和装置
CN106155472A (zh) * 2015-04-28 2016-11-23 东莞酷派软件技术有限公司 一种操作应用图标的方法、装置及移动终端
CN106126036A (zh) * 2016-06-30 2016-11-16 北京奇虎科技有限公司 一种图标的批量处理方法、装置和移动终端
US20180217722A1 (en) * 2017-01-31 2018-08-02 Wipro Limited Method and System for Establishing a Relationship Between a Plurality of User Interface Elements
CN106775782A (zh) * 2017-02-17 2017-05-31 广东小天才科技有限公司 应用图标移动方法及装置
US11210116B2 (en) * 2019-07-24 2021-12-28 Adp, Llc System, method and computer program product of navigating users through a complex computing system to perform a task
CN113760427B (zh) * 2019-08-09 2022-12-16 荣耀终端有限公司 显示页面元素的方法和电子设备
CN112256165B (zh) * 2019-12-13 2022-05-10 华为技术有限公司 一种应用图标的显示方法及电子设备
CN111176504B (zh) * 2019-12-18 2021-12-24 华为技术有限公司 一种界面元素的显示方法及电子设备
CN112286477B (zh) * 2020-11-16 2023-12-08 Oppo广东移动通信有限公司 投屏显示方法及相关产品
CN113552987B (zh) * 2021-04-20 2022-09-16 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品

Also Published As

Publication number Publication date
CN115964106B (zh) 2024-02-13
EP4293488A1 (en) 2023-12-20
US20240201839A1 (en) 2024-06-20
CN113552987B (zh) 2022-09-16
WO2022222738A1 (zh) 2022-10-27
CN113552987A (zh) 2021-10-26
CN115964106A (zh) 2023-04-14

Similar Documents

Publication Publication Date Title
JP2024516606A (ja) グラフィカルインターフェース表示方法、電子デバイス、媒体、およびプログラム製品
US11762529B2 (en) Method for displaying application icon and electronic device
WO2022222830A1 (zh) 图形界面显示方法、电子设备、介质以及程序产品
JP2022531279A (ja) 親ページと子ページとの間を切り替えるための方法及び関連する機器
CN113132526B (zh) 一种页面绘制方法及相关装置
US10163245B2 (en) Multi-mode animation system
US20240094865A1 (en) Selecting items displayed by a head-worn display device
WO2019231676A1 (en) Virtual skeleton based on computing device capability profile
WO2022222931A1 (zh) 图形界面显示方法、电子设备、介质以及程序产品
US11928306B2 (en) Touchpad navigation for augmented reality display device
WO2022246418A1 (en) Touchpad navigation for augmented reality display device
WO2022222831A1 (zh) 图形界面显示方法、电子设备、介质以及程序产品
US11880542B2 (en) Touchpad input for augmented reality display device
WO2023130977A1 (zh) 用户界面显示方法、电子设备、介质以及程序产品
US20230351665A1 (en) Animation Processing Method and Related Apparatus
WO2024099206A1 (zh) 一种图形界面处理方法以及装置
EP4390668A1 (en) Method for displaying switch control, and electronic device
CN103544051A (zh) 一种操作方法及装置
WO2024087970A1 (zh) 数据处理方法和相关装置
CN117472485A (zh) 一种界面显示的方法以及电子设备

Legal Events

Date Code Title Description
A521 Request for written amendment filed

Free format text: JAPANESE INTERMEDIATE CODE: A523

Effective date: 20231130

A621 Written request for application examination

Free format text: JAPANESE INTERMEDIATE CODE: A621

Effective date: 20231130