【转】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         <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>

4、代码

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

时间: 2024-10-12 16:55:01

【转】Android 实现蘑菇街购物车动画效果的相关文章

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

版本:1.0 日期:2014.8.6 版权:© 2014 kince 转载注明出处 使用过蘑菇街的用户基本上都知道有一个加入购物车的动画效果,此处不具体描述想知道的可以去下载体验一下. 1.思路 目前想到两种方式实现这种效果,一是使用Tween动画,直截了当的进行一个移动,蘑菇街就是使用这样的方法.二是使用WindowManager创建一个View,然后对这个View进行移动. 2.实现 本文先用方式一方法实现,之后会用方式二方法实现. 方式一: Activity代码: package com.

android 仿ppt进入动画效果合集

EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机线条效果,向内溶解效果,圆形扩展效果, 适用于各种view和viewgroup,activity即用于页面根部viewgroup, 自定义viewgroup自动换行layout, 看效果图 Series of entrance animation effects just like ppt in A

android中设置Animation 动画效果

在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation 画面转换动画,接下来eoe进行讲解. tweened animation 渐变动画有以下两种类型: 1.alpha   渐变透明度动画效果 2.scale   渐变尺寸伸缩动画效果 frame by frame animation 画面转换动画有以下两种类型: 1.translate  画面转换位置

javascript仿天猫加入购物车动画效果

  注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中完成这样的任务,最近需要做类似于天猫加入购物车动画效果,所以就在网上搜索了下,就看到类似的效果,就把代码截下来自己封装了下~~ 如果想要了解抛物线的细节,我建议大家先 看下 张鑫旭 讲解的抛物线的文章,再来看如下JS代码,可能理解更深点~~ http://www.zhangxinxu.com/wordpress/2013/12/javascri

Android Acitivy切换平移动画效果实现

1.在anim目录下新建anim文件夹,新建tran_in.xml和tran_out.xml分别表示下一页切换进入,和本页切换出去. 即in表示下一页向左平移,out表示同样向左平移至消失. tran_in.xml <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="100%p" X轴从100->0 android:toXDel

android AnimationDrawable类实现动画效果

布局文件xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:p

jquery 物品加入购物车动画效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title

JQuery模拟实现天猫购物车动画效果

测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script src="jquery.fly.min.js"></script&

Android 仿余额宝数字动画效果

看过好几篇进行数字动画处理的文章,这个是我发现的最简单也是最好理解的,特地拿出来和大家分享. 核心的代码主要是重写了 TextView这个控件,做了一些自己的处理. package com.lance.widget; import java.text.DecimalFormat; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import android.content.Co