Android之实现京东底部添加到购物车的效果

转载请标明出处:
http://blog.csdn.net/hai_qing_xu_kong/article/details/50992567
本文出自：【顾林海的博客】

##前言
美好的双休日快要结束了，昨天玩了一天，今天在家看了一整天的书，大体看了网络框架搭建的一个流程，自己也试了下，有些小问题，还在研究中。用过京东APP的都知道在商品详情页底部有个添加到购物车的按钮，一点击就会将商品以抛物线的形式放入购物车中，今天给大家带来的就是类似购物车的效果。

##原理讲解

将上面效果拆分成两部分的话，就是抛物线+图片缩放，抛物线关键点就是获取Y坐标，这里直接套用网上的公式：

 /*** 这里是根据三个坐标点计算出来的抛物线方程* * @param x* @return*/private float getY(float x) {return a * x * x + 4 * x;}

整体的抛物线和缩放动画使用PropertyValuesHolder，达到同步播放的效果。

通过PropertyValuesHolder.ofKeyframe(“translationY”, keyframes);实现商品的向左平移的效果，这里面的keyframes是一个Keyframe对象的数组，看如下的整体取值：

Keyframe[] keyframes = new Keyframe[(int) count];final float keyStep = 1f / (float) count;float f = (float) (start_location[0] - end_location[0]) / count;float key = keyStep;for (int i = 0; i < count; ++i) {keyframes[i] = Keyframe.ofFloat(key, -i * f);key += keyStep;}

count是动画在执行过程中的步数，这里面拆分成300份，view在屏幕上向左平移时值为负数，因此Keyframe.ofFloat(key, -i * f)，这里面的f公式：

float f = (float) (start_location[0] - end_location[0]) / count;

sart_location[0]是获取的添加购物车按钮的X坐标，end_location[0]是购物车小图标的X坐标，相减得到按钮到购物车的距离，将距离进行平分，分成count份，因此通过for循环-i * f，进行向左的移动。

Y轴的平移，会发现先是向上平移（负数），平移到一半后，向下平移（正数），这样构成一个平滑的抛物线，通过上面的Y坐标的公式得出：

 key = keyStep;for (int i = 0; i < count; ++i) {keyframes[i] = Keyframe.ofFloat(key, -getY(i + 1));key += keyStep;}PropertyValuesHolder pvhY = PropertyValuesHolder.ofKeyframe("translationY", keyframes);

这时得到View进行抛物线移动时的X和Y坐标，接着会看到View的缩放，缩放代码如下：

PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("scaleX",1f, 0.5f);PropertyValuesHolder scaleY = PropertyValuesHolder.ofFloat("scaleY",1f, 0.5f);

最后通过：

mObjectAnimator = ObjectAnimator.ofPropertyValuesHolder(mShopView,pvhX, pvhY, scaleX, scaleY).setDuration(1500);

获取ObjectAnimator对象，进行start()就可动画的播放。

##如何应用到项目中

这里我创建了一个AnimUtils类，使用如下：

package com.example.addshowanimproject;import com.example.addshowanimproject.animutil.AnimUtils;
import com.example.addshowanimproject.inter.IAddShopListener;import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;public class MainActivity extends Activity {/*** 购物车小图标*/private ImageView iv_shop;/*** 添加到购物车按钮*/private LinearLayout ll_btn_add;private AnimUtils mAnimUtils;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViews();initEvent();}/*** View的初始化*/private void initViews(){iv_shop=(ImageView) findViewById(R.id.iv_shop);ll_btn_add=(LinearLayout) findViewById(R.id.ll_btn_add);}/*** 注册事件*/private void initEvent(){final ImageView imageView=new ImageView(this);imageView.setLayoutParams(new LayoutParams(30, 60));imageView.setImageResource(R.drawable.biancheng);ll_btn_add.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Log.i("TAG","onClick");if(mAnimUtils==null){mAnimUtils=new AnimUtils(MainActivity.this, ll_btn_add, iv_shop, imageView);}mAnimUtils.addShopCart(new IAddShopListener() {@Overridepublic void addSucess() {Toast.makeText(MainActivity.this, "添加了一个商品", Toast.LENGTH_SHORT).show();}});}});}}

代码很简单，AnimUtils的初始化，接着调用AnimUtils的addShopCart方法进行动画播放完毕的监听。

