首页 > 代码库 > 【转】Android 实现蘑菇街购物车动画效果

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

原文出处:http://blog.csdn.net/wangjinyu501/article/details/38400479

1、思路
  目前想到两种方式实现这种效果,一是使用Tween动画,直截了当的进行一个移动,蘑菇街就是使用这样的方法。二是使用WindowManager创建一个View,然后对这个View进行移动。
 
2、实现
  本文先用方式一方法实现,之后会用方式二方法实现。
  方式一:
   Activity代码:
  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

 

 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         <scale14             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         <translate25             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         <alpha33             android:duration="700"34             android:fromAlpha="1.0"35             android:startOffset="600"36             android:toAlpha="0.1" />37 38         <scale39             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>

 

4、代码

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

 

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