添加购物车动画

最新推荐文章于 2024-05-21 11:37:12 发布

猛虎细嗅o蔷薇

最新推荐文章于 2024-05-21 11:37:12 发布

阅读量639

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/gly742279097/article/details/42674015

版权

Android 专栏收录该内容

91 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在用户点击添加购物车按钮时，通过精心设计的动画增强用户体验。内容涵盖点击事件处理、动画原理及实现步骤，帮助开发者创建出流畅、吸引人的交互效果。

摘要由CSDN通过智能技术生成

响应点击事件

private void clickAction() {
		int[] start_location = new int[2];// 一个整型数组，用来存储按钮的在屏幕的X、Y坐标
		vginfo_btn_ok.getLocationInWindow(start_location);// 这是获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标）
		// 这是在界面上跑的小图片
		ImageView buyImg = new ImageView(OtherActivity.this);// buyImg是动画的图片，我的是一个小球（R.drawable.sign）
		buyImg.setImageResource(R.drawable.shopcartani);// 设置buyImg的图片
		setAnim(buyImg, start_location);// 开始执行动画
	}

动画核心代码

private void setAnim(final View v, int[] start_location) {
		anim_mask_layout = null;
		anim_mask_layout = createAnimLayout();
		anim_mask_layout.addView(v);// 把动画小球添加到动画层
		final View view = addViewToAnimLayout(anim_mask_layout, v, start_location);
		int[] end_location = new int[2];// 这是用来存储动画结束位置的X、Y坐标
		gwc.getLocationInWindow(end_location);// shopCart是那个购物车gwc

		// 计算位移
		int endX = end_location[0]-start_location[0] ;// 动画位移的X坐标
		int endY = end_location[1] - start_location[1]+gwc.getHeight()/2;// 动画位移的y坐标
		TranslateAnimation translateAnimationX = new TranslateAnimation(0, endX, 0, 0);
		translateAnimationX.setInterpolator(new LinearInterpolator());
		translateAnimationX.setRepeatCount(0);// 动画重复执行的次数
		translateAnimationX.setFillAfter(true);

		TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY);
		translateAnimationY.setInterpolator(new AccelerateInterpolator());
		translateAnimationY.setRepeatCount(0);// 动画重复执行的次数
		translateAnimationX.setFillAfter(true);
		// 通过TranslateAnimation(float fromXDelta, float toXDelta, float
		// fromYDelta, float toYDelta) 来定义动画
		// float fromXDelta 动画开始的点离当前View X坐标上的差值
		// float toXDelta 动画结束的点离当前View X坐标上的差值
		// float fromYDelta 动画开始的点离当前View Y坐标上的差值
		// float toYDelta 动画开始的点离当前View Y坐标上的差值

		AnimationSet set = new AnimationSet(false);
		set.setFillAfter(false);
		set.addAnimation(translateAnimationY);
		set.addAnimation(translateAnimationX);
		set.setDuration(800);// 动画的执行时间
		view.startAnimation(set);
		// 动画监听事件
		set.setAnimationListener(new AnimationListener() {
			// 动画的开始
			@Override
			public void onAnimationStart(Animation animation) {
				v.setVisibility(View.VISIBLE);
			}
			@Override
			public void onAnimationRepeat(Animation animation) {
			}
			// 动画的结束
			@Override
			public void onAnimationEnd(Animation animation) {
				v.setVisibility(View.GONE);
				sp.edit().putString("count", count+"").commit();
				if(callBackNum!=null){
					Log.d("ff", count+"");
					callBackNum.getNum(count);
				}
				vginfo_sl.setText(count+"");
			}
		});
	}

创建动画层

/**
	 * @Description: 创建动画层
	 * @param
	 * @return void
	 * @throws
	 */
	private ViewGroup createAnimLayout() {
		ViewGroup rootView = (ViewGroup) this.getWindow().getDecorView();
		LinearLayout animLayout = new LinearLayout(this);
		LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
		animLayout.setLayoutParams(lp);
		animLayout.setId(Integer.MAX_VALUE);
		animLayout.setBackgroundResource(android.R.color.transparent);
		rootView.addView(animLayout);
		return animLayout;
	}

添加view到动画层

private View addViewToAnimLayout(final ViewGroup vg, final View view, int[] location) {
		int x = location[0];
		int y = location[1];
		LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
		lp.leftMargin = x;
		lp.topMargin = y;
		view.setLayoutParams(lp);
		return view;
	}

项目所涉及的代码段

package com.example.aa;

