我明明是正着录得,但截取gif动画就变成倒着了,大家凑活看吧.
今天讲的就是上面动画所演示的,listview删除item和上下item进行交换的动画.我们有时候listview会执行删除item的操作,但是如果没有动画就会显得很突兀,用户体验非常不好,因此,我们删除item的时候可以加个动画效果,这样看上去就顺眼多了.不多说,上代码
首先,我们看一下删除动画:
private AnimatorSet getDeleteAnimation(int position){
// 存储所有的Animator，利用AnimatorSet直接播放
ArrayList<Animator> animators = new ArrayList<Animator>();
//获取显示的一个view的position
int firstVisiblePosition = mListView.getFirstVisiblePosition();
View deleteView = mListView.getChildAt(position - firstVisiblePosition);
int viewHeight = deleteView.getHeight();
int viewWidth = deleteView.getWidth();
//平移动画
ObjectAnimator translationXAnimator = ObjectAnimator.ofFloat(deleteView, "translationX", viewWidth);
translationXAnimator.setDuration(500);
animators.add(translationXAnimator);
//透明动画
ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(deleteView, "alpha", 1, 0);
alphaAnimator.setDuration(500);
animators.add(alphaAnimator);
int delay = 500;
int firstViewToMove = position + 1;
for (int i=firstViewToMove;i < mListView.getChildCount(); ++i){
View viewToMove = mListView.getChildAt(i);
ObjectAnimator moveAnimator = ObjectAnimator.ofFloat(viewToMove, "translationY", 0, - viewHeight);
moveAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
moveAnimator.setStartDelay(delay);
delay += 100;
animators.add(moveAnimator);
}
//动画集合
AnimatorSet animationSet = new AnimatorSet();
animationSet.playTogether(animators);
return animationSet;
}如果你比较熟悉属性动画,那么上面代码没什么你应该能看得懂,如果不明白的话,你也可以去学学关于属性动画的文章,不需要太深入,稍微了解你就能看的懂了.当我们进行删除操作的时候,就可以启动动画了
viewHolder.delete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AnimatorSet animatorSet = getDeleteAnimation(position);
animatorSet.start();
animatorSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
remove(position);
// 动画结束后，恢复ListView所有子View的属性
for (int i=0; i<mListView.getChildCount() ;++i){
View v = mListView.getChildAt(i);
v.setAlpha(1f);
v.setTranslationY(0);
v.setTranslationX(0);
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
});remove方法:
private void remove(int position){
if (position < mModelLists.size()){
mModelLists.remove(position);
}
this.notifyDataSetChanged();
}这样就可以实现item删除动画
接下来,我们要实现item移动动画,动画代码:
private AnimatorSet changePositionAnimation(int position, int type){
// 存储所有的Animator，利用AnimatorSet直接播放
ArrayList<Animator> animators = new ArrayList<Animator>();
//获取显示的一个view的position
int firstVisiblePosition = mListView.getFirstVisiblePosition();
View moveView = mListView.getChildAt(position - firstVisiblePosition);
int viewHeight = moveView.getHeight();
int viewWidth = moveView.getWidth();
AnimatorSet animatorSet = new AnimatorSet();
if (type == 1){//向下移动
View upView = mListView.getChildAt(position - firstVisiblePosition + 1);
ObjectAnimator objectAnimatorUp = ObjectAnimator.ofFloat(upView, "translationY", -viewHeight);
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(moveView, "translationY", viewHeight);
animators.add(objectAnimator);
animators.add(objectAnimatorUp);
}else if (type == 2){//向上移动
View downView = mListView.getChildAt(position - firstVisiblePosition - 1);
ObjectAnimator objectAnimatorDow = ObjectAnimator.ofFloat(downView, "translationY", viewHeight);
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(moveView, "translationY", -viewHeight);
animators.add(objectAnimator);
animators.add(objectAnimatorDow);
}
animatorSet.setDuration(300);
animatorSet.playTogether(animators);
return animatorSet;
}向上移动点击事件:
viewHolder.takeUp.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AnimatorSet animatorSet = changePositionAnimation(position, 2);
animatorSet.start();
animatorSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
remove(position);
insertItem(albumImage, position - 1);
for (int i=0; i<mListView.getChildCount() ;++i){
View v = mListView.getChildAt(i);
v.setTranslationY(0);
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
});向下移动点击事件:
//下一个
viewHolder.takeDown.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AnimatorSet animatorSet = changePositionAnimation(position, 1);
animatorSet.start();
animatorSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
remove(position);
insertItem(albumImage, position + 1);
for (int i=0; i<mListView.getChildCount() ;++i){
View v = mListView.getChildAt(i);
v.setTranslationY(0);
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
});insertItem方法:
扫描二维码关注公众号，回复：
2773553 查看本文章
private void insertNext(HexAlbumImage image, int to){
mModelLists.add(to, image);
this.notifyDataSetChanged();
}通过上述代码,我们就可以实现item动画了,如果有什么问题可以问我哦