写了一个商城添加到购物车的2种动画(组合动画和贝塞尔曲线动画)

分享一个商城添加到购物车的2种动画(组合动画和贝塞尔曲线动画)

github地址:https://github.com/yellowwing/ShoppingCarAnimation

先说第一种的组合动画,点击立即购买后,商品的图片会从cell的位置一边选择一边缩小一边移动到“我的”的位置,然后“我的”的item的badge会加1

先看效果图


效果图1
效果图2
效果图3
效果图4


这里的运动轨迹是直线的,代码先不说,具体去github下载我分享的demo看,这里主要说下面的贝塞尔曲线的运动轨迹

先看效果图:


效果图5
效果图5
效果图7
效果图8

它的运动轨迹是曲线的,并且会慢慢缩小,这是用到贝塞尔曲线和帧动画,再组合动画完成。

主要代码如下:


代码1

然后是创建贝塞尔曲线:


代码2


代码3


代码4

具体看github地址:https://github.com/yellowwing/ShoppingCarAnimation

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容