zoukankan      html  css  js  c++  java
  • 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         <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>

     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、代码

     
     
  • 相关阅读:
    取得system32文件夹下面文件的写入权限
    几个SQL语句(备忘)
    Excel多表合并的宏
    删除系统旧网卡
    Eclipse 迁移到Android studio
    是否使用安全模式启动word
    微信公众平台开发
    delphi安装 Tclientsocket, Tserversocket控件
    win10 Internet Explorer 11 停止工作处理
    java编译出错信息汇总(更新)
  • 原文地址:https://www.cnblogs.com/liangstudyhome/p/4172308.html
Copyright © 2011-2022 走看看