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

SibylYxm 8年前

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

 使用过蘑菇街的用户基本上都知道有一个加入购物车的动画效果,此处不具体描述想知道的可以去下载体验一下。
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);      }  }

 很简单没什么可说的,就是开启一个动画,不过注释中我也提到生成的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、效果

   





4、代码