如何在Android中创建“添加到购物车”动画？

概述我的应用看起来像这样(https://dribbble.com/shots/2189587-Add-to-cart)我想将产品的快照类似地移到下面的购物车中.我之前从未接触过动画,因此我要花一点时间来理解这一点.为了回答您的问题,假定产品图像位于ImageView中,而购物车按钮是右下角的浮动 *** 作按钮.我的页面代码在这

我的应用看起来像这样(https://dribbble.com/shots/2189587-Add-to-cart)

我想将产品的快照类似地移到下面的购物车中.我之前从未接触过动画,因此我要花一点时间来理解这一点.

为了回答您的问题,假定产品图像位于ImageVIEw中,而购物车按钮是右下角的浮动 *** 作按钮.

我的页面代码在这里：

<?xml version="1.0" enCoding="utf-8"?><layout xmlns:app="http://schemas.androID.com/apk/res-auto"    xmlns:tools="http://schemas.androID.com/tools"    xmlns:androID="http://schemas.androID.com/apk/res/androID">    <data>        <variable name="product" type="com.example.irtazasafi.ilovezappos.Result"/>    </data><linearLayout    androID:layout_wIDth="fill_parent"    androID:layout_height="fill_parent"    androID:orIEntation="vertical"    androID:weightSum="1"    androID:background="@color/cardvIEw_light_background"    androID:gravity="center"><ImageVIEw    androID:layout_wIDth="fill_parent"    androID:layout_height="50dp"    androID:background="@color/cardvIEw_light_background"    androID:src="@mipmap/zappos"    androID:textAlignment="center"/><TextVIEw    androID:layout_wIDth="fill_parent"    androID:layout_height="wrap_content"    androID:text="@{product.getProductID()}"    androID:textAlignment="center" /><androID.support.design.Widget.CoordinatorLayout    androID:ID="@+ID/test"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content">   <TextVIEw       androID:layout_wIDth="wrap_content"       androID:layout_height="wrap_content"       androID:text="@{product.getPercentOff()}"       androID:textSize="20sp"       androID:layout_marginRight="250dp"       androID:textcolor="@color/colorAccent"       androID:ID="@+ID/discountAmount"/></androID.support.design.Widget.CoordinatorLayout><ImageVIEw    androID:layout_wIDth="200dp"    androID:layout_height="200dp"    androID:layout_margintop="10dp"    androID:ID="@+ID/productimage"    androID:scaleType="centerCrop"    androID:backgroundTint="@color/cardvIEw_light_background"    androID:background="@color/cardvIEw_light_background" /><TextVIEw    androID:layout_margintop="5dp"    androID:layout_wIDth="fill_parent"    androID:layout_height="43dp"    androID:background="?androID:attr/colorPrimary"    androID:text="@{product.getBrandname()}"    androID:textcolor="@androID:color/black"    androID:textSize="35sp"    androID:textAlignment="center"/><TextVIEw    androID:layout_margintop="0dp"    androID:layout_wIDth="fill_parent"    androID:layout_height="wrap_content"    androID:background="?androID:attr/colorPrimary"    androID:text="@{product.getProductname()}"    androID:textcolor="@androID:color/black"    androID:textSize="15sp"    androID:textAlignment="center"/><TextVIEw    androID:layout_margintop="0dp"    androID:layout_wIDth="fill_parent"    androID:layout_height="25dp"    androID:background="?androID:attr/colorPrimary"    androID:text="@{product.getoriginalPrice()}"    androID:textcolor="@androID:color/black"    androID:textSize="20sp"    androID:textAlignment="center"    androID:ID="@+ID/origPrice"/><TextVIEw    androID:layout_margintop="0dp"    androID:layout_wIDth="fill_parent"    androID:layout_height="25dp"    androID:background="?androID:attr/colorPrimary"    androID:text="@{product.getPrice()}"    androID:textcolor="@androID:color/black"    androID:textSize="15sp"    androID:textAlignment="center"    androID:ID="@+ID/currPrice"/>    <androID.support.design.Widget.CoordinatorLayout        androID:ID="@+ID/main_content"        androID:layout_wIDth="match_parent"        androID:layout_height="match_parent">        <androID.support.design.Widget.floatingActionbutton            androID:layout_wIDth="54dp"            androID:layout_height="54dp"            androID:layout_gravity="bottom|right"            androID:src="@mipmap/ic_add_shopPing_cart_black_24dp"            androID:layout_marginBottom="40dp"            androID:layout_marginRight="30dp"            app:backgroundTint="@androID:color/holo_blue_light"            androID:ID="@+ID/cartadd"            androID:onClick="addToCart"/>    </androID.support.design.Widget.CoordinatorLayout></linearLayout>layout>

提前致谢！

解决方法:

从理论上讲,我会尝试以下方式：

>有2个ImageVIEw：一个在您的RecyclerVIEw中,另一个在与FAB相同的层次结构级别上(在xml布局中).隐藏第二个.
>单击产品后,将单击的图像的位图复制到第二个ImageVIEw中
>相对于FAB容器检索产品图像的X和Y-递归在其父视图中获取视图的getX和getY,直到您在父视图中为止(不要忘记在RecyclerVIEw中删除scrollX和scrollY)
>将您的第二张图片放置到检索到的X和Y位置
>等待图像进行布局(getVIEwTreeObserver().addOnPredrawListener()),然后应用动画将其移动到FAB的中心.您将需要按比例缩小图像并将其转换(获取FAB的x和y即可知道目的地)
>添加一个onAnimationEndListener,它在FAB顶部显示1
>将向下转换动画应用于1视图(1将绘制在FAB的顶部,但是由于图标和1是白色的,应该没问题)

祝你好运,这是相当多的工作！

总结

以上是内存溢出为你收集整理的如何在Android中创建“添加到购物车”动画？全部内容，希望文章能够帮你解决如何在Android中创建“添加到购物车”动画？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。