单击时动画 Fab(放大/缩小) [英] Animating Fab on click (zoom in/out)
问题描述
我正在尝试模仿以下浮动操作按钮的动画和颜色变化.
I am trying to mimic animation and the color change for the following floating action button.
浮动操作按钮的工作方式是白色关闭，蓝色打开.
The way the floating action button works is white is off and blue is on.
然而，我一直没有成功的动画和改变颜色.
However, I have been unsuccessful with the animation and changing the color.
这些是我尝试这样做的，正如你所看到的，我已经注释掉了我尝试这样做的所有不同方式.
These have been my attempts at doing this, as you can see I have commented out all the different ways I have tried to do this.
这是我的代码:
@SuppressWarnings("unused")
@OnClick(R.id.fabMovieFavourite)
public void addMovieFavourite(View view) {
/* final Animator animator = AnimatorInflater.loadAnimator(getActivity(), R.animator.add_favourite_movie);
animator.setTarget(view);)
animator.start();
*/
/*
AnimatorSet animatorSet = new AnimatorSet();
PropertyValuesHolder propertyValuesHolderX = PropertyValuesHolder.ofFloat(View.SCALE_X, 1.1f);
PropertyValuesHolder propertyValuesHolderY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 1.1f);
ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(view, propertyValuesHolderX, propertyValuesHolderY);
objectAnimator.setDuration(300);
objectAnimator.setInterpolator(new OvershootInterpolator(10f));
*/
/*
objectAnimator.setRepeatCount(1);
objectAnimator.setRepeatMode(ObjectAnimator.REVERSE);
*/
/*
PropertyValuesHolder propertyValuesHolderX2 = PropertyValuesHolder.ofFloat(View.SCALE_X, 0.9f);
PropertyValuesHolder propertyValuesHolderY2 = PropertyValuesHolder.ofFloat(View.SCALE_Y, 0.9f);
ObjectAnimator objectAnimator2 = ObjectAnimator.ofPropertyValuesHolder(view, propertyValuesHolderX2, propertyValuesHolderY2);
objectAnimator.setDuration(300);
objectAnimator2.setInterpolator(new OvershootInterpolator(10f));
animatorSet.playSequentially(objectAnimator, objectAnimator2);
objectAnimator.start();
*/
// view.BackgroundTintList(ContextCompat.getColorStateList(getContext(), R.color.primary));
//view.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.primary));
if(Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
Timber.d("start translationZ");
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, View.TRANSLATION_Z, 12f);
objectAnimator.setDuration(300);
objectAnimator.setInterpolator(new OvershootInterpolator(10f));
objectAnimator.setTarget(view);
objectAnimator.start();
}
}
非常感谢您的任何建议.
Many thanks for any suggestions.
推荐答案
此动画分为两个阶段.第一个缩放 X 和 Y 轴，第二个缩小它.所以，我们可以把它们分成两个AnimatorSet，依次播放.
There're two phases in this animation. First one scales X and Y axis, and second one downscales it. So, we can divide them into two AnimatorSets and play them sequentially.
动画的关键是为第二个AnimatorSet找到合适的插值器，因为它不是标准的.
The key point of the animation is to find appropriate interpolator for the second AnimatorSet, because it's not standard one.
看，我们希望 fab 先过冲，然后下冲，最后稳定到动画器中的指定值.
See, we want fab to overshoot, then undershoot and then finally settle up to the specified value in the animator.
幸运的是，有非常方便的PathInterpolator，它将为我们创建一个带有Path 的内插器.
Luckily, there's very handy PathInterpolator, which will create an interpolator for us with provided Path.
Path path = new Path();
path.moveTo(0.0f, 0.0f);
path.lineTo(0.5f, 1.3f);
path.lineTo(0.75f, 0.8f);
path.lineTo(1.0f, 1.0f);
PathInterpolator pathInterpolator = new PathInterpolator(path);
那么，让我们创建第一个动画:
So, let's create the first animation:
final float from = 1.0f;
final float to = 1.3f;
ObjectAnimator scaleX = ObjectAnimator.ofFloat(fab, View.SCALE_X, from, to);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(fab, View.SCALE_Y, from, to);
ObjectAnimator translationZ = ObjectAnimator.ofFloat(fab, View.TRANSLATION_Z, from, to);
AnimatorSet set1 = new AnimatorSet();
set1.playTogether(scaleX, scaleY, translationZ);
set1.setDuration(100);
set1.setInterpolator(new AccelerateInterpolator());
set1.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
fab.setImageResource(isActive ? R.drawable.heart_active : R.drawable.heart_passive);
fab.setBackgroundTintList(ColorStateList.valueOf(isActive ? colorActive : colorPassive));
isActive = !isActive;
}
});
我们同时缩放 x, y.此外，我们正在更改 z 平移以具有适当的阴影效果.当动画结束时，我们想要改变 fab 状态(心的颜色和 fab 背景的颜色).
We are scaling both x, y. Also, we are changing z translation to have appropriate shadow effect. When animation ends, we want to change fab state (color of heart and fab background).
现在让我们创建动画来安顿下来:
Now let's create the animation to settle back:
ObjectAnimator scaleXBack = ObjectAnimator.ofFloat(fab, View.SCALE_X, to, from);
ObjectAnimator scaleYBack = ObjectAnimator.ofFloat(fab, View.SCALE_Y, to, from);
ObjectAnimator translationZBack = ObjectAnimator.ofFloat(fab, View.TRANSLATION_Z, to, from);
AnimatorSet set2 = new AnimatorSet();
set2.playTogether(scaleXBack, scaleYBack, translationZBack);
set2.setDuration(300);
set2.setInterpolator(pathInterpolator);
看这里，我们使用了之前创建的 pathInterpolator.
See here, we used pathInterpolator that we created earlier.
我们要按顺序播放这两个 AnimatorSet:
We want to play those two AnimatorSets sequentially:
final AnimatorSet set = new AnimatorSet();
set.playSequentially(set1, set2);
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
fab.setClickable(true);
}
@Override
public void onAnimationStart(Animator animation) {
fab.setClickable(false);
}
});
此外，我们希望在制作动画时禁用对 fab 的点击.所以我们根据动画状态打开/关闭它.
Also, we want to disable clicks on fab whilst animating it. So we are turning it on/off depending on animation state.
最后，我们在点击发生时启动动画:
Finally, we launch the animation when a click happens:
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
set.start();
}
});
结果:
这篇关于单击时动画 Fab(放大/缩小)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
