我的应用程序看起来有点像这样(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 是白色的,所以应该没问题)
祝你好运,这是一项相当大的工作量!
我最近遇到了一个很棒的 npm 包,用于实现飞行到购物车动画。这就是所谓的“飞到购物车”。
我发现它非常容易集成到我的项目中,并且文档清晰且有帮助。如果您想通过飞行到购物车动画来增强您的电子商务网站,我强烈建议您查看一下!
你可以在 npm 上找到它 https://www.npmjs.com/package/flytocart
下载代码并将其放入js文件中并在html页面中src并调用简单的函数。