import android.app.Activity;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class OtherActivity extends Activity implements OnClickListener {

	private RelativeLayout vginfo_back;
	private TextView gwc, vginfo_sl;
	private Button  vginfo_btn_ok;
	private SharedPreferences sp;
	private ViewGroup anim_mask_layout;// 动画层
	private int count=0;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		sp=this.getSharedPreferences("num", MODE_PRIVATE);
		
		vginfo_back = (RelativeLayout) findViewById(R.id.ym_top_back);
		gwc = (TextView) findViewById(R.id.ym_top_name);
		vginfo_sl = (TextView) findViewById(R.id.ym_top_sl);
		vginfo_btn_ok = (Button) findViewById(R.id.vginfo_btn_ok);
		
		vginfo_back.setOnClickListener(this);
		vginfo_btn_ok.setOnClickListener(this);

		vginfo_sl.setText(sp.getString("count", null));
		count=sp.getString("count", null)==null?0:Integer.valueOf(sp.getString("count", null));
	}

	@Override
	public void onClick(View arg0) {
		switch (arg0.getId()) {
		case R.id.ym_top_back:
			finish();
			break;
		case R.id.vginfo_btn_ok:
			count++;
			clickAction();
			break;
		default:
			break;
		}
	}

	private void clickAction() {
		int[] start_location = new int[2];// 一个整型数组，用来存储按钮的在屏幕的X、Y坐标
		vginfo_btn_ok.getLocationInWindow(start_location);// 这是获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标）
		// 这是在界面上跑的小图片
		ImageView buyImg = new ImageView(OtherActivity.this);// buyImg是动画的图片，我的是一个小球（R.drawable.sign）
		buyImg.setImageResource(R.drawable.shopcartani);// 设置buyImg的图片
		setAnim(buyImg, start_location);// 开始执行动画
	}

	private void setAnim(final View v, int[] start_location) {
		anim_mask_layout = null;
		anim_mask_layout = createAnimLayout();
		anim_mask_layout.addView(v);// 把动画小球添加到动画层
		final View view = addViewToAnimLayout(anim_mask_layout, v, start_location);
		int[] end_location = new int[2];// 这是用来存储动画结束位置的X、Y坐标
		gwc.getLocationInWindow(end_location);// shopCart是那个购物车gwc

		// 计算位移
		int endX = end_location[0]-start_location[0] ;// 动画位移的X坐标
		int endY = end_location[1] - start_location[1]+gwc.getHeight()/2;// 动画位移的y坐标
		TranslateAnimation translateAnimationX = new TranslateAnimation(0, endX, 0, 0);
		translateAnimationX.setInterpolator(new LinearInterpolator());
		translateAnimationX.setRepeatCount(0);// 动画重复执行的次数
		translateAnimationX.setFillAfter(true);

		TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY);
		translateAnimationY.setInterpolator(new AccelerateInterpolator());
		translateAnimationY.setRepeatCount(0);// 动画重复执行的次数
		translateAnimationX.setFillAfter(true);
		// 通过TranslateAnimation(float fromXDelta, float toXDelta, float
		// fromYDelta, float toYDelta) 来定义动画
		// float fromXDelta 动画开始的点离当前View X坐标上的差值
		// float toXDelta 动画结束的点离当前View X坐标上的差值
		// float fromYDelta 动画开始的点离当前View Y坐标上的差值
		// float toYDelta 动画开始的点离当前View Y坐标上的差值

		AnimationSet set = new AnimationSet(false);
		set.setFillAfter(false);
		set.addAnimation(translateAnimationY);
		set.addAnimation(translateAnimationX);
		set.setDuration(800);// 动画的执行时间
		view.startAnimation(set);
		// 动画监听事件
		set.setAnimationListener(new AnimationListener() {
			// 动画的开始
			@Override
			public void onAnimationStart(Animation animation) {
				v.setVisibility(View.VISIBLE);
			}
			@Override
			public void onAnimationRepeat(Animation animation) {
			}
			// 动画的结束
			@Override
			public void onAnimationEnd(Animation animation) {
				v.setVisibility(View.GONE);
				sp.edit().putString("count", count+"").commit();
				if(callBackNum!=null){
					Log.d("ff", count+"");
					callBackNum.getNum(count);
				}
				vginfo_sl.setText(count+"");
			}
		});
	}
	
	/**
	 * @Description: 创建动画层
	 * @param
	 * @return void
	 * @throws
	 */
	private ViewGroup createAnimLayout() {
		ViewGroup rootView = (ViewGroup) this.getWindow().getDecorView();
		LinearLayout animLayout = new LinearLayout(this);
		LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
		animLayout.setLayoutParams(lp);
		animLayout.setId(Integer.MAX_VALUE);
		animLayout.setBackgroundResource(android.R.color.transparent);
		rootView.addView(animLayout);
		return animLayout;
	}
	
	private View addViewToAnimLayout(final ViewGroup vg, final View view, int[] location) {
		int x = location[0];
		int y = location[1];
		LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
		lp.leftMargin = x;
		lp.topMargin = y;
		view.setLayoutParams(lp);
		return view;
	}
	
	
	private CallBackNum callBackNum;
	
	public CallBackNum getCallBackNum() {
		return callBackNum;
	}
	public void setCallBackNum(CallBackNum callBackNum) {
		this.callBackNum = callBackNum;
	}
	public interface CallBackNum{
		public int getNum(int count);
	}
}

效果图

猛虎细嗅o蔷薇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
添加购物车动画

响应点击事件private void clickAction() { int[] start_location = new int[2];// 一个整型数组，用来存储按钮的在屏幕的X、Y坐标 vginfo_btn_ok.getLocationInWindow(start_location);// 这是获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标） // 这是在界面上跑的小
复制链接

扫一扫