Blog / 開発者ブログ

Lollipop よりも前の端末で Circular Reveal Effect が使えるライブラリ「CircularReveal」を使ってみた

2015.6.4

先日Google I/Oが開催されました。Android M (Preview)が登場しましたが、それよりも弊社で一番アツかったのは Android Support Design Library の登場です!これにより多くのMaterial Designの部品が出揃うこととなり、下位互換も行いやすくなりました。

しかし、まだいくつかの機能はバックポートされず、Lollipop端末以降でしか依然使うことが出来ません。その内の一つが、Reveal Effectです。今回は、それを行うためのライブラリを紹介します。

Reveal Effect とは

Reveal Effect とは、円形に広がるアニメーションのことです。”Circular Reveal” であったり “Circular Reveal Effect”と言われることもあったりします。Material Designの特徴的なアニメーションの一つです。言葉ではうまく説明できないため、こちらのブログで解説されている内容を確認するのが良いと思います。

その他公式のドキュメントはこちらです。

 

dependenciesの追加

<Android Project>/app/build.gradle へ、ライブラリの依存関係を追加します。

dependencies {
    // ...省略
    compile 'com.github.ozodrukh:CircularReveal:1.0.6@aar'
}

ただし、執筆現在、この方法ですと実行時にエラーが発生してしまうことがあるようです。うまく動作しなかった場合は、最後の「※実行時エラーが出る場合」を参考にして下さい。

 

レイアウトの作成

Reveal Effectをかけるレイアウトを記述します。RevealEffectをかける対象のビューを、RevealFrameLayout要素で囲む必要があるようです。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <io.codetail.widget.RevealFrameLayout
        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
            android:id="@+id/awesome_card"
            style="@style/CardView"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp"
            app:cardBackgroundColor="@color/material_deep_teal_500"
            app:cardElevation="2dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true"
            >

        </android.support.v7.widget.CardView>

    </io.codetail.widget.RevealFrameLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="実行"/>

</RelativeLayout>

 

コードの追加

Activityへ、Reveal Effectをかけるためのコードを追加します。ViewAnimationUtilsクラスを、公式のクラスではなく、io.codetail.animationパッケージの方を使用しなければならないことに注意して下さい。

package com.kayosystem.circularreveal;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;

import io.codetail.animation.SupportAnimator;
import io.codetail.animation.ViewAnimationUtils;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private View myView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment_lib_circular_reveal);

        myView = findViewById(R.id.awesome_card);
        findViewById(R.id.button).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        // ビューの中心を取得
        int cx = (myView.getLeft() + myView.getRight()) / 2;
        int cy = (myView.getTop() + myView.getBottom()) / 2;

        // 斜辺の長さを求める
        float finalRadius = (float) Math.hypot(cx, cy);

        // アニメーション実行
        SupportAnimator animator =
                ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.setDuration(1500);
        animator.start();
    }
}

 

実行

CircularRevealの実行例

思ったよりも滑らかに、RevealEffectが実行されました!

 

おわりに

実際に使ってみた感じですと、何度も実行すると描画中なのに描画終了の状態になったりして、少し動きが怪しいところがありました。しかしシンプルな使い方では問題ありませんし、GitHubのスターも沢山ついており、多くの人が注目しているライブラリとなっています。今後もっと良くなることでしょう。

 

※実行時エラーが出る場合

実はこの記事を書くに当たり、私もこのライブラリを試したのですが、実行時エラーが発生してうまく動作させることが出来ませんでした。

そこで公式のissueを確認してみたところ、同じ現象に遭遇している人が居ました。それによると、原因はライブラリの配布元であるJitpackの問題か、Deployに失敗しているっぽいということでした。なので、直接公式のソースをビルドさせるようにすると動作させることができました。その動作させる方法に関してはIssueに書いたので、そちらを御覧ください。

執筆時点でもIssueは動いており、わりとすぐに修正される可能性が高いです!修正されるまで少し、待ちましょう。