三种动画对比(frame/transform/snapkit)

今天调研一下 移动、缩放动画,分别使用 frame / snapkit / transform 三种方式的实现方式。

=============================

结论:

不同动画不同场景适合的技术是不一样的,最好对三种动画都熟悉掌握,开发起来应对不同场景,事半功倍~

缩放动画:

特别是子视图比较多的情况下,用transform 事半功倍,简单许多。

transform > (frame = snapkit)

移动动画:

snapkit动画比较方便,只需更改一个视图位置,其他跟它关联的视图就自动更改了。

snapkit > (transform = frame)

=============================

核心代码:

下面是针对三个UIView做的动画

层级关系是:
        self.view.addSubview(view1)
        view1.addSubview(view2)
        self.view.addSubview(view3)
        
        view3依赖于view1的位置布局

缩放动画代码如下:

transform (*****)

    // MARK: - 缩放
    func zoomAction() {
        self.view1.transform = .identity
        self.view1.setCustomAnchorPoint(anchorP: CGPoint(x: 1.0, y: 1.0))
        UIView.animate(withDuration: 3) {
            self.view1.transform = CGAffineTransform.init(scaleX: 0.01, y: 0.01)
        } completion: { _ in
            self.view1.setCustomAnchorPoint()
            self.view1.isHidden = true
        }
    }

frame (**)

// MARK: - 缩放
    func zoomAction() {
        UIView.animate(withDuration: 3) {
            self.view1.frame = CGRect(x: 10 + 200, y: 100 + 200, width: 0, height: 0)
            self.view2.frame = CGRect(x: 10, y: 10, width: 0, height: 0)
        } completion: { _ in
            
        }
    }

snapkit (*)

    // MARK: - 缩放
    func zoomAction() {
        self.view.layoutIfNeeded()
        UIView.animate(withDuration: 3) {
            self.view1.snp.updateConstraints { (make) in
                make.left.equalToSuperview().offset(10 + 200)
                make.top.equalToSuperview().offset(100 + 200)
                make.width.height.equalTo(0)
            }
            self.view2.snp.updateConstraints { (make) in
                make.left.equalToSuperview().offset(10)
                make.top.equalToSuperview().offset(10)
                make.width.height.equalTo(0)
            }
            self.view.layoutIfNeeded()
        } completion: { _ in
            
        }
    }

移动动画代码如下:

snapkit (****)

        // MARK: - 移动
    func moveAction() {
        self.view.layoutIfNeeded()
        UIView.animate(withDuration: 3) {
            self.view1.snp.updateConstraints { (make) in
                make.left.equalToSuperview().offset(10 + 50)
                make.top.equalToSuperview().offset(100 + 50)
            }
            self.view.layoutIfNeeded()
        } completion: { _ in
            
        }
    }

transform (**)

   // MARK: - 移动
    func moveAction() {
        self.view1.transform = .identity
        self.view3.transform = .identity
        UIView.animate(withDuration: 3) {
            self.view1.transform = CGAffineTransform.init(translationX: 50, y: 50)
            self.view3.transform = CGAffineTransform.init(translationX: 50, y: 50)
        } completion: { _ in
        }
    }

frame (**)

// MARK: - 移动
    func moveAction() {
        UIView.animate(withDuration: 3) {
            self.view1.frame = CGRect(x: 10 + 50, y: 100 + 50, width: 200, height: 200)
            self.view3.frame = CGRect(x: self.view1.left, y: self.view1.bottom + 10, width: 100, height: 100)
        } completion: { _ in
            
        }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 CALayer IOS SDK详解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi阅读 10,578评论 3 23
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 7,655评论 0 10
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    lisx_阅读 4,485评论 0 0
  • Core Animation是直接作用在CALayer上的(并非UIView上)非常强大的跨Mac OS X和iO...
    阳明AI阅读 5,107评论 0 8
  • 推荐指数: 6.0 书籍主旨关键词:特权、焦点、注意力、语言联想、情景联想 观点: 1.统计学现在叫数据分析,社会...
    Jenaral阅读 11,017评论 0 5