Android プロパティ アニメーション プロパティ アニメーション シリーズ 3 つ LayoutTransition (レイアウト コンテナ アニメーション)_html/css_WEB-ITnose

前回の記事では、プロパティ アニメーションに ObjectAnimator を使用する方法について学びました。理解できない場合は、Android プロパティ アニメーション プロパティ アニメーション シリーズのパート 1 である ObjectAnimator を参照してください。この記事で何か新しいことを学びましょう。プロジェクトで作業しているときに、この問題に遭遇することがあります。さまざまな条件に応じてコントロールまたはレイアウトを表示または非表示にするには、最初に考えられる方法は View.setVisibility() メソッドを呼び出すことです。表示非表示の効果は得られますが、表示非表示の処理が非常に硬くて不快だといつも感じます。この表示非表示の遷移アニメーション効果を作成する方法はありますか?答えは「はい」です。言うまでもなく、これは LayoutTransition クラスです。
上記のレンダリング

上記の効果を実現するには、レイアウト コンテナに android:animateLayoutChanges="true" 属性を追加するだけです。信じられない方は、ぜひ見てください
レイアウト ファイルは次のとおりです:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">    <LinearLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">        <Button  android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="buttonClick" android:text="添加控件" />        <Button  android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="buttonClick1" android:text="移除控件" />    </LinearLayout>    <LinearLayout  android:id="@+id/parent" android:layout_width="match_parent" android:layout_height="wrap_content" android:animateLayoutChanges="true" android:orientation="vertical"></LinearLayout></LinearLayout>

android:animateLayoutChanges="true" がレイアウト コンテナーに追加されると、デフォルトでアニメーション効果が追加されます。このプロパティは ViewGroup コントロールでのみ使用でき、コンテナ内のレイアウトが変更されたときにデフォルトのアニメーション効果があることを示します。たとえば、コントロールが追加されたとき、またはコントロールが削除されたときに、デフォルトのアニメーション効果が使用されます。 。

上記のアニメーション呼び出しコードは次のとおりです:

package com.xjp.animations;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.ViewGroup;import android.widget.Button;import android.widget.LinearLayout;/** * Description: * User: xjp * Date: 2015/5/22 * Time: 15:06 */public class LayoutAnimationActivity extends Activity {    private LinearLayout parent;    private int i = 0;    private int j = 0;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_layout_animation);        parent = (LinearLayout) findViewById(R.id.parent);    }    public void buttonClick(View view) {        addButtonView();    }    public void buttonClick1(View view) {        removeButtonView();    }    private void addButtonView() {        i++;        Button button = new Button(this);        button.setText("button" + i);        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,                ViewGroup.LayoutParams.WRAP_CONTENT);        parent.addView(button, params);    }    private void removeButtonView() {        if (i > 0)            parent.removeViewAt(0);    }}

とても簡単だと思いましたか?レイアウトに android:animateLayoutChanges="true" 属性を追加するだけでなく、非常に快適な遷移アニメーション効果を実現するためにコード内で処理を行う必要はありません。主な理由は、この属性を追加した後、コンテナ内のレイアウトが変更されると、システムがデフォルトでデフォルトのアニメーション効果をコンテナに追加するためです。上記の効果が非常に優れていると思われる場合は、システムのデフォルトのレイアウト コンテナ アニメーションを使用するだけでなく、レイアウト コンテナのアニメーションをカスタマイズすることもできます。ここで、LayoutTransition クラスの出番です。

LayoutTransition

このクラスは、レイアウト コンテナ自体のアニメーションと、現在のレイアウト コンテナにビューが追加、削除、非表示、または表示されるときのビューのアニメーションを定義するために使用されます。つまり、LinerLayout でビューが非表示になっている場合、ビューが非表示になっているために LinerLayout コンテナ全体が変化するアニメーションをカスタマイズできます。また、非表示のビューが消えるときのアニメーションもカスタマイズできます。まず新しい LayoutTransition オブジェクトを作成し、setLayoutTransition() メソッドを通じてそのオブジェクトをレイアウト コンテナー ViewGroup に設定します。コードは次のとおりです。

    private LinearLayout container;    private LayoutTransition mTransitioner; /** * 初始化容器动画 */    private void initTransition() {        mTransitioner = new LayoutTransition();        container.setLayoutTransition(mTransitioner);    }

LayoutTransition クラスは、次のレイアウト コンテナー アニメーション タイプを定義します。

APPEARING: ビューが表示されるか追加されると、ビューのアニメーションが表示されます

