安卓购物车添加商品动画效果

自定义动画类（直接使用）

package com.bjut.sse.yimeiband.main;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.ImageView;

import com.bjut.sse.yimeiband.wrap.WrapAnimationListener;

/**
* 作者：haoran
* 说明：添加商品到购物车的动画
*/

public class ShoppingCartAnim {

private ImageView buyImg;//播放动画的参照imageview
private int[] start_location = new int[2];// 这是用来存储动画开始位置的X、Y坐标;
private int[] end_location = new int[2];// 这是用来存储动画结束位置的X、Y坐标;

private ViewGroup root;//动画层
private AnimationSet set;

public ShoppingCartAnim(Activity activity, Drawable drawable) {

buyImg = new ImageView(activity);//buyImg是动画的图片
buyImg.setImageDrawable(drawable);// 设置buyImg的图片
//buyImg.setImageBitmap(bitmap);//也可以设置bitmap，可以用商品缩略图来播放动画
root = (ViewGroup) activity.getWindow().getDecorView();//创建一个动画层
root.addView(buyImg);//将动画参照imageview放入
}

/**
* 将image图片添加到动画层并放在起始坐标位置
*
* @param view     播放动画的view
* @param location 起始位置
* @return
*/
private View addViewFromAnimLayout(View view, int[] location) {
int x = location[0];
int y = location[1];
FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
60,
60);
lp.leftMargin = x;
lp.topMargin = y;
view.setLayoutParams(lp);
return view;

}

public void startAnim(View startView, View endView) {
// 1 这是获取起始目标view在屏幕的X、Y坐标（这也是动画开始的坐标）
startView.getLocationInWindow(start_location);
// 2 购物车结束位置(目标位置)
endView.getLocationInWindow(end_location);
// 3 新建一个图层位于源view之上
View run_view = addViewFromAnimLayout(buyImg, start_location);

// 计算位移
int endX = end_location[0] - start_location[0];
int endY = end_location[1] - start_location[1] + UiUtils.STATUE_BAR_HEIGHT;

// 4 平移动画 绘制X轴 0到结束的x轴
TranslateAnimation translateAnimationX = new TranslateAnimation(0,
endX, 0, 0);
//设置线性插值器
translateAnimationX.setInterpolator(new LinearInterpolator());
// 动画重复执行的次数
translateAnimationX.setRepeatCount(0);
//设置动画播放完以后消失，终止填充
translateAnimationX.setFillAfter(true);

// 5  平移动画 绘制Y轴
TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0,
0, endY);
translateAnimationY.setInterpolator(new AccelerateInterpolator());
translateAnimationY.setRepeatCount(0);
translateAnimationX.setFillAfter(true);

// 6 将两个动画放在动画播放集合里
//  设置false使每个子动画都使用自己的插值器
set = new AnimationSet(false);
//设置动画播放完以后消失，终止填充
set.setFillAfter(false);
set.addAnimation(translateAnimationY);
//set.addAnimation(scaleAnimation);
set.addAnimation(translateAnimationX);
set.setDuration(800);// 动画的执行时间
/**
* 动画开始播放的时候，参照对象要显示出来，如果不显示的话这个动画会看不到任何东西。
* 因为不管用户点击几次动画，播放的imageview都是从参照对象buyImg中clone来的
* */
buyImg.setVisibility(View.VISIBLE);
run_view.startAnimation(set);
// 动画监听事件
set.setAnimationListener(new WrapAnimationListener(){
@Override
public void onAnimationEnd(Animation animation) {
super.onAnimationEnd(animation);
//动画播放完以后，参照对象要隐藏
buyImg.setVisibility(View.GONE);
set.cancel();
}
});
}
}

实现思路：在SourceImageview上加一层 ImageView，让ImageView 做view动画 或属性动画，这里就只来一个view动画的set集合

包装类 WrapAnimationListener 简化书写

public class WrapAnimationListener implements Animation.AnimationListener {
@Override
publi
bacb
c void onAnimationStart(Animation animation) {

}

@Override
public void onAnimationEnd(Animation animation) {

}

@Override
public void onAnimationRepeat(Animation animation) {

}
}

调用

/**
* 做添加商品的动画
*/
private void doAddAnimation(ImageView v) {

ShoppingCartAnim cartAnimation = new ShoppingCartAnim(getActivity(),v.getDrawable());
cartAnimation.startAnim(v,target);

}

购物车的小红点

target = (ImageView) getActivity().findViewById(R.id.btn_title_right);
bv = new BadgeView(getContext(), target);
bv.setBadgeBackgroundColor(Color.TRANSPARENT);
bv.setTextColor(Color.RED);
bv.setTextSize(10);
bv.setBadgePosition(BadgeView.POSITION_CENTER);

思考：用户体验，个人认为这个效果没必要，就不上图了。

添加属性动画：

ObjectAnimator translateAnimationX = ObjectAnimator.ofFloat(run_view, "translationX", 0,endX);
translateAnimationX.setDuration(400);
translateAnimationX.setInterpolator(new LinearInterpolator());

ObjectAnimator translateAnimationY = ObjectAnimator.ofFloat(run_view, "translationY", 0,endY);
translateAnimationY.setDuration(400);
translateAnimationY.setInterpolator(new AccelerateInterpolator());

//缩小动画
ObjectAnimator scaleX = ObjectAnimator.ofFloat(run_view, "scaleX", 1, 0.1f);
scaleX.setDuration(400);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(run_view, "scaleY", 1, 0.1f);
scaleY.setDuration(400);
scaleY.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}

@Override
public void onAnimationEnd(Animator animation) {
root.removeView(buyImg);

}

@Override
public void onAnimationCancel(Animator animation) {
}

@Override
public void onAnimationRepeat(Animator animation) {
}
});
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(translateAnimationX).with(translateAnimationY);
animatorSet.play(scaleX).with(translateAnimationX);
animatorSet.play(scaleY).with(translateAnimationY);
animatorSet.start();

效果图：