如何在 android 中创建 'add to cart' 动画？

Question

我的应用看起来有点像这样 (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>

提前致谢！

Answer 1

理论上，我会尝试这样的想法：

有 2 个 ImageView：一个在您的 RecyclerView 中，另一个在与 FAB 相同的层次级别（在 xml 布局中）。隐藏第二个。
当产品被点击时，将你点击的图片的位图复制到第二个ImageView中
检索产品图像相对于 FAB 容器的 X 和 Y——递归地获取其父视图的 getX 和 getY，直到进入父视图（不要忘记删除RecyclerView 中的 scrollX 和 scrollY）
将您的第二张图片放到检索到的 X 和 Y 中
等待您的图像被布局 (getViewTreeObserver().addOnPredrawListener()) 并应用动画将其移动到 FAB 的中心。您将需要缩小图像并进行翻译（获取 FAB 的 x 和 y 以了解您的目的地）
添加一个在 FAB 顶部显示 +1 的 onAnimationEndListener
对+1视图应用向下翻译动画（+1将绘制在FAB的顶部，但由于图标和+1是白色的，所以应该没问题）

祝你好运，工作量很大！

Answer 2

请检查，我认为这可以更好地帮助你

link fly to cart animation

如何在 android 中创建 'add to cart' 动画？

How to create an 'add to cart' animation in android?

animation

android

android-animation