DISAPPEARING: ビューが消えるか非表示になると、ビューのアニメーションが消えます

CHANGE_APPEARING: ビューを追加すると、レイアウト コンテナーが変更されます、レイアウト コンテナー全体のアニメーション

CHANGE_DISAPPEARING: ビューの削除または非表示によってレイアウト コンテナーが変更される場合、レイアウト コンテナー全体のアニメーション

これらのアニメーションをカスタマイズし、setAnimator() メソッドを通じて LayoutTransition オブジェクトに設定できます。 。

LayoutTransition の使い方

APPEARING?view アニメーションが表示されます

/** * view出现时 view自身的动画效果 */        ObjectAnimator animator1 = ObjectAnimator.ofFloat(null, "rotationY", 0F, 90F, 0F);        mTransitioner.setAnimator(LayoutTransition.APPEARING, animator1);

回転属性アニメーションを定義します。ここではアニメーション オブジェクトを空白のままにしておきます。これは、システムが追加されたビューを内部でアニメーション オブジェクトとして設定するためです。次に、setAnimator() メソッドを呼び出して、アニメーションを LayoutTransition オブジェクト mTransitioner に設定します。

完全なアニメーション コードは次のとおりです。具体的な説明のための注釈が付いています

package com.xjp.animations;import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation.Keyframe;import android.animation.LayoutTransition;import android.animation.ObjectAnimator;import android.animation.PropertyValuesHolder;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.ViewGroup;import android.widget.Button;import android.widget.LinearLayout;/** * Description:布局动画Demo * User: xjp * Date: 2015/5/22 * Time: 15:06 */public class LayoutAnimationActivity extends Activity {    private int i = 0;    private LinearLayout container;    private LayoutTransition mTransitioner;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_layout_animation);        container = (LinearLayout) findViewById(R.id.parent);        initTransition();        setTransition();    }    /** * 初始化容器动画 */    private void initTransition() {        mTransitioner = new LayoutTransition();        container.setLayoutTransition(mTransitioner);    }    private void setTransition() {        /** * view出现时 view自身的动画效果 */        ObjectAnimator animator1 = ObjectAnimator.ofFloat(null, "rotationY", 90F, 0F).                setDuration(mTransitioner.getDuration(LayoutTransition.APPEARING));        mTransitioner.setAnimator(LayoutTransition.APPEARING, animator1);        /** * view 消失时，view自身的动画效果 */        ObjectAnimator animator2 = ObjectAnimator.ofFloat(null, "rotationX", 0F, 90F, 0F).                setDuration(mTransitioner.getDuration(LayoutTransition.DISAPPEARING));        mTransitioner.setAnimator(LayoutTransition.DISAPPEARING, animator2);        /** * view 动画改变时，布局中的每个子view动画的时间间隔 */        mTransitioner.setStagger(LayoutTransition.CHANGE_APPEARING, 30);        mTransitioner.setStagger(LayoutTransition.CHANGE_DISAPPEARING, 30);        /** * 为什么这里要这么写？具体我也不清楚，ViewGroup源码里面是这么写的，我只是模仿而已 * 不这么写貌似就没有动画效果了，所以你懂的！ */        PropertyValuesHolder pvhLeft =                PropertyValuesHolder.ofInt("left", 0, 1);        PropertyValuesHolder pvhTop =                PropertyValuesHolder.ofInt("top", 0, 1);        PropertyValuesHolder pvhRight =                PropertyValuesHolder.ofInt("right", 0, 1);        PropertyValuesHolder pvhBottom =                PropertyValuesHolder.ofInt("bottom", 0, 1);        /** * view出现时，导致整个布局改变的动画 */        PropertyValuesHolder animator3 = PropertyValuesHolder.ofFloat("scaleX", 1F, 2F, 1F);        final ObjectAnimator changeIn = ObjectAnimator.ofPropertyValuesHolder(                this, pvhLeft, pvhTop, pvhRight, pvhBottom, animator3).                setDuration(mTransitioner.getDuration(LayoutTransition.CHANGE_APPEARING));        changeIn.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                View view = (View) ((ObjectAnimator) animation).getTarget();                view.setScaleX(1.0f);            }        });        mTransitioner.setAnimator(LayoutTransition.CHANGE_APPEARING, changeIn);        /** * view消失，导致整个布局改变时的动画 */        Keyframe kf0 = Keyframe.ofFloat(0f, 0f);        Keyframe kf1 = Keyframe.ofFloat(.5f, 2f);        Keyframe kf2 = Keyframe.ofFloat(1f, 0f);        PropertyValuesHolder pvhRotation =                PropertyValuesHolder.ofKeyframe("scaleX", kf0, kf1, kf2);        final ObjectAnimator changeOut = ObjectAnimator.ofPropertyValuesHolder(                this, pvhLeft, pvhTop, pvhRight, pvhBottom, pvhRotation).                setDuration(mTransitioner.getDuration(LayoutTransition.CHANGE_DISAPPEARING));        changeOut.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                View view = (View) ((ObjectAnimator) animation).getTarget();                view.setScaleX(1.0f);            }        });        mTransitioner.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, changeOut);    }    public void buttonClick(View view) {        addButtonView();    }    public void buttonClick1(View view) {        removeButtonView();    }    private void addButtonView() {        i++;        Button button = new Button(this);        button.setText("button" + i);        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,                ViewGroup.LayoutParams.WRAP_CONTENT);        container.addView(button, Math.min(1, container.getChildCount()), params);    }    private void removeButtonView() {        if (i > 0)            container.removeViewAt(0);    }}

