Android一点 仿淘宝购物车动画

最新推荐文章于 2024-05-18 09:52:30 发布
最新推荐文章于 2024-05-18 09:52:30 发布
阅读量2.4k 收藏 6
点赞数 1
分类专栏： Android 文章标签： 淘宝网 动画 android 仿淘宝购物车动画 购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqqGL/article/details/62892560
版权

首先看看ios上的淘宝购物车的动画效果ios淘宝购物车动画

这里写图片描述

我们实现的效果
这里写图片描述

看特效是分为两个界面，一个是主view，一个是弹出层。弹出层是用dialog实现的，只是加入了弹出的动画，这里就不分析了，我们主要看主view的动画是怎么实现的，初看好像只是缩放了一点，但是又带着点其它炫耀的动画，其实也是通过旋转、偏移等动画组合的效果。看看动画具体的实现，
1、进入的动画

/**
         * 缩放xy，但是y缩放的比例比较小
         */
        ObjectAnimator fViewScaleXAnim=ObjectAnimator.ofFloat(this,"scaleX",1.0f,0.8f);
        fViewScaleXAnim.setDuration(350);
        ObjectAnimator fViewScaleYAnim=ObjectAnimator.ofFloat(this,"scaleY",1.0f,0.9f);
        fViewScaleYAnim.setDuration(350);

        /**
         * 重点特效
         * 通过x的双重旋转
         */
        ObjectAnimator fViewRotationXAnim = ObjectAnimator.ofFloat(this, "rotationX", 0f, 10f);
        fViewRotationXAnim.setDuration(200);
        ObjectAnimator fViewResumeAnim = ObjectAnimator.ofFloat(this, "rotationX", 10f, 0f);
        fViewResumeAnim.setDuration(150);
        fViewResumeAnim.setStartDelay(200);

        /**
         * y需要的偏移量
         */
        ObjectAnimator fViewTransYAnim=ObjectAnimator.ofFloat(this,"translationY",0,-0.01f* height);
        fViewTransYAnim.setDuration(350);

2、退出的动画（退出动画是和进入动画相反的）

 ObjectAnimator fViewScaleXAnim=ObjectAnimator.ofFloat(this,"scaleX",0.8f,1.0f);
        fViewScaleXAnim.setDuration(350);
        ObjectAnimator fViewScaleYAnim=ObjectAnimator.ofFloat(this,"scaleY",0.9f,1.0f);
        fViewScaleYAnim.setDuration(350);

        ObjectAnimator fViewRotationXAnim = ObjectAnimator.ofFloat(this, "rotationX", 0f, 10f);
        fViewRotationXAnim.setDuration(200);
        ObjectAnimator fViewResumeAnim = ObjectAnimator.ofFloat(this, "rotationX", 10f, 0f);
        fViewResumeAnim.setDuration(150);
        fViewResumeAnim.setStartDelay(200);

        ObjectAnimator fViewTransYAnim=ObjectAnimator.ofFloat(this,"translationY",-0.01f* height,0);
        fViewTransYAnim.setDuration(350);

2、下面开始封装开发我们的ShopAnimatorView（仿淘宝购物车动画View）

ShopAnimatorView.java
package com.flyjun.shopanimator.view;

import android.animation.Animator;
import android.animation.Animator.AnimatorListener;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.WindowManager;
import android.widget.RelativeLayout;

public class ShopAnimatorView extends RelativeLayout{

    private int width;
    private int height;

    private AnimatorSet showAnim;
    private AnimatorSet hiddenAnim;

    private onShopAnimatorListener shopAnimatorListener;

