android - スムーズな展開/折りたたみアニメーションを実現する方法

Question

ここにある展開/折りたたみアニメーションコードを参照しています。

機能しますが、うまく機能しません。アニメーションは滑らかではありません。

コードでいくつかのログを記録します。

public static void expand(final View v) {
    v.measure(MeasureSpec.makeMeasureSpec(((View)v.getParent()).getWidth(), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(1024, MeasureSpec.AT_MOST));
    final int targtetHeight = v.getMeasuredHeight();

    v.getLayoutParams().height = 0;
    v.setVisibility(View.VISIBLE);
    Animation a = new Animation()
    {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            v.getLayoutParams().height = interpolatedTime == 1
                    ? LayoutParams.WRAP_CONTENT
                    : (int)(targtetHeight * interpolatedTime);
            Log.i("CHEOK", "E v.getLayoutParams().height = " + v.getLayoutParams().height);
            v.requestLayout();
        }

次のログメッセージが出力されます。

10-09 12:29:58.808: I/CHEOK(7874): E v.getLayoutParams().height = 0
10-09 12:29:58.808: I/CHEOK(7874): E v.getLayoutParams().height = 0
10-09 12:29:58.918: I/CHEOK(7874): E v.getLayoutParams().height = 11
10-09 12:29:59.015: I/CHEOK(7874): E v.getLayoutParams().height = 35
10-09 12:29:59.117: I/CHEOK(7874): E v.getLayoutParams().height = 64
10-09 12:29:59.215: I/CHEOK(7874): E v.getLayoutParams().height = 85
10-09 12:29:59.316: I/CHEOK(7874): E v.getLayoutParams().height = -2
10-09 12:29:59.406: I/CHEOK(7874): E v.getLayoutParams().height = -2

新しい高さは ~100ms ごとに発生します。つまり、アニメーションの FPS は 10fps 程度です。

理想的なアニメーションのフレームレートを知りたいです。を取り除きますv.requestLayout();。次のログを取得します。

10-09 12:32:06.547: I/CHEOK(8926): E v.getLayoutParams().height = 0
10-09 12:32:06.562: I/CHEOK(8926): E v.getLayoutParams().height = 0
10-09 12:32:06.605: I/CHEOK(8926): E v.getLayoutParams().height = 4
10-09 12:32:06.625: I/CHEOK(8926): E v.getLayoutParams().height = 7
10-09 12:32:06.644: I/CHEOK(8926): E v.getLayoutParams().height = 10
10-09 12:32:06.664: I/CHEOK(8926): E v.getLayoutParams().height = 14
10-09 12:32:06.679: I/CHEOK(8926): E v.getLayoutParams().height = 18
10-09 12:32:06.699: I/CHEOK(8926): E v.getLayoutParams().height = 22
10-09 12:32:06.715: I/CHEOK(8926): E v.getLayoutParams().height = 27
10-09 12:32:06.734: I/CHEOK(8926): E v.getLayoutParams().height = 32
10-09 12:32:06.750: I/CHEOK(8926): E v.getLayoutParams().height = 37
10-09 12:32:06.769: I/CHEOK(8926): E v.getLayoutParams().height = 42
10-09 12:32:06.785: I/CHEOK(8926): E v.getLayoutParams().height = 47
10-09 12:32:06.804: I/CHEOK(8926): E v.getLayoutParams().height = 52
10-09 12:32:06.828: I/CHEOK(8926): E v.getLayoutParams().height = 59
10-09 12:32:06.840: I/CHEOK(8926): E v.getLayoutParams().height = 62
10-09 12:32:06.863: I/CHEOK(8926): E v.getLayoutParams().height = 67
10-09 12:32:06.879: I/CHEOK(8926): E v.getLayoutParams().height = 71
10-09 12:32:06.894: I/CHEOK(8926): E v.getLayoutParams().height = 75
10-09 12:32:06.910: I/CHEOK(8926): E v.getLayoutParams().height = 79
10-09 12:32:06.929: I/CHEOK(8926): E v.getLayoutParams().height = 82
10-09 12:32:06.945: I/CHEOK(8926): E v.getLayoutParams().height = 85
10-09 12:32:06.965: I/CHEOK(8926): E v.getLayoutParams().height = 88
10-09 12:32:06.984: I/CHEOK(8926): E v.getLayoutParams().height = 89
10-09 12:32:07.000: I/CHEOK(8926): E v.getLayoutParams().height = 91
10-09 12:32:07.019: I/CHEOK(8926): E v.getLayoutParams().height = 91
10-09 12:32:07.039: I/CHEOK(8926): E v.getLayoutParams().height = -2
10-09 12:32:07.054: I/CHEOK(8926): E v.getLayoutParams().height = -2

新しい高さは ~20ms ごとに発生します。つまり、アニメーションの FPS は約 50fps です。

もちろん、requestLayoutUI は画面上で更新されないため、単に削除することはできません。

50fps に近いアニメーション FPS を達成するために、改善できることはありますか? スムーズな展開/折りたたみの例を備えた商用製品を見たことがあります。ですから、これは達成可能なものだと思います。ただ、正確な方法はわかりません。

私のレイアウトコードは次のとおりです：

        <LinearLayout
            android:clickable="true"
            android:id="@+id/chart_linear_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@drawable/dummy"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="0dp"
                    android:width="0dp"
                    android:layout_weight="0.6"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:textSize="20sp" 
                    android:textColor="#ff000000"
                    android:text="Summary chart" />
                <TextView
                    android:id="@+id/chart_price_text_view"
                    android:layout_width="0dp"
                    android:width="0dp"
                    android:layout_weight="0.4"
                    android:layout_height="wrap_content"
                    android:gravity="right"
                    android:textSize="20sp" 
                    android:textColor="#ffF76D3C"
                    android:text="$2.99" />

            </LinearLayout>
            <TextView
                android:visibility="gone"
                android:id="@+id/chart_description_text_view"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"         
                android:text="@string/currency_exchange_description"
                android:textColor="#ff626262"
                android:textSize="15sp" />                 
        </LinearLayout>

chart_description_text_viewから滑らかなアニメーションを実行したい

崩壊中（アプリ起動中）

ここに画像の説明を入力

エキスパンド (ユーザーがタップしたとき)

ここに画像の説明を入力

私が考えることができる「ロールモデル」の 1 つはhttps://play.google.com/store/apps/details?id=ch.bitspin.timelyです。Shopメニュー項目から以下のダイアログを呼び出してみてください。彼らのアニメーションがいかに滑らかであるかがわかります。彼らがどのようにそれを達成したかは正確にはわかりません。

ここに画像の説明を入力

score 27 · Accepted Answer

アニメーションを行う最も簡単な方法は、リニアレイアウトの xml に次を追加することです。

android:animateLayoutChanges="true"

それはうまく機能し、Androidから直接デフォルトのアニメーションを使用します

score 17 · Accepted Answer

ビューでスムーズなアニメーション（展開/折りたたみ）を取得するのは非常に簡単です

public void expandOrCollapse(final View v,String exp_or_colpse) {
    TranslateAnimation anim = null;
    if(exp_or_colpse.equals("expand"))
    {
        anim = new TranslateAnimation(0.0f, 0.0f, -v.getHeight(), 0.0f);
        v.setVisibility(View.VISIBLE);  
    }
    else{
        anim = new TranslateAnimation(0.0f, 0.0f, 0.0f, -v.getHeight());
        AnimationListener collapselistener= new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
            v.setVisibility(View.GONE);
            }
        };

        anim.setAnimationListener(collapselistener);
    }

     // To Collapse
        //

    anim.setDuration(300);
    anim.setInterpolator(new AccelerateInterpolator(0.5f));
    v.startAnimation(anim);
}

コードでこのメソッドを使用します。私は TextView で使用しましたが、テスト済みです。このメソッドでビューをパラメーターとして渡すことができます。

        TextView tv=(TextView)findViewById(R.id.textview);
          //TO Expand 
         expandOrCollapse(tv,"expand");

        //TO Collapse
        expandOrCollapse(tv,"collapse");

スムーズな折りたたみと展開のアニメーションをお楽しみください.......

score 7 · Accepted Answer

これらは、Github の SlideExpandibleList の非常に良い例です。

https://github.com/tjerkw/Android-SlideExpandableListView

これがスムーズなアニメーションと崩壊を達成するのに役立つことを願っています.

この例では、展開リスト項目の状態を保存しました。そのため、リストを下にスクロールしても、展開されたリスト項目を閉じることはできません。

この例では、ボタンに展開または折りたたみイベントが指定されているため、リストアイテムの親レイアウトを変更する必要があります。

スクリーンショットを添付しました。

これがあなたを助けることを願っています。

ここに画像の説明を入力

android - スムーズな展開/折りたたみアニメーションを実現する方法

崩壊中（アプリ起動中）

エキスパンド (ユーザーがタップしたとき)

5 に答える 5

Related

Reference