浮动动作按钮动画 [英] Floating Action Button Animation
本文介绍了浮动动作按钮动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是一个有关Motorla Connect应用程序的浮动按钮动作的动画示例.如何制作此动画?
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
我已经反编译了他们的apk,但是此动画是通过代码进行的,并且不使用anim文件夹的任何资源.
I have decompiled their apk, however this animation is via code and does not use any resource of anim folder.
推荐答案
从@Zielony答案中,我将它精确地放置在想要的位置.
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"/>
编辑2/16/2016-另一种方法:
将下面的代码放入您的FAB代码或任何其他视图中.
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>
这篇关于浮动动作按钮动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文