首页 > 代码库 > Android 实现蘑菇街购物车动画效果
Android 实现蘑菇街购物车动画效果
1.在蘑菇街购物当中有这个这种效果。
商品添加到顶端购物篮里面，其实就是一连串Tween动画。
2.这个动画的思路是：
将购物篮的图片先隐藏在屏幕的中间，当点击立即购买按钮进行scale变化由1.0->1.4在由1.4->1.0的下效果。然后translate和Alpha等动画集合的执行。对动画进行监听，当动画执行完成后，创建一个自定义的popwindow展现出来进行确定。
代码如下：
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>
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 }
4、代码
http://download.csdn.net/detail/wangjinyu501/7721429
Android 实现蘑菇街购物车动画效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。