レイアウト ファイル

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">    <LinearLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">        <Button  android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="buttonClick" android:text="添加控件" />        <Button  android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="buttonClick1" android:text="移除控件" />    </LinearLayout>    <LinearLayout  android:id="@+id/parent" android:layout_width="match_parent" android:layout_height="wrap_content" android:animateLayoutChanges="true" android:orientation="vertical"></LinearLayout></LinearLayout>

最後に、レンダリングを示します:

layoutAnimation のレイアウト アニメーション

多くの場合、ListView または GridView をロードしたいことがあります。初回 場合によっては、適切なトランジション効果を実現するためにアニメーション効果が使用されることがあります。たとえば、次の効果

この効果を実現するには、レイアウトに android:layoutAnimation="@anim/layout" 属性を追加するだけです。次に、layout.xml アニメーションがどのように実装されているかを見てみましょう。 res/anim ディレクトリに新しいlayout.xmlファイルを作成します。 コードは次のとおりです:

<?xml version="1.0" encoding="utf-8"?><layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:animation="@anim/left" android:animationOrder="normal" android:delay="30%"></layoutAnimation>

android:lay サブクラスのアニメーション時間間隔 (遅延) 70% 「1.2」などの浮動小数点数にすることもできます。
android:animationOrder=”random” サブクラスのrandomの表示モードはランダムを意味します
android:animationOrderの値は
Normal 0 デフォルト
reverse 1 逆順
Random 2 Random
android:animation="@anim/left"子が表示されるときの特定のアニメーション生成を示します。
次のコードを使用して、res/anim ディレクトリに新しい left.xml ファイルを作成します。

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <translate  android:duration="500" android:fromXDelta="100%" android:fromYDelta="0" android:toXDelta="0" android:toYDelta="0" />    <alpha  android:duration="500" android:fromAlpha="0" android:toAlpha="1" /></set>

これにより、上記の ListView のアニメーション効果が実現されます。

もちろん、このアニメーション効果をコードで実現することもできます

private void initAinm() {        //通过加载XML动画设置文件来创建一个Animation对象；        Animation animation = AnimationUtils.loadAnimation(this, R.anim.left);        //得到一个LayoutAnimationController对象；        LayoutAnimationController lac = new LayoutAnimationController(animation);        //设置控件显示的顺序；        lac.setOrder(LayoutAnimationController.ORDER_REVERSE);        //设置控件显示间隔时间；        lac.setDelay(1);        //为ListView设置LayoutAnimationController属性；        listView.setLayoutAnimation(lac);    }

AnimationUtils.loadAnimation を通じて項目のアニメーションをロードして、Animation オブジェクトを取得し、次に、Animation オブジェクトを LayoutAnimationController に設定して、LayoutAnimationController オブジェクトを取得し、いくつかのプロパティを設定しますLayoutAnimationController オブジェクト。最後に、LayoutAnimationController オブジェクトを ListView に設定します。

Note

layoutAnimation アニメーションは ListView と GridView に限定されず、すべての ViewGroup で使用できます。使用方法はプロジェクトの要件によって異なります。

概要

これは、Android 属性アニメーションの基本的な紹介です。基本的なアニメーションの使用方法とサンプルも掲載されており、基本的に日常の開発ニーズに対応できます。ということは、今後トゥイーンアニメーションは使えなくなるのでしょうか？この種のアニメーションは位置だけでなく属性も変更するため、属性アニメーションの方が合理的であると思われます。