如何在android中创建“添加到购物车"动画? [英] How to create an 'add to cart' animation in android?
问题描述
我的应用看起来有点像这样 (https://dribbble.com/shots/2189587-加入购物车)
My app looks somewhat like this (https://dribbble.com/shots/2189587-Add-to-cart)
我想同样地将产品的快照移到下面的购物车中.我以前从未使用过动画，所以我有点难以理解这一点.
I want to similarly move a snapshot of the product into the cart below. I have never worked with animations before so I'm struggling a little bit to understand this.
对于您的答案，假设产品图片在 ImageView 中，而购物车按钮是右下角的浮动操作按钮.
For your answer, assume that the product image is in an ImageView and the cart button is a floating action button in the bottom right.
我的页面代码在这里:
提前致谢！
推荐答案
理论上，我会尝试一些想法:
Theoretically, I would try somethink like:
有 2 个 ImageView:一个在您的 RecyclerView 中，一个在与 FAB 相同的层次结构级别(在 xml 布局中).隐藏第二个.
Have 2 ImageView: one in your RecyclerView and one at the same hierarchy level than the FAB (in the xml layout). Hide the second one.
当产品被点击时，将你点击的图片的位图复制到第二个ImageView中
When the product is clicked, copy the bitmap of your clicked image into the second ImageView
检索相对于 FAB 容器的产品图像的 X 和 Y -- 在其父视图中递归 getX 和 getY，直到您在父视图中(不要忘记删除 scrollX 和 scrollY在 RecyclerView 中)
Retrieve the X and Y of your product image relative to your FAB container -- recursively getX and getY of your view in its parent until you're in the parent (don't forget to remove the scrollX and scrollY in the RecyclerView)
将您的第二张图片放在检索到的 X 和 Y 上
Place your second image to the X and Y retrieved
等待您的图像进行布局(getViewTreeObserver().addOnPredrawListener())并应用动画将其移动到 FAB 的中心.您需要缩小图像并进行翻译(获取 FAB 的 x 和 y 以了解您的目的地)
Wait for your image to be layout (getViewTreeObserver().addOnPredrawListener()) and apply the animation to move it to the center of the FAB. You will need to scale down the image and translate it (get the x and y of the FAB to know your destination)
添加一个在 FAB 顶部显示 +1 的 onAnimationEndListener
Add a onAnimationEndListener which display the +1 on top of the FAB
对 +1 视图应用向下平移动画(+1 将绘制在 FAB 的顶部，但由于图标和 +1 是白色的，所以应该没问题)
Apply a down translation animation to the +1 view (the +1 will be drawn on top of the FAB but since the icon and the +1 are white, it should be fine)
祝你好运，这是相当多的工作！
Good luck, that's a fair amount of work!
这篇关于如何在android中创建“添加到购物车"动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
