web-dev-qa-db-ja.com

Androidの機能発見アニメーション

5月以降、Googleはウェブサイトのマテリアルデザインガイドラインを更新しました。 Feature discovery という名前の新しいセクションの1つで、興味深いクールなデザインパターンを見ました。

ナビゲーションドロワーボタンを「発見」するためのアニメーション を実装したいと思います。ナビゲーションドロワーとフローティングアクションボタンについては、Google Fitの前回の更新で同様のアニメーションがあります。

多くの場合、Androidアニメーションの場合、Googleはすてきで素晴らしいUIガイドラインを提供しますが、独自のアプリ用にそれを開発するための詳細情報はありません。

Androidこれらの種類のアニメーションを実装するためのライブラリを備えたネイティブソリューションがあるかどうかを知っていますか？ある場合、以下で利用できますAndroid 5.0（API 21） -Android 4.1+？

編集：同じアニメーションを実現するためにGithubプロジェクトを作成しました。あなたはそれをここで見つけることができます： https://github.com/Guimareshh/Feature-discovery-animations

よろしくお願いします！

androidandroid-animationmaterial-design
37
Guimareshh

カスタムアニメーションを作成する必要があります。それ以外の場合は Ripple Effect + Reveal を使用して、ナビゲーションドロワーアイコンに設定します。

サーキュラーリビールアニメーション

void enterReveal() {
    // previously invisible view
    final View myView = findViewById(R.id.my_view);

    // get the center for the clipping circle
    int cx = myView.getMeasuredWidth() / 2;
    int cy = myView.getMeasuredHeight() / 2;

    // get the final radius for the clipping circle
    int finalRadius = Math.max(myView.getWidth(), myView.getHeight()) / 2;

    // create the animator for this view (the start radius is zero)
    Animator anim =
        ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);

    // make the view visible and start the animation
    myView.setVisibility(View.VISIBLE);
    anim.start();
}
8
Aditya Vyas-Lakhan

質問に答えると、Googleは常に興味深いウィジェットコンポーネントの新しいサンプルを提供します。それらのほとんどは、新しいバージョンのAndroidにのみ追加されます。そして、それにはさまざまな理由があります。たとえば、新しいウィジェットはリソースを使用し、新しいバージョンのAndroidでのみ動作するため、UIエンジンが更新されています。その他...

そのため、Android 5.0>でのみ機能するGoogle公式の明らかにするアニメーションはありません。

しかし、そのためのバックポートはたくさんあります：

Android Awesome Android UI 。

Googleが導入したときAndroidマテリアル-その要素すべてのライブラリはありませんでした。しかし、短期間で、さまざまな開発者によって多くの有用なライブラリが作成されました。しかし、その人気の後、Googleはそのウィジェット。

そのため、結果としてバックポートはなく、おそらくGoogleはそのウィジェットを導入しません。しかし、あなたの質問を聞いて、私はあなたが上にリンクされた公式のバックポートではなく、それを行うことができると思います。

4
GensaGames

カスタムビューでこのDesignPatternも作成しました。あなたはそれを見つけることができます ここ 。これは私の最初に公開されたカスタムビューであり、まだ開発中です（そのため、いくつかのバグであり、ドキュメントの一部が欠落している可能性があります）が、日常的に使用するには十分です。

これを使用するには、ライブラリを依存関係に追加します。

compile 'com.cilenco.libraries:featurediscovery:1.0.2'     or
compile 'com.cilenco.libraries:featurediscovery:+'         always newest version

その後、このようなDiscoveryViewを作成できます。他のすべての機能をチェックして、外観とビューの制御を調整します。

DiscoveryView discoveryView = new DiscoveryView.Builder(context, view)
.setPrimaryText(R.string.header)
.setSecondaryText(R.string.description)
.setOnClickListener(this)
.build();

discoveryView.show();

このビューをさらに改善するには、問題を報告したり、バグを発見したり、新しいアイデアがある場合は、リポジトリにプルリクエストを送ったりしてください。

4
Cilenco