【问题标题】:How to create an 'add to cart' animation in android?如何在Android中创建“添加到购物车”动画?
【发布时间】:2017-06-24 02:02:41
【问题描述】:

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

提前致谢!

【问题讨论】:

    标签: android animation android-animation


    【解决方案1】:

    理论上,我会尝试这样的想法:

    1. 有 2 个 ImageView:一个在 RecyclerView 中,一个在与 FAB 相同的层次结构级别(在 xml 布局中)。隐藏第二个。

    2. 点击商品时,将点击图片的位图复制到第二个ImageView中

    3. 检索您的产品图像相对于您的 FAB 容器的 X 和 Y - 在其父级中递归地 getX 和 getY 直到您在父级中(不要忘记删除 scrollX 和 scrollY在 RecyclerView 中)

    4. 将第二张图片放在检索到的 X 和 Y 上

    5. 等待您的图像进行布局 (getViewTreeObserver().addOnPredrawListener()) 并应用动画将其移动到 FAB 的中心。您将需要缩小图像并对其进行翻译(获取 FAB 的 x 和 y 以了解您的目的地)

    6. 添加一个 onAnimationEndListener,在 FAB 顶部显示 +1

    7. 将向下平移动画应用于 +1 视图(+1 将绘制在 FAB 顶部,但由于图标和 +1 是白色的,应该没问题)

      李>

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

    【讨论】:

    • 特别适合程序员!
    【解决方案2】:

    请检查一下,我认为这可以更好地帮助您

    link fly to cart animation

    【讨论】:

    • 节省了很多时间,谢谢
    猜你喜欢
    • 1970-01-01
    • 2015-03-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多