Android 实现蘑菇街购物车动画效果

时间：2021-07-13 01:32:08
版本号：1.0 
日期：2014.8.6
版权：© 2014 kince 转载注明出处
  使用过蘑菇街的用户基本上都知道有一个增加购物车的动画效果，此处不详细描写叙述想知道的能够去下载体验一下。
1、思路
  眼下想到两种方式实现这种效果，一是使用Tween动画，直截了当的进行一个移动，蘑菇街就是使用这个方案。二是使用WindowManager创建一个View，然后对这个View进行移动。
2、实现
  本文先用方式一方法实现，之后会用方式二方法实现。
  方式一：
   Activity代码：
package com.kince.mogujie;

import android.app.Activity;

import android.content.Context;

import android.graphics.drawable.ColorDrawable;

import android.os.Bundle;

import android.os.Handler;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.animation.Animation;

import android.view.animation.Animation.AnimationListener;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.PopupWindow;

import android.widget.RelativeLayout.LayoutParams;

import android.widget.TextView;

/**

 * @author kince

 * @category 模仿蘑菇街购物车动画效果 使用Tween动画

 * @issue 1、第一次运行动画效果图片放大效果明显，之后放大效果不明显，蘑菇街也有这种问题。

 *        2、弹出的popubWindow变形 希望对这方面了解的朋友告知一下

 *

 */

public class MainActivity extends Activity {

	private ImageView mAnimImageView;

	private TextView mTextView;

	private TextView mNumTextView;

	private Animation mAnimation;

	private PopupWindow mPopupWindow;

    private int goodsNum=0;

	@Override

	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);

		setContentView(R.layout.detail_frame_layout);

		mAnimImageView = (ImageView) findViewById(R.id.cart_anim_icon);

		mTextView = (TextView) findViewById(R.id.detail_cart_btn);

		mNumTextView = (TextView) findViewById(R.id.detail_shopping_new);

		mTextView.setOnClickListener(new OnClickListener() {

			@Override

			public void onClick(View v) {

				// TODO Auto-generated method stub

				mAnimImageView.setVisibility(View.VISIBLE);

				mAnimImageView.startAnimation(mAnimation);

			}

		});

		mAnimation = AnimationUtils.loadAnimation(this, R.anim.cart_anim);

		mAnimation.setAnimationListener(new AnimationListener() {

			@Override

			public void onAnimationStart(Animation animation) {

				// TODO Auto-generated method stub

			}

			@Override

			public void onAnimationRepeat(Animation animation) {

				// TODO Auto-generated method stub

			}

			@Override

			public void onAnimationEnd(Animation animation) {

				// TODO Auto-generated method stub

				goodsNum++;

				mNumTextView.setText(goodsNum+"");

				mAnimImageView.setVisibility(View.INVISIBLE);

				createPopbWindow();

				mPopupWindow.showAtLocation(mAnimImageView, Gravity.CENTER

						| Gravity.CENTER_HORIZONTAL, 0, 0);

			}

		});

		new Handler().postDelayed(new Runnable() {

			@Override

			public void run() {

				// TODO Auto-generated method stub

				mAnimImageView.setVisibility(View.VISIBLE);

				mAnimImageView.startAnimation(mAnimation);

			}

		}, 1500);

	}

	private void createPopbWindow() {

		LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

		View contentview = inflater.inflate(R.layout.cart_popup_layout, null);

		contentview.setFocusable(true);

		contentview.setFocusableInTouchMode(true);

		mPopupWindow = new PopupWindow(this);

		mPopupWindow.setContentView(contentview);

		mPopupWindow.setBackgroundDrawable(new ColorDrawable(0x00000000));

		mPopupWindow.setWidth(LayoutParams.WRAP_CONTENT);

		mPopupWindow.setHeight(LayoutParams.WRAP_CONTENT);

		mPopupWindow.setFocusable(true);

		mPopupWindow.setOutsideTouchable(false);

		mPopupWindow.setAnimationStyle(R.style.anim_menu_bottombar);

	}

}

非常easy没什么可说的，就是开启一个动画，只是凝视中我也提到生成的PopupWindow显示出现一些问题，有知道的朋友能够留言告知。再来看一下使用的动画文件：cart_anim.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <set>

        <scale

            android:duration="300"

            android:fromXScale="1.0"

            android:fromYScale="1.0"

            android:pivotX="50.0%"

            android:pivotY="50.0%"

            android:toXScale="1.4"

            android:toYScale="1.4" />

        <scale

            android:duration="300"

            android:fromXScale="1.4"

            android:fromYScale="1.4"

            android:pivotX="50.0%"

            android:pivotY="50.0%"

            android:startOffset="300"

            android:toXScale="1.0"

            android:toYScale="1.0" />

    </set>

    <set>

        <translate

            android:duration="700"

            android:fromXDelta="0.0"

            android:fromYDelta="0.0"

            android:startOffset="600"

            android:toXDelta="75.0%p"

            android:toYDelta="-109.99756%p" />

        <alpha

            android:duration="700"

            android:fromAlpha="1.0"

            android:startOffset="600"

            android:toAlpha="0.1" />

        <scale

            android:duration="700"

            android:fromXScale="1.0"

            android:fromYScale="1.0"

            android:pivotX="50.0%"

            android:pivotY="50.0%"

            android:startOffset="600"

            android:toXScale="0.4"

            android:toYScale="0.4" />

    </set>

</set>

是一个动画集，先运行缩放再运行其它动画效果。
3、效果

Android 实现蘑菇街购物车动画效果
4、代码

相关文章