ビュー アニメーション
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Compose を試す
Jetpack Compose は、Android に推奨される UI ツールキットです。Compose でアニメーションを使用する方法について学習します。
ビュー アニメーション システムを使用すると、ビューでトゥイーン アニメーションを実行できます。トゥイーン アニメーションは、始点、終点、サイズ、回転、その他の一般的なアニメーションの要素などの情報を使用して、アニメーションを計算します。
トゥイーン アニメーションでは、View オブジェクトのコンテンツに対して一連の簡単な変換(位置、サイズ、回転、透明度)を実行できます。そのため、TextView
オブジェクトがある場合、テキストを移動、回転、拡大、または縮小できます。背景画像がある場合は、テキストとともに背景画像も変換されます。animation package
は、トゥイーン アニメーションで使用されるすべてのクラスを提供します。
アニメーション命令のシーケンスは、XML または Android コードで定義されたトゥイーン アニメーションを定義します。レイアウトを定義する場合と同様に XML ファイルを使用することをおすすめします。これは、アニメーションをハードコードするよりも、XML ファイルの方が読みやすく、再利用しやすく、入れ替えやすいためです。下記の例では、XML を使用します(XML ではなくアプリコードでアニメーションを定義する方法について詳しくは、AnimationSet
クラスと他の Animation
サブクラスをご覧ください)。
アニメーション命令では、実施する変換、そのタイミング、適用にかかる時間を定義します。変換は、順次または同時に行えます。たとえば、TextView のコンテンツを左から右に移動させてから 180 度回転させたり、テキストの移動と回転を同時に行ったりできます。各変換は、その変換に固有のパラメータ セット(サイズ変更の開始サイズと終了サイズ、回転の開始角度と終了角度など)と、一般的なパラメータのセット(たとえば、開始時間と継続時間)を取ります。複数の変換を同時に行うには、同じ開始時間を指定します。順次行うには、開始時間と直前の変換の継続時間を足す計算をします。
アニメーション XML ファイルは、Android プロジェクトの res/anim/
ディレクトリにあります。ファイルには 1 つのルート要素が必要です。ルート要素は、単一の <alpha>
、<scale>
、<translate>
、<rotate>
、interpolator 要素、またはこれらの要素のグループを保持する <set>
要素のいずれかです(<set>
も含めることができます)。デフォルトでは、すべてのアニメーション命令が同時に適用されます。それらを順次処理するには、次の例に示すように startOffset
属性を指定する必要があります。
ApiDemos の以下のいずれかの XML を使用して、ビュー オブジェクトの拡大と回転を同時に行います。
<set android:shareInterpolator="false">
<scale
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="0.6"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="700" />
<set android:interpolator="@android:anim/decelerate_interpolator">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="400"
android:fillBefore="false" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="400" />
</set>
</set>
画面の座標(この例では使用されていません)は左上隅が(0,0)で、右下に進むにつれて増加します。
pivotX など一部の値は、オブジェクト自体または親に対して相対的に指定できます。適切な形式を使用してください(親に対して相対的に 50% の場合は「50」、自身に対して 50% の場合は「50%」)。
Interpolator
を割り当てることで、時間の経過に沿って変換を適用する方法を決定できます。Android には、さまざまな速度曲線を指定する Interpolator サブクラスがいくつか用意されています。たとえば、AccelerateInterpolator
は、開始して速度を上げるように変換に指示します。それぞれに、XML に適用できる属性値があります。
この XML をプロジェクトの res/anim/
ディレクトリに hyperspace_jump.xml
として保存すると、次のコードはこれ参照して、レイアウトから ImageView
オブジェクトに適用します。
Kotlin
AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}
Java
ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);
startAnimation()
の代わりに、Animation.setStartTime()
を使用してアニメーションの開始時間を定義してから、View.setAnimation()
を使用してアニメーションをビューに割り当てることもできます。
XML 構文、使用可能なタグと属性の詳細については、アニメーション リソースをご覧ください。
注: アニメーションの移動やサイズ変更の方法にかかわらず、アニメーションを保持する View の境界は、それに合わせて自動的に調整されることはありません。アニメーションは引き続きビューの境界を越えて描画され、クリップされません。ただし、アニメーションが親ビューの境界を越えるとクリッピングが発生します。
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-27 UTC。"],[],[],null,["# View Animation\n\nTry the Compose way \nJetpack Compose is the recommended UI toolkit for Android. Learn how to use Animations in Compose. \n[Animate properties →](/develop/ui/compose/animation/value-based) \n\nYou can use the view animation system to perform tweened animation on Views. Tween animation\ncalculates the animation with information such as the start point, end point, size, rotation, and\nother common aspects of an animation.\n\nA tween animation can perform a series of simple transformations (position, size, rotation,\nand transparency) on the contents of a View object. So, if you have a [TextView](/reference/android/widget/TextView) object, you can move, rotate, grow, or shrink the text. If it has a\nbackground image, the background image will be transformed along with the text. The [animation package](/reference/android/view/animation/package-summary) provides all the classes used in a tween animation.\n\nA sequence of animation instructions defines the tween animation, defined by either XML or\nAndroid code. As with defining a layout, an XML file is recommended because it's more readable,\nreusable, and swappable than hard-coding the animation. In the example below, we use XML. (To\nlearn more about defining an animation in your application code, instead of XML, refer to the\n[AnimationSet](/reference/android/view/animation/AnimationSet) class and other [Animation](/reference/android/view/animation/Animation) subclasses.)\n\nThe animation instructions define the transformations that you want to occur, when they will\noccur, and how long they should take to apply. Transformations can be sequential or simultaneous\n- for example, you can have the contents of a TextView move from left to right, and then rotate\n180 degrees, or you can have the text move and rotate simultaneously. Each transformation takes a\nset of parameters specific for that transformation (starting size and ending size for size\nchange, starting angle and ending angle for rotation, and so on), and also a set of common\nparameters (for instance, start time and duration). To make several transformations happen\nsimultaneously, give them the same start time; to make them sequential, calculate the start time\nplus the duration of the preceding transformation.\n\nThe animation XML file belongs in the `res/anim/` directory of your Android\nproject. The file must have a single root element: this will be either a single\n`\u003calpha\u003e`, `\u003cscale\u003e`, `\u003ctranslate\u003e`,\n`\u003crotate\u003e`, interpolator element, or `\u003cset\u003e` element that holds\ngroups of these elements (which may include another `\u003cset\u003e`). By default, all\nanimation instructions are applied simultaneously. To make them occur sequentially, you must\nspecify the `startOffset` attribute, as shown in the example below.\n\nThe following XML from one of the ApiDemos is used to stretch, then simultaneously spin and\nrotate a View object. \n\n```xml\n\u003cset android:shareInterpolator=\"false\"\u003e\n \u003cscale\n android:interpolator=\"@android:anim/accelerate_decelerate_interpolator\"\n android:fromXScale=\"1.0\"\n android:toXScale=\"1.4\"\n android:fromYScale=\"1.0\"\n android:toYScale=\"0.6\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:fillAfter=\"false\"\n android:duration=\"700\" /\u003e\n \u003cset android:interpolator=\"@android:anim/decelerate_interpolator\"\u003e\n \u003cscale\n android:fromXScale=\"1.4\"\n android:toXScale=\"0.0\"\n android:fromYScale=\"0.6\"\n android:toYScale=\"0.0\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:startOffset=\"700\"\n android:duration=\"400\"\n android:fillBefore=\"false\" /\u003e\n \u003crotate\n android:fromDegrees=\"0\"\n android:toDegrees=\"-45\"\n android:toYScale=\"0.0\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:startOffset=\"700\"\n android:duration=\"400\" /\u003e\n \u003c/set\u003e\n\u003c/set\u003e\n```\n\nScreen coordinates (not used in this example) are (0,0) at the upper left hand corner, and\nincrease as you go down and to the right.\n\nSome values, such as pivotX, can be specified relative to the object itself or relative to the\nparent. Be sure to use the proper format for what you want (\"50\" for 50% relative to the parent,\nor \"50%\" for 50% relative to itself).\n\nYou can determine how a transformation is applied over time by assigning an [Interpolator](/reference/android/view/animation/Interpolator). Android includes several Interpolator subclasses that\nspecify various speed curves: for instance, [AccelerateInterpolator](/reference/android/view/animation/AccelerateInterpolator)\ntells a transformation to start slow and speed up. Each one has an attribute value that can be\napplied in the XML.\n\nWith this XML saved as `hyperspace_jump.xml` in the `res/anim/`\ndirectory of the project, the following code will reference it and apply it to an [ImageView](/reference/android/widget/ImageView) object from the layout. \n\n### Kotlin\n\n```kotlin\nAnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation -\u003e\n findViewById\u003cImageView\u003e(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)\n}\n```\n\n### Java\n\n```java\nImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);\nAnimation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);\nspaceshipImage.startAnimation(hyperspaceJumpAnimation);\n```\n\nAs an alternative to `startAnimation()`, you can define a starting time for the\nanimation with [Animation.setStartTime()](/reference/android/view/animation/Animation#setStartTime(long)), then assign the animation to the View with [View.setAnimation()](/reference/android/view/View#setAnimation(android.view.animation.Animation)).\n\nFor more information on the XML syntax, available tags and attributes, see [Animation Resources](/guide/topics/resources/animation-resource).\n\n**Note:** Regardless of how your animation may move or resize, the\nbounds of the View that holds your animation will not automatically adjust to accommodate it.\nEven so, the animation will still be drawn beyond the bounds of its View and will not be clipped.\nHowever, clipping *will occur* if the animation exceeds the bounds of the parent View."]]