以下是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:background="@android:color/holo_blue_bright" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="60dp"android:layout_alignParentBottom="true"android:background="@android:color/white"android:orientation="horizontal" ><LinearLayoutandroid:layout_width="0dp"android:layout_height="60dp"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center"android:orientation="vertical" ></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="60dp"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center"android:orientation="vertical" ></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="60dp"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center"android:orientation="vertical" ><ImageViewandroid:id="@+id/iv_shop"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/shopping_cart" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="购物车"android:textColor="@android:color/black"android:textSize="12sp" /></LinearLayout><LinearLayoutandroid:id="@+id/ll_btn_add"android:layout_width="0dp"android:layout_height="60dp"android:layout_gravity="center_vertical"android:layout_weight="2"android:background="@android:color/holo_red_light"android:gravity="center"android:orientation="vertical" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="加入购物车"android:textColor="@android:color/white"android:textSize="18sp" /></LinearLayout></LinearLayout></RelativeLayout>

当然有些人会说，你这购物车图片在按钮旁边，那我如果在底部最左边呢？放心，一样可以支持，我们将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:background="@android:color/holo_blue_bright" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="60dp"android:layout_alignParentBottom="true"android:background="@android:color/white"android:orientation="horizontal" ><LinearLayoutandroid:layout_width="0dp"android:layout_height="60dp"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center"android:orientation="vertical" ><ImageViewandroid:id="@+id/iv_shop"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/shopping_cart" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="购物车"android:textColor="@android:color/black"android:textSize="12sp" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="60dp"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center"android:orientation="vertical" ></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="60dp"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center"android:orientation="vertical" ></LinearLayout><LinearLayoutandroid:id="@+id/ll_btn_add"android:layout_width="0dp"android:layout_height="60dp"android:layout_gravity="center_vertical"android:layout_weight="2"android:background="@android:color/holo_red_light"android:gravity="center"android:orientation="vertical" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="加入购物车"android:textColor="@android:color/white"android:textSize="18sp" /></LinearLayout></LinearLayout></RelativeLayout>

运行程序如下：

怎么样，是不是很方便。

以下是完整的github项目地址，欢迎star,fork。
github项目源码地址：点击【项目源码】

Android之实现京东底部添加到购物车的效果相关推荐

js添加到购物车动画效果实现
方法一: 用js控制购车的的位置实现原理解析: 通过js动态生成一个过度元素(就是一个可以移动的小球),并控制该元素的位置移动,从点击按钮dom元素移动到购物车的dom元素,实现添加到购物车的动态效 ...
android 层级边框,有没有一种简单的方法可以在Android视图的顶部和底部添加边框？...
有没有一种简单的方法可以在Android视图的顶部和底部添加边框? 我有一个TextView,我想沿其顶部和底部边框添加黑色边框. 我尝试将android:drawableTop和android:dr ...
Android把商品添加到购物车的动画效果（贝塞尔曲线）
当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点在起终点之间使用二次贝塞尔曲线填充起终点之间的点的 ...
Android Material Design ：LinearLayoutCompat添加分割线divider
Android Material Design :LinearLayoutCompat添加分割线divider Android Material Design 扩展支持包中的LinearLayo ...
android高仿京东快报（垂直循环滚动新闻栏）
的android高仿京东快报(垂直循环滚动新闻栏) 标签: 机器人 2016年3月20日03:08 2676阅读人评论(15)收藏举报分类: 机器人(71) 版权声明:本文为博主原创文章, ...
android导航栏自动弹出,解决android 显示内容被底部导航栏遮挡的问题
描述: 由于产品需求,要求含有EditText的界面全屏显示,最好的解决方式是使用AndroidBug5497Workaround.assistActivity(this) 的方式来解决,但是华为和魅 ...
(2019年10月更新) Android 最全的底部导航栏实现方法
本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 官方方法. 官方的 BottomNavigationActivity 使用Android studio 新建一个工程 ...
Android弹出自定义Dialog,android自定义Dialog实现底部弹窗
android自定义Dialog实现底部弹窗拿到这个需求,很多人都是直接想用popWindow 实现,但是这样的效果我们完全可以根据系统的Dialog 自定义一个. AlertDialog.Buil ...
Android中实现为TextView添加多个可点击的文本
这篇文章主要介绍了Android中实现为TextView添加多个可点击的文本,可实现类似Android社交软件显示点赞用户并通过用户名称进入该用户主页的功能,是非常实用的技巧,需要的朋友可以参考下.具 ...

Android之实现京东底部添加到购物车的效果

Android之实现京东底部添加到购物车的效果相关推荐

最新文章

热门文章