我们如何在商店中建立添加到收藏夹的动画
"I just want you to feel it"
"我只是想让你感受一下"
Jay Prince, from the song Feel It
杰伊-普林斯，来自歌曲《感觉》。
I use the word feeling a lot when working on animations and gestures. For example, animations or gestures sometimes feel right or wrong. I think about that word a lot because our experiences using software are based on an intuitive understanding of the real world. When you throw something in real life, it influences how you expect something on screen to behave after you drag and release it.
我在做动画和手势时经常使用感觉这个词。例如，动画或手势有时会感觉到正确或错误。我经常思考这个词，因为我们使用软件的经验是基于对现实世界的直观理解。当你在现实生活中扔东西时，它影响了你对屏幕上的东西在你拖动和释放后的行为的期望。
By putting work, love, and care into UI details and designs, we help shape the experience and feeling users have when using an app. All the technical details and work is in service of the user's experiences and feelings. The user may not consciously notice the subtle animations we create, but if we do our job well, the tiniest gesture will feel good to them.
通过在用户界面的细节和设计中投入工作、爱和关怀，我们帮助塑造了用户在使用一个应用程序时的体验和感觉。所有的技术细节和工作都是为了服务于用户的体验和感受。用户可能不会有意识地注意到我们创造的微妙的动画，但如果我们的工作做得好，最微小的手势也会让他们感觉良好。
The team working on Shop, our digital shopping assistant, recently released a feature that allows buyers to favorite products and shops. By pressing a heart button on a product, buyers can save those products for later. When they do, the product image drops into the heart icon (containing a list of favorite products) in the navigation tab at the bottom.
从事Shop工作的团队，即我们的数字购物助理，最近发布了一项功能，允许买家收藏产品和商店。通过在产品上按下心形按钮，买家可以将这些产品保存起来备用。当他们这样做时，产品图片就会落入底部导航标签中的心形图标（包含收藏产品的列表）。
In this post, I’ll show you how I approached implementing the Add to Favorite animation in Shopify’s Shop app. Specifically, we can look at the animation of the product image thumbnail appearing, then moving into the favorites tab bar icon:
在这篇文章中，我将向你展示我如何在Shopify的商店应用中实现添加到收藏夹的动画。具体来说，我们可以看看产品图片缩略图出现的动画，然后移动到收藏夹标签栏的图标。
Together, we'll learn:
我们将一起学习。
- How to sequence animations.
- 如何对动画进行排序。
- How to animate multiple properties at the same time.
- 如何在同一时间为多个属性制作动画。
- What interpolation is.
- ...