美文网首页高级UI
写了一个商城添加到购物车的2种动画(组合动画和贝塞尔曲线动画)

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

作者: 黄嘉颖 | 来源:发表于2019-12-11 13:44 被阅读0次

    分享一个商城添加到购物车的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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/lrdogctx.html