Android – floating action button animation

The following is an animation example of the floating button operation of the Motorola connect application. How to make this animation?

https://www.youtube.com/watch?v=oVKQfCZ3z2g

I have decompiled their APK, but the animation is through code without using any resources in the anim folder

resolvent:

From @ zielony's answer, I said exactly what I wanted

The following is the code to correctly apply the effect

scale_ fab_ in.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXScale="0"
    android:fromYScale="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1"
    android:toYScale="1"
    android:interpolator="@android:interpolator/overshoot"/>

scale_ fab_ out.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400"
    android:fromXScale="1"
    android:fromYScale="1"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0"
    android:toYScale="0"
    android:interpolator="@android:interpolator/overshoot"/>

Edit February 16, 2016 – another way:

Place the following code in your Fab code or any other view

//global
    private static final int FAB_ANIM_DURATION = 200;

public void hide() {
        // Only use scale animation if FAB is visible
        if (getVisibility() == View.VISIBLE) {
            // Pivots indicate where the animation begins from
            float pivotX = getPivotX() + getTranslationX();
            float pivotY = getPivotY() + getTranslationY();

            // Animate FAB shrinking
            ScaleAnimation anim = new ScaleAnimation(1, 0, 1, 0, pivotX, pivotY);
            anim.setDuration(FAB_ANIM_DURATION);
            anim.setInterpolator(getInterpolator());
            startAnimation(anim);
        }
        setVisibility(View.INVISIBLE);
    }


    public void show() {
        show(0, 0);
    }

    public void show(float translationX, float translationY) {

        // Set FAB's translation
        setTranslation(translationX, translationY);

        // Only use scale animation if FAB is hidden
        if (getVisibility() != View.VISIBLE) {
            // Pivots indicate where the animation begins from
            float pivotX = getPivotX() + translationX;
            float pivotY = getPivotY() + translationY;

            ScaleAnimation anim;
            // If pivots are 0, that means the FAB hasn't been drawn yet so just use the
            // center of the FAB
            if (pivotX == 0 || pivotY == 0) {
                anim = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f,
                        Animation.RELATIVE_TO_SELF, 0.5f);
            } else {
                anim = new ScaleAnimation(0, 1, 0, 1, pivotX, pivotY);
            }

            // Animate FAB expanding
            anim.setDuration(FAB_ANIM_DURATION);
            anim.setInterpolator(getInterpolator());
            startAnimation(anim);
        }
        setVisibility(View.VISIBLE);
    }

    private void setTranslation(float translationX, float translationY) {
        if (Build.VERSION.SDK_INT >= VERSION_CODES.HONEYCOMB_MR1) {
            animate().setInterpolator(getInterpolator()).setDuration(FAB_ANIM_DURATION)
                    .translationX(translationX).translationY(translationY);
        }
    }

    private Interpolator getInterpolator() {
        return AnimationUtils.loadInterpolator(getContext(), R.interpolator.fab_interpolator);
    }


<item name="fab_interpolator" type="interpolator">@android:interpolator/decelerate_cubic</item>

The content of this article comes from the network collection of netizens. It is used as a learning reference. The copyright belongs to the original author.
THE END
分享
二维码
< <上一篇
下一篇>>