美文网首页
Swift添加商品到购物车动画

Swift添加商品到购物车动画

作者: 玉思盈蝶 | 来源:发表于2020-07-08 10:25 被阅读0次

点击cell里+按钮加到右上角圆图购物车。

效果图如下:

image.png

代码如下:

extension AddShopCartController: UITableViewDelegate,UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "addShopCartIdentifier", for: indexPath) as! AddShopCartCell
        cell.indexpath = indexPath
        cell.clickAction = { (index) in
            /*
             [viewB convertRect:viewC.frame toView:viewA];计算viewB上的viewC相对于viewA的frame
             [viewC convertRect:viewB.frame fromView:viewA];计算viewA上的viewB相对于viewC的frame
             */
            let rect = cell.convert(cell.addButton.frame, to: self.view)
            print(rect)
            self.addAnimation(rect: rect)
        }
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }
    
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 0.01
    }
    
    func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        return 0.01
    }
}
extension AddShopCartController: CAAnimationDelegate {
    
    func addAnimation(rect: CGRect) {
        
        autoreleasepool{
            let squr = UIView()
            squr.backgroundColor = UIColor.red
            squr.frame = CGRect(x: 0, y: 0, width: 23, height: 23)
            squr.layer.cornerRadius = 23/2
            squr.layer.masksToBounds = true
            self.view.insertSubview(squr, aboveSubview: self.tableview)
            self.viewArray.append(squr)

        }
        let lastSquar = self.viewArray.last
        let path =  CGMutablePath()
        let beginPoint = CGPoint(x: rect.origin.x + rect.size.width / 2, y: rect.origin.y + rect.size.height / 2)
        
        path.move(to: beginPoint)
        
        path.addQuadCurve(to:self.cartBtn1.center,  control: CGPoint(x: 150, y: rect.origin.y))
        //获取贝塞尔曲线的路径
        let animationPath = CAKeyframeAnimation.init(keyPath: "position")
        animationPath.path = path
        animationPath.rotationMode = CAAnimationRotationMode.rotateAuto
        
        //缩小图片到0
        let scale:CABasicAnimation = CABasicAnimation()
        scale.keyPath = "transform.scale"
        scale.toValue = 0.5
        
        //组合动画
        let animationGroup:CAAnimationGroup = CAAnimationGroup()
        animationGroup.animations = [animationPath,scale];
        animationGroup.duration = 0.8;
        animationGroup.fillMode = CAMediaTimingFillMode.forwards;
        animationGroup.isRemovedOnCompletion = false
        animationGroup.delegate = self
        lastSquar!.layer.add(animationGroup, forKey:
            nil)
    }
    
    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        let redview = self.viewArray.first
        redview?.isHidden = true
        self.viewArray.remove(at: 0)
        
    }
}

重要点记录:

addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint)

在当前路径中追加一条二阶贝塞尔曲线
endPoint:终点
controlPoint:控制点

参考链接:

UIBezierPath贝塞尔曲线详解(swift):

https://www.jianshu.com/p/b203537f31af

swift 实现简单的添加购物车动画:

https://www.jianshu.com/p/b590518ce115

问题?

Swift里使用autoreleasepool是为啥?什么场景使用?

相关文章

  • Swift添加商品到购物车动画

    点击cell里+按钮加到右上角圆图购物车。 效果图如下: 代码如下: 重要点记录: 在当前路径中追加一条二阶贝塞尔...

  • 添加商品到购物车动画

    添加商品到购物车的动画,网上很多是用的抛物线的思想来做,这是一种很好的思想,网上也有很多的demo和介绍,这里我介...

  • Android端 仿饿了么点餐页面

    已实现的功能 * 顶部嵌套滑动逻辑 * 分类和商品级联定位 * 添加购物车动画 * 购物车弹窗 * 点击商品后的上...

  • 8.购物车管理

    购物车管理模块是属于用户侧模块,主要有7个接口:添加商品到购物车、更新购物车商品数、移除购物车商品、查看购物车当中...

  • 添加购物车

    商品添加购物车; 先判断当前用户购物车是否存在该商品,若存在就更新当前用的购物车商品数量,若不存在,则新增该商品到...

  • 贝塞尔曲线的应用(二)

    购物车添加商品实现轨迹动画 先看下实现效果 分析下实现原理,起始点是添加按钮,购物车是结束点,我们把控制点的x坐标...

  • 加入购物车动画效果实现

    不知道大家有没有发现,主流的电商类APP添加商品到购物车时,都会伴随一个小的“添加”动画。你有没有想过它是怎么实现...

  • 购物车动画

    今天整理一下购物车动画,整理一下,方便以后使用.咱们定外卖的的时候,添加商品,可以看一个加入购物车的动画,下面就实...

  • 解决jquery animate动画效果出现的抖动

    起因:在做鼠标滑过商品缩略图,弹出“添加购物车”按钮的动画效果时,出现了动画闪烁的问题,后来发现是animate重...

  • Django+Vue打造购物网站(八)

    购物车、订单管理和远程调试 添加商品到购物车 trade/serializers.py trade/views.p...

网友评论

      本文标题:Swift添加商品到购物车动画

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