Android 实现蘑菇街购物车动画效果-阿里云开发者社区

转自：http://blog.csdn.net/wangjinyu501/article/details/38400479

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

1、思路

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

2、实现

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

方式一：

Activity代码：

[html]view
 plaincopy

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);  

    }  

}

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

[html]view
 plaincopy

<?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、效果

4、代码

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