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