如何实现自定义listview文字动画
How to implement Custom listview text animation
我正在 android 中创建购物应用程序。在我的应用程序中,我显示了自定义列表视图中的项目列表。
如果客户 select 一个项目,所选项目文本从列表视图移动到购物车图像。如下图,
这种动画是我的要求。
但是我的动画视图停在了自定义行的末尾。就像这张图片。
我的animation.xml代码,
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true"
>
<translate
android:fromYDelta="0%p"
android:toYDelta="100%p"
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:duration="1000"
/>
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0.0"
android:toYScale="0.2" >
</scale>
</set>
注意: 如果有人想要更多代码,我 post 稍后..因为这个 qtn 已经占用了更多的长度..
我的问题,
我的动画文本视图不能超出自定义行的范围。
so 如何将自定义行文本视图移动到图像(购物车图像)的末尾?
在 TextView 的父视图以及覆盖您要在其中设置动画范围的任何祖父视图上设置 android:clipChildren="false"
。
我相信 this 就是您所关注的。您可以使用名为 View Overlay 的东西。您需要的类似于第一个动画,其中按钮从其框架落到屏幕底部。
总结如下
final Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// Our button is added to the parent of its parent, the most top-level layout
final ViewGroup container = (ViewGroup) button.getParent().getParent();
container.getOverlay().add(button);
ObjectAnimator anim = ObjectAnimator.ofFloat(button, "translationY", container.getHeight());
//You dont need rotation
ObjectAnimator rotate = ObjectAnimator.ofFloat(button, "rotation", 0, 360);
rotate.setRepeatCount(Animation.INFINITE);
rotate.setRepeatMode(Animation.REVERSE);
rotate.setDuration(350);
/*
* Button needs to be removed after animation ending
* When we have added the view to the ViewOverlay,
* it was removed from its original parent.
*/
anim.addListener(new AnimatorListener() {
@Override
public void onAnimationStart(Animator arg0) {
}
@Override
public void onAnimationRepeat(Animator arg0) {
}
@Override
public void onAnimationEnd(Animator arg0) {
container.getOverlay().remove(button);
}
@Override
public void onAnimationCancel(Animator arg0) {
container.getOverlay().remove(button);
}
});
anim.setDuration(2000);
AnimatorSet set = new AnimatorSet();
set.playTogether(anim, rotate);
set.start();
}
});
在您的情况下,您需要正确识别容器。应该是activity的根视图。示例中的按钮也是您将要设置动画的视图(歌曲名称)。最后根据您的要求进行翻译。
目标是将视图从一个位置动画化到另一个位置,因此首先我们需要获得两个点。您可以执行以下操作:
int[] screenLocation = new int[2];
textView.getLocationOnScreen(screenLocation);
int startX = screenLocation[0];
int startY = screenLocation[1];
int[] screenLocationB = new int[2];
cartView.getLocationOnScreen(screenLocationB);
int endX = screenLocationB[0];
int endY = screenLocationB[1];
一旦你有了文本视图的起始位置和你希望它结束的位置(cartview 的位置),我们需要从一个点到下一个点制作动画。我们可以通过在列表视图上方的 window 层或框架布局上放置一个新的文本视图来做到这一点。
这里我们添加到window层:
WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
layoutParams.width = view.getMeasuredWidth();
layoutParams.height = view.getMeasuredHeight();
activity.addContentView(newTextView, layoutParams);
接下来我们设置起始位置。
newTextView.setTranslationX(startX);
newTextView.setTranslationY(startY);
最后我们制作动画。
newTextView.animate().setDuration(300)
.translationX(endX).translationY(endX).start()
我正在 android 中创建购物应用程序。在我的应用程序中,我显示了自定义列表视图中的项目列表。
如果客户 select 一个项目,所选项目文本从列表视图移动到购物车图像。如下图,
这种动画是我的要求。
但是我的动画视图停在了自定义行的末尾。就像这张图片。
我的animation.xml代码,
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true"
>
<translate
android:fromYDelta="0%p"
android:toYDelta="100%p"
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:duration="1000"
/>
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0.0"
android:toYScale="0.2" >
</scale>
</set>
注意: 如果有人想要更多代码,我 post 稍后..因为这个 qtn 已经占用了更多的长度..
我的问题,
我的动画文本视图不能超出自定义行的范围。
so 如何将自定义行文本视图移动到图像(购物车图像)的末尾?
在 TextView 的父视图以及覆盖您要在其中设置动画范围的任何祖父视图上设置 android:clipChildren="false"
。
我相信 this 就是您所关注的。您可以使用名为 View Overlay 的东西。您需要的类似于第一个动画,其中按钮从其框架落到屏幕底部。
总结如下
final Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// Our button is added to the parent of its parent, the most top-level layout
final ViewGroup container = (ViewGroup) button.getParent().getParent();
container.getOverlay().add(button);
ObjectAnimator anim = ObjectAnimator.ofFloat(button, "translationY", container.getHeight());
//You dont need rotation
ObjectAnimator rotate = ObjectAnimator.ofFloat(button, "rotation", 0, 360);
rotate.setRepeatCount(Animation.INFINITE);
rotate.setRepeatMode(Animation.REVERSE);
rotate.setDuration(350);
/*
* Button needs to be removed after animation ending
* When we have added the view to the ViewOverlay,
* it was removed from its original parent.
*/
anim.addListener(new AnimatorListener() {
@Override
public void onAnimationStart(Animator arg0) {
}
@Override
public void onAnimationRepeat(Animator arg0) {
}
@Override
public void onAnimationEnd(Animator arg0) {
container.getOverlay().remove(button);
}
@Override
public void onAnimationCancel(Animator arg0) {
container.getOverlay().remove(button);
}
});
anim.setDuration(2000);
AnimatorSet set = new AnimatorSet();
set.playTogether(anim, rotate);
set.start();
}
});
在您的情况下,您需要正确识别容器。应该是activity的根视图。示例中的按钮也是您将要设置动画的视图(歌曲名称)。最后根据您的要求进行翻译。
目标是将视图从一个位置动画化到另一个位置,因此首先我们需要获得两个点。您可以执行以下操作:
int[] screenLocation = new int[2];
textView.getLocationOnScreen(screenLocation);
int startX = screenLocation[0];
int startY = screenLocation[1];
int[] screenLocationB = new int[2];
cartView.getLocationOnScreen(screenLocationB);
int endX = screenLocationB[0];
int endY = screenLocationB[1];
一旦你有了文本视图的起始位置和你希望它结束的位置(cartview 的位置),我们需要从一个点到下一个点制作动画。我们可以通过在列表视图上方的 window 层或框架布局上放置一个新的文本视图来做到这一点。
这里我们添加到window层:
WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
layoutParams.width = view.getMeasuredWidth();
layoutParams.height = view.getMeasuredHeight();
activity.addContentView(newTextView, layoutParams);
接下来我们设置起始位置。
newTextView.setTranslationX(startX);
newTextView.setTranslationY(startY);
最后我们制作动画。
newTextView.animate().setDuration(300)
.translationX(endX).translationY(endX).start()