web-dev-qa-db-ja.com

マテリアルデザインアニメーションでビューを別のビューで埋めるにはどうすればよいですか？

Android Material Designと統合されたさまざまな機能を試してみましたが、ビューがそのような別のビューを埋めるときにこのタイプのアニメーションを実行することはできません：

これを行う方法を知っているか、ライブラリ/プロジェクトの例を知っていますか？

enter image description here

androidanimationmaterial-design
45
lopez.mikhael

そのための解決策はpathInterpolatorで、このエフェクトの名前はCurved Motionです。

マテリアルデザインのアニメーションは、時間補間と空間移動パターンの曲線に依存しています。 Android 5.0（APIレベル21）以降では、アニメーションのカスタムタイミングカーブと曲線モーションパターンを定義できます。

ここでそれを実装する方法を見ることができます：

http://developer.Android.com/training/material/animations.html#CurvedMotion

GitHubのサンプル[〜＃〜] here [〜＃〜]：

enter image description here

29
lopez.mikhael

私はこれをAPI 21の下に実装しようとしました

gradleの依存関係を追加する

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

私のアクティビティxmlは

activity_reval_anim.xml

<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=".RevalAnimActivity">

    <ImageView
        Android:id="@+id/img_top"
        Android:layout_width="match_parent"
        Android:layout_height="200dp"
        Android:layout_alignParentLeft="true"
        Android:layout_alignParentStart="true"
        Android:layout_alignParentTop="true"
        Android:background="@color/color_primary"

        Android:src="@drawable/ala"/>


    <io.codetail.widget.RevealLinearLayout

        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="match_parent"
        Android:layout_height="200dp"
        Android:layout_below="@+id/img_top"
        Android:background="@color/color_primary">
        <LinearLayout
            Android:visibility="invisible"
            Android:id="@+id/ll_reveal"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@color/color_accent"
            Android:orientation="horizontal"
            ></LinearLayout>

    </io.codetail.widget.RevealLinearLayout>
    <ImageButton
        Android:id="@+id/img_floating_btn"
        Android:layout_width="60dp"
        Android:layout_height="60dp"
        Android:layout_alignParentRight="true"
        Android:layout_marginRight="40dp"
        Android:layout_marginTop="170dp"
        Android:background="@drawable/expand_btn"/>
</RelativeLayout>

私のアクティビティJavaは

RevalAnimActivity.Java

public class RevalAnimActivity extends ActionBarActivity {

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

        final ImageButton mFloatingButton = (ImageButton) findViewById(R.id.img_floating_btn);
        mFloatingButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {


                animateButton(mFloatingButton);


            }


        });

    }

    private void animateButton(final ImageButton mFloatingButton) {

        mFloatingButton.animate().translationXBy(0.5f).translationY(150).translationXBy(-0.9f)
                .translationX(-150). setDuration(300).setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);

                animateReavel((int) mFloatingButton.getX(), 150,mFloatingButton);
            }
        });

    }

    private void animateReavel(int cx, int cy, final ImageButton mFloatingButton) {


        final View myView = findViewById(R.id.ll_reveal);

        // get the final radius for the clipping circle
        float finalRadius = hypo(myView.getWidth(), myView.getHeight());

        SupportAnimator animator =
                ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
        animator.addListener(new SupportAnimator.AnimatorListener() {
            @Override
            public void onAnimationStart() {
                mFloatingButton.setVisibility(View.INVISIBLE);
                myView.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd() {
                Toast.makeText(getApplicationContext(), "Done", Toast.LENGTH_LONG)
                        .show();
            }

            @Override
            public void onAnimationCancel() {
            }

            @Override
            public void onAnimationRepeat() {
            }
        });
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.setDuration(1000);
        animator.start();

    }

    static float hypo(int a, int b) {
        return (float) Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    }


}
45
N J