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

使用过蘑菇街的用户基本上都知道有一个加入购物车的动画效果，此处不具体描述想知道的可以去下载体验一下。

1、思路

  目前想到两种方式实现这种效果，一是使用Tween动画，直截了当的进行一个移动，蘑菇街就是使用这样的方法。二是使用WindowManager创建一个View，然后对这个View进行移动。

2、实现

  本文先用方式一方法实现，之后会用方式二方法实现。

  方式一：

   Activity代码：

[html]  view plain copy

1. package com.kince.mogujie;  
2.   
3. import android.app.Activity;  
4. import android.content.Context;  
5. import android.graphics.drawable.ColorDrawable;  
6. import android.os.Bundle;  
7. import android.os.Handler;  
8. import android.view.Gravity;  
9. import android.view.LayoutInflater;  
10. import android.view.View;  
11. import android.view.View.OnClickListener;  
12. import android.view.animation.Animation;  
13. import android.view.animation.Animation.AnimationListener;  
14. import android.view.animation.AnimationUtils;  
15. import android.widget.ImageView;  
16. import android.widget.PopupWindow;  
17. import android.widget.RelativeLayout.LayoutParams;  
18. import android.widget.TextView;  
19.   
20. /**  
21.  * @author kince  
22.  * @category 模仿蘑菇街购物车动画效果 使用Tween动画   
23.  * @issue 1、第一次执行动画效果图片放大效果明显，之后放大效果不明显，蘑菇街也有这样的问题。  
24.  *        2、弹出的popubWindow变形 希望对这方面了解的朋友告知一下  
25.  *  
26.  */  
27. public class MainActivity extends Activity {  
28.   
29.     private ImageView mAnimImageView;  
30.     private TextView mTextView;  
31.     private TextView mNumTextView;  
32.     private Animation mAnimation;  
33.     private PopupWindow mPopupWindow;  
34.     private int goodsNum=0;  
35.       
36.     @Override  
37.     protected void onCreate(Bundle savedInstanceState) {  
38.         super.onCreate(savedInstanceState);  
39.         setContentView(R.layout.detail_frame_layout);  
40.   
41.         mAnimImageView = (ImageView) findViewById(R.id.cart_anim_icon);  
42.         mTextView = (TextView) findViewById(R.id.detail_cart_btn);  
43.         mNumTextView = (TextView) findViewById(R.id.detail_shopping_new);  
44.         mTextView.setOnClickListener(new OnClickListener() {  
45.   
46.             @Override  
47.             public void onClick(View v) {  
48.                 // TODO Auto-generated method stub  
49.                 mAnimImageView.setVisibility(View.VISIBLE);  
50.                 mAnimImageView.startAnimation(mAnimation);  
51.             }  
52.         });  
53.         mAnimation = AnimationUtils.loadAnimation(this, R.anim.cart_anim);  
54.         mAnimation.setAnimationListener(new AnimationListener() {  
55.   
56.             @Override  
57.             public void onAnimationStart(Animation animation) {  
58.                 // TODO Auto-generated method stub  
59.   
60.             }  
61.   
62.             @Override  
63.             public void onAnimationRepeat(Animation animation) {  
64.                 // TODO Auto-generated method stub  
65.   
66.             }  
67.   
68.             @Override  
69.             public void onAnimationEnd(Animation animation) {  
70.                 // TODO Auto-generated method stub  
71.                 goodsNum++;  
72.                 mNumTextView.setText(goodsNum+"");  
73.                 mAnimImageView.setVisibility(View.INVISIBLE);  
74.                 createPopbWindow();  
75.                 mPopupWindow.showAtLocation(mAnimImageView, Gravity.CENTER  
76.                         | Gravity.CENTER_HORIZONTAL, 0, 0);  
77.             }  
78.         });  
79.   
80.         new Handler().postDelayed(new Runnable() {  
81.   
82.             @Override  
83.             public void run() {  
84.                 // TODO Auto-generated method stub  
85.                 mAnimImageView.setVisibility(View.VISIBLE);  
86.                 mAnimImageView.startAnimation(mAnimation);  
87.   
88.             }  
89.         }, 1500);  
90.     }  
91.   
92.     private void createPopbWindow() {  
93.         LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
94.         View contentview = inflater.inflate(R.layout.cart_popup_layout, null);  
95.         contentview.setFocusable(true);  
96.         contentview.setFocusableInTouchMode(true);  
97.         mPopupWindow = new PopupWindow(this);  
98.         mPopupWindow.setContentView(contentview);  
99.         mPopupWindow.setBackgroundDrawable(new ColorDrawable(0x00000000));  
100.         mPopupWindow.setWidth(LayoutParams.WRAP_CONTENT);  
101.         mPopupWindow.setHeight(LayoutParams.WRAP_CONTENT);  
102.         mPopupWindow.setFocusable(true);  
103.         mPopupWindow.setOutsideTouchable(false);  
104.         mPopupWindow.setAnimationStyle(R.style.anim_menu_bottombar);  
105.     }  
106.   
107. }  

  很简单没什么可说的，就是开启一个动画，不过注释中我也提到生成的PopupWindow显示出现一些问题，有知道的朋友可以留言告知。再来看一下 使用的动画文件： cart_anim.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.     <set>  
5.         <scale  
6.             android:duration="300"  
7.             android:fromXScale="1.0"  
8.             android:fromYScale="1.0"  
9.             android:pivotX="50.0%"  
10.             android:pivotY="50.0%"  
11.             android:toXScale="1.4"  
12.             android:toYScale="1.4" />  
13.         <scale  
14.             android:duration="300"  
15.             android:fromXScale="1.4"  
16.             android:fromYScale="1.4"  
17.             android:pivotX="50.0%"  
18.             android:pivotY="50.0%"  
19.             android:startOffset="300"  
20.             android:toXScale="1.0"  
21.             android:toYScale="1.0" />  
22.     </set>  
23.     <set>  
24.         <translate  
25.             android:duration="700"  
26.             android:fromXDelta="0.0"  
27.             android:fromYDelta="0.0"  
28.             android:startOffset="600"  
29.             android:toXDelta="75.0%p"  
30.             android:toYDelta="-109.99756%p" />  
31.   
32.         <alpha  
33.             android:duration="700"  
34.             android:fromAlpha="1.0"  
35.             android:startOffset="600"  
36.             android:toAlpha="0.1" />  
37.   
38.         <scale  
39.             android:duration="700"  
40.             android:fromXScale="1.0"  
41.             android:fromYScale="1.0"  
42.             android:pivotX="50.0%"  
43.             android:pivotY="50.0%"  
44.             android:startOffset="600"  
45.             android:toXScale="0.4"  
46.             android:toYScale="0.4" />  
47.     </set>  
48.   
49. </set>  

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

4、代码

  http://download.csdn.net/detail/wangjinyu501/7721429