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

     
     
  • 相关阅读:
    Windows JScript 在 游览器 中运行 调试 Shell 文件系统
    autohotkey 符号链接 软连接 symbolink
    软链接 硬链接 测试
    SolidWorks 修改 基准面 标准坐标系
    手机 路径 WebDAV 映射 驱动器
    Win10上手机路径
    explorer 命令行
    单位公司 网络 封锁 屏蔽 深信 AC
    cobbler自动化部署原理篇
    Docker四种网络模式
  • 原文地址:https://www.cnblogs.com/liangstudyhome/p/4172308.html
Copyright © 2011-2022 走看看