    public ShopAnimatorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
        this.init();
    }

    public ShopAnimatorView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        this.init();
    }

    public ShopAnimatorView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        this.init();
    }

    /**
     * 初始化操作
     */
    private void init(){

        WindowManager wm = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);

        width = wm.getDefaultDisplay().getWidth();
        height = wm.getDefaultDisplay().getHeight();

        initShowAnim();
        initHiddenAnim();

    }

    /**
     * 进场动画
     */
    private void initShowAnim(){

        /**
         * 缩放xy，但是y缩放的比例比较小
         */
        ObjectAnimator fViewScaleXAnim=ObjectAnimator.ofFloat(this,"scaleX",1.0f,0.8f);
        fViewScaleXAnim.setDuration(350);
        ObjectAnimator fViewScaleYAnim=ObjectAnimator.ofFloat(this,"scaleY",1.0f,0.9f);
        fViewScaleYAnim.setDuration(350);

        /**
         * 重点特效
         * 通过x的双重旋转
         */
        ObjectAnimator fViewRotationXAnim = ObjectAnimator.ofFloat(this, "rotationX", 0f, 10f);
        fViewRotationXAnim.setDuration(200);
        ObjectAnimator fViewResumeAnim = ObjectAnimator.ofFloat(this, "rotationX", 10f, 0f);
        fViewResumeAnim.setDuration(150);
        fViewResumeAnim.setStartDelay(200);

        /**
         * y需要的偏移量
         */
        ObjectAnimator fViewTransYAnim=ObjectAnimator.ofFloat(this,"translationY",0,-0.01f* height);
        fViewTransYAnim.setDuration(350);


        showAnim=new AnimatorSet();
        showAnim.playTogether(fViewScaleXAnim,fViewRotationXAnim,fViewResumeAnim,fViewTransYAnim,fViewScaleYAnim);

        /**
         * 动画开始时可以 显示弹出层
         */
        showAnim.addListener(new AnimatorListener() {

            @Override
            public void onAnimationStart(Animator animation) {
                // TODO Auto-generated method stub
                if(shopAnimatorListener != null){
                    shopAnimatorListener.onShowView();
                }
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationCancel(Animator animation) {
                // TODO Auto-generated method stub

            }
        });

    }

    /**
     * 退出动画
     */
    private void initHiddenAnim(){
        ObjectAnimator fViewScaleXAnim=ObjectAnimator.ofFloat(this,"scaleX",0.8f,1.0f);
        fViewScaleXAnim.setDuration(350);
        ObjectAnimator fViewScaleYAnim=ObjectAnimator.ofFloat(this,"scaleY",0.9f,1.0f);
        fViewScaleYAnim.setDuration(350);

        ObjectAnimator fViewRotationXAnim = ObjectAnimator.ofFloat(this, "rotationX", 0f, 10f);
        fViewRotationXAnim.setDuration(200);
        ObjectAnimator fViewResumeAnim = ObjectAnimator.ofFloat(this, "rotationX", 10f, 0f);
        fViewResumeAnim.setDuration(150);
        fViewResumeAnim.setStartDelay(200);

        ObjectAnimator fViewTransYAnim=ObjectAnimator.ofFloat(this,"translationY",-0.01f* height,0);
        fViewTransYAnim.setDuration(350);

        hiddenAnim=new AnimatorSet();
        hiddenAnim.playTogether(fViewScaleXAnim,fViewRotationXAnim,fViewResumeAnim,fViewTransYAnim,fViewScaleYAnim);

        /**
         * 动画开始时可以 关闭弹出层
         */
        hiddenAnim.addListener(new AnimatorListener() {

            @Override
            public void onAnimationStart(Animator animation) {
                // TODO Auto-generated method stub
                if(shopAnimatorListener != null){
                    shopAnimatorListener.onCancelView();
                }
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationCancel(Animator animation) {
                // TODO Auto-generated method stub

            }
        });

    }

    /**
     * 开始进入动画
     */
    public void startShowAnim(){
        showAnim.start();
    }

    /**
     * 开始退出动画
     */
    public void startHiddenAnim(){
        hiddenAnim.start();
    }

    /**
     * 设置什么显示弹出层和关闭弹出层的监听器
     */
    public void setOnShopAnimatorListener(onShopAnimatorListener shopAnimatorListener){
        this.shopAnimatorListener=shopAnimatorListener;
    }

    public interface onShopAnimatorListener{
        public void onShowView();
        public void onCancelView();
    }

}

3、弹出层的封装（实现用的是dialog）

ShopAnimatorDialog.java
package com.flyjun.shopanimator.view;

import com.flyjun.shopanimator.R;

import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

public abstract class ShopAnimatorDialog extends Dialog{

    private Context context;

    private ShopAnimatorView shopAnimatorView;

    public ShopAnimatorDialog(Context context,ShopAnimatorView shopAnimatorView) {
        super(context);
        // TODO Auto-generated constructor stub
        this.context=context;
        this.shopAnimatorView=shopAnimatorView;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub

        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        init();

    }

    private void init(){

        /**
         * 弹出的动画
         */
        getWindow().setWindowAnimations(R.style.MyDialogAnimation);

        setCanceledOnTouchOutside(false);

        /**
         * 设置在dialog关闭时恢复动画
         */
        this.setOnCancelListener(new OnCancelListener() {

            @Override
            public void onCancel(DialogInterface dialog) {
                // TODO Auto-generated method stub
                shopAnimatorView.startHiddenAnim();
            }
        });

        setContentView(getContentView());

        android.view.WindowManager.LayoutParams ll=getWindow().getAttributes();
        ll.width=WindowManager.LayoutParams.MATCH_PARENT;
        ll.gravity=Gravity.BOTTOM;
        getWindow().setAttributes(ll);

    }

    /**
     * 返回ContentView（视图view）
     * @return
     */
    public abstract View getContentView();

    public void showDialog(){
        if(!isShowing()){
            show();
        }
    }

    public void cancelDialog(){
        if(isShowing()){
            cancel();
        }
    }
}

弹出层动画

<style name="MyDialogAnimation">
        <!--进入 -->
        <item name="android:windowEnterAnimation">@anim/dialog_enter_anim</item>
        <!--退出-->
        <item name="android:windowExitAnimation">@anim/dialog_exit_anim</item>
    </style>
dialog_enter_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <translate
        android:fromYDelta="100%"
        android:toYDelta="0"
        android:duration="300"></translate> 
</set> 
dialog_exit_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <translate
        android:fromYDelta="0"
        android:toYDelta="100%"
        android:duration="300"/> 
</set>

4、demo代码，测试的代码就变得简单了
主view的布局

<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:background="@android:color/background_dark"
    >

    <com.flyjun.shopanimator.view.ShopAnimatorView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/shopLayout"
        android:background="@android:color/white">

        <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello" 
        android:textSize="20sp"
        />

         <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="加入购物车" 
        android:id="@+id/add"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"/>

    </com.flyjun.shopanimator.view.ShopAnimatorView>



</RelativeLayout>

MainActivity.java
package com.flyjun.shopanimator;

import com.flyjun.shopanimator.view.ShopAnimatorView;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends Activity {

    private ShopAnimatorView shopAnimatorView;

    private TestDialog testDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 隐藏标题栏
                requestWindowFeature(Window.FEATURE_NO_TITLE);
                // 隐藏状态栏
                getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                        WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(R.layout.activity_main);

        this.shopAnimatorView=(ShopAnimatorView) findViewById(R.id.shopLayout);

        this.testDialog=new TestDialog(this, shopAnimatorView);

        findViewById(R.id.add).setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                shopAnimatorView.startShowAnim();
                testDialog.showDialog();
            }
        });

    }

    @Override
    public void onBackPressed() {
        // TODO Auto-generated method stub
//      super.onBackPressed();

//      shopAnimatorView.startHiddenAnim();
        testDialog.cancelDialog();
    }

}

