web-dev-qa-db-ja.com

whatsappタイプのアニメーションをツールバー（actionbar）からメニューを開くために作成する方法

説明：

  1. 私は最近whatsappを更新し、メニュー項目のアニメーションがツールバーでクリックされたことに気付きました。この効果を達成する方法は？
  2. これを達成するためのオープンソースプロジェクトはありますか？
  3. 私はコードを投稿していません。私は彼らがそれをどのように行っているのか見当もつかない。

Snapshot-1：メニューの添付ボタンをクリックする前に img

Snapshot-2：メニューの添付ボタンをクリックした後

img2

これを達成する方法は？

androidandroid-menuwhatsapp
30
Devrath

L以前のデバイスでLollipopアニメーションを「移植」したようです。これを行う最も簡単な方法は、 Igvalle's Material-Animation のようなライブラリを使用することです（＃4を参照）。 minSdkは16ですが、14以下で減らすことができると思います。

その他のライブラリ： TransitionsBackport 、 PreLollipopTransition 、 transitions-everywhere 。

このアニメーションを作成する場合はお知らせください！

14
anil

これは、それを実装する方法を示すWebページへのリンクです。 http://blog.grafixartist.com/circular-reveal-effect-like-whatsapp-in-Android/ をお役立てください。

13
mik dass

はい、今では2.3 +で循環表示効果を使用できます

Circular Reveal Library を使用して、この効果を実現できます。

ライブラリの依存関係を追加する

 dependencies {
        compile ('com.github.ozodrukh:CircularReveal:1.3.1@aar') {
            transitive = true;
        }
    }

通常のRevealFrameLayoutとRevealLinearLayoutを使用します。心配する必要はありません。ターゲットのみがクリップされます：）

<io.codetail.widget.RevealFrameLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <!-- Put more views here if you want, it's stock frame layout  -->

    <Android.support.v7.widget.CardView
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/awesome_card"
        style="@style/CardView"
        app:cardBackgroundColor="@color/material_deep_teal_500"
        app:cardElevation="2dp"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginTop="8dp"
        Android:layout_width="300dp"
        Android:layout_height="300dp"
        Android:layout_gravity="center_horizontal"
        />

</io.codetail.widget.RevealFrameLayout>

およびコードの追加

 View myView = findView(R.id.awesome_card);

    // get the center for the clipping circle
    int cx = (myView.getLeft() + myView.getRight()) / 2;
    int cy = (myView.getTop() + myView.getBottom()) / 2;

    // get the final radius for the clipping circle
    int dx = Math.max(cx, myView.getWidth() - cx);
    int dy = Math.max(cy, myView.getHeight() - cy);
    float finalRadius = (float) Math.hypot(dx, dy);

    SupportAnimator animator =
            ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.setDuration(1500);
    animator.start();
9
Mr Robot

試してみましたが、L以前のデバイスとの互換性はありませんでしたが、かなりクールに見えると思います。

GitHub で確認してください

6
Tarek K. Ajaj