Here is an example of an animation on the floating button action of the Motorla Connect app. How to make this animation?
https://www.youtube.com/watch?v=oVKQfCZ3z2g
I have decompiled their apk, however this animation is via code and does not use any resource of anim folder.
From the @Zielony answer, I made it exactly where I wanted.
Below is the code for the effect correctly applied.
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 2/16/2016 - Another way to do it:
Put the code below 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 button is just scaling from 0 to 1 with OvershootInterpolator. It should be something like this:
ScaleAnimation anim = new ScaleAnimation(0,1,0,1);
anim.setFillBefore(true);
anim.setFillAfter(true);
anim.setFillEnabled(true);
anim.setDuration(300);
anim.setInterpolator(new OvershootInterpolator());
fab.startAnimation(anim);
http://developer.android.com/reference/android/view/animation/OvershootInterpolator.html
You can use this method to animate scale up any view. If you reverese 0 and 1 you wull get scale down animation
public static void scale(View view, long delay) {
view.setScaleX(0);
view.setScaleY(0);
view.animate()
.scaleX(1)
.scaleY(1)
.setDuration(500)
.setStartDelay(delay)
.setInterpolator(new OvershootInterpolator())
.start();
}
As for me, this type of scale animation looks better with startOffset
value set. This worked good for me:
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="400"
android:fillBefore="true"
android:fillAfter="true"
android:fillEnabled="true"
android:startOffset="500"
android:fromXScale="0"
android:fromYScale="0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1"
android:interpolator="@android:interpolator/overshoot"/>
Use the following code to get the same effect.
ScaleAnimation anim = new ScaleAnimation(0, 1, 0, 1, 50, 50);
anim.setFillBefore(true);
anim.setFillAfter(true);
anim.setFillEnabled(true);
anim.setDuration(400);
anim.setInterpolator(new OvershootInterpolator());
imageView.startAnimation(anim);