原文地址:https://android.jlelse.eu/animate-objects-not-views-250fe7880196
无可否认,我们都喜欢炫酷的动画效果。没有用户会喜欢生硬、没有过渡和动画的app。但同时没有开发者愿意花费大量的时间和ValueAnimator
打交道,特别是当你需要创建很多ValueAnimators
才能达到自己相要的效果。
因此为什么不使用DataBinding
来完成这些复杂的事?
众所周知,BaseObservable
可以包含标有@Bindable注释的字段。
就像这样:
public class ExpandStateItem extends BaseObservable {
@Bindable
private float padding;
@Bindable
private boolean expanded;
@Bindable
private boolean fast;
}
如果您调用notifyPropertyChanged(BR.field_name)
,任何使用此字段的视图将被通知到,然后进行更新。所以唯一剩下我们需要做的事情就是把正确的东西绑定到正确的值。
在我的例子中有3个可以绑定的属性。 让我们一一看看他们。
第一个值是padding
,我们需要像这样绑定它
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@{state.padding}"
android:paddingTop="@{state.padding}">
....
</LinearLayout>
state
是在布局文件中声明的类型为ExpandStateItem
的变量
Android DataBinding
库甚至知道如何设置padding
属性,因此您不需要自己创建@BindingAdapter
。
现在如果您为ExpandStateItem
对象的padding
设置某个值,您会看到它对应的所有视图实际上会改变它的padding
值。
如果您创建一些动画并在动画的CallBack中更改此值,则所有视图将相应地进行动画。
这里是一个例子。 state
是一个在RecyclerView
中绑定到RecyclerView.ViewHolders
的数组。
private ValueAnimator paddingAnimator = ValueAnimator.ofFloat(MAX_MARGIN, MIN_MARGIN);
paddingAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
for (ExpandStateItem item :
states) {
item.setPading((float) animation.getAnimatedValue());
}
}
});
下一个变量是expanded
。如果您注意到文章顶部的GIF图像,它有一些可伸缩的卡片,它们随着expanded
属性的改变而扩展/折叠。 它是这样绑定�的:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"
app:expand="@{state.expanded}"
app:fastExpand="@{state.fast}">
...
</LinearLayout>
另外你可能注意到了app:fastExpand
,稍后我会告诉你。
对于app:expand
属性,我们需要编写我们自己的@BindingAdapter。
@BindingAdapter({"expand", "fastExpand"})
public static void expandView(View view, boolean expand, boolean fast) {
if (expand) {
ViewAnimationUtils.expand(view, null, fast);
} else if (view.getHeight() != 0) {
ViewAnimationUtils.collapse(view, null, fast);
}
}
现在,如果我向你展示ViewAnimationUtils
类,我敢打赌你会弄清楚为什么我们需要fastExpand
属性。
package com.wldev.expandablecardviewlist.extra;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.Transformation;
public class ViewAnimationUtils {
public static void expand(final View v, final AnimationEndCallback callback, boolean fast) {
v.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
final int targtetHeight = v.getMeasuredHeight();
v.getLayoutParams().height = 0;
v.setVisibility(View.VISIBLE);
Animation a = new Animation() {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
v.getLayoutParams().height = interpolatedTime == 1
? ViewGroup.LayoutParams.WRAP_CONTENT
: (int) (targtetHeight * interpolatedTime);
v.requestLayout();
}
@Override
public boolean willChangeBounds() {
return true;
}
};
int duration = 0;
if (!fast) {
duration = (int) (targtetHeight / v.getContext().getResources().getDisplayMetrics().density);
}
a.setDuration(duration);
a.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
if (callback != null)
callback.onAnimationEnded();
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
v.startAnimation(a);
}
public static void collapse(final View v, final AnimationEndCallback callback, boolean fast) {
final int initialHeight = v.getMeasuredHeight();
Animation a = new Animation() {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
if (interpolatedTime == 1) {
v.setVisibility(View.GONE);
} else {
v.getLayoutParams().height = initialHeight - (int) (initialHeight * interpolatedTime);
v.requestLayout();
}
}
@Override
public boolean willChangeBounds() {
return true;
}
};
int duration = 0;
if (!fast) {
duration = (int) (initialHeight / v.getContext().getResources().getDisplayMetrics().density);
}
a.setDuration(duration);
a.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
if (callback != null)
callback.onAnimationEnded();
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
v.startAnimation(a);
}
interface AnimationEndCallback {
void onAnimationEnded();
}
}
通过将fastExpand
指定为true,将不会有动画时长。
但是为什么我们需要移除动画时长?事实上,如果你想在可回收的列表上使用它,完全不必这样做。当view将被回收并再次使用(RecyclerView
里是onBindViewHolder
),所有动画将再次出现在此特定视图中,因此需要指定我们只想展开的视图,并且不展示进度。
例子就这样,如何与视图进行交互(动画),而不会触及视图(实际上你会,但是间接地)。 你可以用它做的事情只会受到你想象力的限制。View
的margins
, paddings
, width
, height
,TextView
的lines count
, color
, taste (no)
, thousands of them.。
我的示例的源代码在GitHub上here。
Thanks for attention and happy coding :)
网友评论