测试的弹出层

TestDialog.java
package com.flyjun.shopanimator;

import com.flyjun.shopanimator.view.ShopAnimatorDialog;
import com.flyjun.shopanimator.view.ShopAnimatorView;

import android.content.Context;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.WindowManager;

public class TestDialog extends ShopAnimatorDialog{

    public TestDialog(Context context, ShopAnimatorView shopAnimatorView) {
        super(context, shopAnimatorView);
        // TODO Auto-generated constructor stub
    }

    @Override
    public View getContentView() {
        // TODO Auto-generated method stub
        return View.inflate(getContext(), R.layout.test_dialog, null);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);

        findViewById(R.id.close).setOnClickListener(new android.view.View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                cancelDialog();
            }
        });
    }

}

仿淘宝购物车动画完成，厉害了Flyjun哥！！！

通过ShopAnimatorView的封装和ShopAnimatorDialog弹出层的封装，对于不同的业务和界面都可以轻松的实现了

Flyjun-android
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android仿淘宝购物车
lxfeng1098751554的专栏
12-17 984
最近项目需要实现类似淘宝购物车的功能，仿了一个,直接上代码：public class MainActivity extends Activity implements OnCartListener, View.OnClickListener { private static final boolean DEBUG = true; private static final String
Android实现的仿淘宝购物车demo示例
09-02
在Android开发中，仿淘宝购物车的实现是一个典型的案例，涉及到UI设计、数据管理以及用户交互等多个方面。这里我们将深入探讨如何使用ListView组件来构建一个功能完备的购物车系统。 首先，ListView是Android中用于...
Android 仿淘宝购物车的实现
01-29
实现了购物车中商品按照店铺分类显示的 也就是淘宝购物车的显示方式。 全选 反选 数量增加 总价增加等功能 效果请看 http://blog.csdn.net/u014061684/article/details/50608588
【安卓】仿淘宝购物车
虚无之地
11-03 5985
下载地址：https://github.com/joefei/ShoppingCart 界面效果图：
推荐开源项目：ElemeShoppingView - 轻松实现购物车动画效果
最新发布
gitblog_00015的博客
05-18 378
推荐开源项目：ElemeShoppingView - 轻松实现购物车动画效果 项目地址:https://gitcode.com/JeasonWong/ElemeShoppingView 1、项目介绍 ElemeShoppingView 是一个灵感来源于知名电商应用饿了么的酷炫购物车效果库。它提供了一个简单易用的方式来在你的Android应用中添加类似饿了么的购物加减动画，让用户的交互体验更加生动有...
android添加购物车动画、天气应用、渐变状态栏、文件选择器等源码
ld11620967的博客
12-05 614
Android精选源码支持无限轮播的广告控件，提供gif动图支持。android使用SVGAPlayer播放动画源码Android添加购物车动画Android 仿酷欧天气应用源码一个Android 轻量级简单易用的Log组件工具文件路径选择器android状态栏一体化渐变效果源码Android 写股票走势图一个开源的GitHub Android客户端，快速简洁androidMD风格的地址选择器源码
简要模仿淘宝购物车功能
weixin_34336526的博客
03-28 254
一主要功能： 实现通过点击、拖动添加购物车，购物金额自动结算，以及删减物品的功能。 有待改进之处：还未实现在购物车内实现+1，-1功能。 二、效果图 三、相关代码 1,HTML+JS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模仿...
Android仿淘宝Demo
09-26
此项目是仿淘宝做的一个Demo应用，只作为技术学习使用，不做任何商业用途，请勿使用此项目进行任何形式的商业活动。 下面是本项目中主要实现的功能： 1:商品的基本展示 2：二维码扫描 3：刮刮乐功能 4：购物车...
Android 高仿淘宝购物车界面功能
05-18
在Android开发中，创建一个高仿淘宝购物车界面是一项具有挑战性的任务，它涉及到许多关键技术和组件的集成。淘宝购物车界面通常包含商品列表、数量调整、选中状态、总价计算以及添加到订单等核心功能。下面将详细...
Android 仿淘宝购物车
10-20
在Android应用开发中，"Android 仿淘宝购物车"是一个常见的项目实践，旨在模拟和实现类似于淘宝购物车的功能。这个项目通常涉及到多个关键知识点，包括数据结构、UI设计、事件处理以及状态管理等。以下是对这些知识...
Android-ShoppingCart一个Android实现购物车页面及购物车效果(点击动画)
08-13
ShoppingCart一个Android实现购物车页面及购物车效果(点击动画)
购物车添加动画实现
07-30
此项目包含Adapter在Activity中的调用和封装后的调用实例
仿淘宝购物车，多层订单
02-05
一个简单的多层购物车结构demo，主要使用了BaseRecyclerViewAdapterHelper和RecycleView，简单易懂，代码量少
android 购物车动画,Android实现炫酷的购物车动画
weixin_33954023的博客
05-26 338
/***运动的控件** @return*/public Bitmap getAddDrawBitMap() {ImageView text = new ImageView(context);//运动的控件，样式可以自定义text.setBackgroundResource(R.drawable.xiaohongdian_shangping);return convertViewToBitmap(t...
仿淘宝购物车
06-30 555
activity_main<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_p
android飞入购物车效果,详解Android实现购物车页面及购物车效果(点击动画)
weixin_39740419的博客
05-25 569
本文介绍了Android实现购物车页面及购物车效果(点击动画)，分享给大家，具体如下：效果图如下：思路：(1)思考每个条目中的数字的更新原理。(2)购物车的动画效果。(3)购物清单怎么显示(这个我暂时没有写，如果需要的话，可以在我的简书下给我留言)。1.因为进入页面，所有的商品个数都显示为零，所以我用 ArrayList> data，把商品集合都附上零：//下面把data都添加0，为了刚开始...
android 仿淘宝购物车
06-07
关于Android仿淘宝购物车，可以参考以下步骤： 1. 利用RecyclerView展示购物车列表，可以考虑使用Adapter模式设计购物车列表的数据源。 2. 在购物车列表中，每个商品条目需要展示商品图片、商品名称、商品价格、...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值