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

简介:
转自:http://blog.csdn.net/wangjinyu501/article/details/38400479  
使用过蘑菇街的用户基本上都知道有一个加入购物车的动画效果,此处不具体描述想知道的可以去下载体验一下。
1、思路
  目前想到两种方式实现这种效果,一是使用Tween动画,直截了当的进行一个移动,蘑菇街就是使用这样的方法。二是使用WindowManager创建一个View,然后对这个View进行移动。

2、实现
  本文先用方式一方法实现,之后会用方式二方法实现。
  方式一:
   Activity代码:
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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、代码
相关文章
|
4月前
|
存储 Shell Android开发
基于Android P,自定义Android开机动画的方法
本文详细介绍了基于Android P系统自定义开机动画的步骤,包括动画文件结构、脚本编写、ZIP打包方法以及如何将自定义动画集成到AOSP源码中。
79 2
基于Android P,自定义Android开机动画的方法
|
2月前
|
Android开发 UED
Android 中加载 Gif 动画
【10月更文挑战第20天】加载 Gif 动画是 Android 开发中的一项重要技能。通过使用第三方库或自定义实现,可以方便地在应用中展示生动的 Gif 动画。在实际应用中,需要根据具体情况进行合理选择和优化,以确保用户体验和性能的平衡。可以通过不断的实践和探索,进一步掌握在 Android 中加载 Gif 动画的技巧和方法,为开发高质量的 Android 应用提供支持。
|
7月前
|
Java Android开发 开发者
Android10 修改开发者选项中动画缩放默认值
Android10 修改开发者选项中动画缩放默认值
198 0
|
7月前
|
XML Java Android开发
android的三种动画
android的三种动画
38 0
|
5月前
|
XML Android开发 数据格式
Android 中如何设置activity的启动动画,让它像dialog一样从底部往上出来
在 Android 中实现 Activity 的对话框式过渡动画:从底部滑入与从顶部滑出。需定义两个 XML 动画文件 `activity_slide_in.xml` 和 `activity_slide_out.xml`,分别控制 Activity 的进入与退出动画。使用 `overridePendingTransition` 方法在启动 (`startActivity`) 或结束 (`finish`) Activity 时应用这些动画。为了使前 Activity 保持静止,可定义 `no_animation.xml` 并在启动新 Activity 时仅设置新 Activity 的进入动画。
121 12
|
5月前
|
XML Android开发 UED
Android动画之共享元素动画简单实践
本文介绍Android共享元素动画, 实现两Activity间平滑过渡特定UI元素。通过设置`transitionName`属性和使用`ActivityOptions.makeSceneTransitionAnimation`启动目标Activity实现动画效果。可自定义过渡动画提升体验。
73 0
|
6月前
|
Android开发 UED
Android Item平移动画
【6月更文挑战第18天】
109 8
|
5月前
|
Android开发
android 动画 插值器和估值器
android 动画 插值器和估值器
|
7月前
|
数据库 Android开发
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画