【iOS/动画】显式动画

最新推荐文章于 2022-12-12 18:30:59 发布
最新推荐文章于 2022-12-12 18:30:59 发布
阅读量364 收藏
点赞数
分类专栏： iOS 文章标签： ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013248706/article/details/113482711
版权

创建动画类（CABasicAnimation， CAKeyframeAnimation，CASpringAnimation）如下：

基础动画

CATransaction.begin()
self.layerView.backgroundColor = UIColor.green.cgColor
let baseanimation = CABasicAnimation()
baseanimation.keyPath = "backgroundColor" // 这个值为 keypath 的值
baseanimation.fromValue = UIColor.green.cgColor
baseanimation.toValue = UIColor.yellow.cgColor
baseanimation.isRemovedOnCompletion = false
baseanimation.fillMode = .forwards // 这个属性生效需要 isRemovedOnCompletion == false
// CATransaction.setDisableActions(true) // 关闭隐式动画
CATransaction.setAnimationDuration(3) // 默认 0.25s
let during = CATransaction.animationDuration()
print("during:\(during)")
layerView.add(baseanimation, forKey: "abc")
CATransaction.commit()
  • 为了实现动画结束后，颜色保持不变的另一种实现方式1
CATransaction.begin()
self.layerView.backgroundColor = UIColor.green.cgColor
let baseanimation = CABasicAnimation()
baseanimation.keyPath = "backgroundColor"
baseanimation.fromValue = UIColor.green.cgColor
CATransaction.setAnimationDuration(2)
let during = CATransaction.animationDuration()
print("during:\(during)")
layerView.backgroundColor = UIColor.yellow.cgColor
layerView.add(baseanimation, forKey: "animationBackground")
CATransaction.commit()

*为了实现动画结束后，颜色保持不变的另一种实现方式2

@objc func changeToGreen() {
        CATransaction.begin()
        self.layerView.backgroundColor = UIColor.green.cgColor
        let baseanimation = CABasicAnimation()
        baseanimation.keyPath = "backgroundColor"
        baseanimation.fromValue = UIColor.green.cgColor
        baseanimation.toValue = UIColor.yellow.cgColor
        CATransaction.setDisableActions(true)
        CATransaction.setAnimationDuration(2)
        let during = CATransaction.animationDuration()
        print("during:\(during)")
        baseanimation.delegate = self
        layerView.add(baseanimation, forKey: "animationBackground")
        CATransaction.commit()
}

func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
		CATransaction.begin()
     	// 如果不关闭这回出现两此从 green 变成 yellow 的动画
     	// 第二次为隐式动画
        CATransaction.setDisableActions(true)
        layerView.backgroundColor = UIColor.yellow.cgColor
        CATransaction.commit()
}

关键帧动画

基础使用方法-颜色变化

  @objc func changeToGreen() {
        CATransaction.begin()
        self.layerView.backgroundColor = UIColor.green.cgColor
        let baseanimation = CAKeyframeAnimation()
        baseanimation.keyPath = "backgroundColor"
        baseanimation.values = [UIColor.green.cgColor, UIColor.black.cgColor, UIColor.yellow.cgColor]
        CATransaction.setDisableActions(true)
        CATransaction.setAnimationDuration(2)
        let during = CATransaction.animationDuration()
        print("during:\(during)")
        baseanimation.delegate = self
        layerView.add(baseanimation, forKey: "animationBackground")
        CATransaction.commit()
    }

    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        CATransaction.begin()
        CATransaction.setDisableActions(true)
        layerView.backgroundColor = UIColor.yellow.cgColor
        CATransaction.commit()
    }

飞机飞行动画

private let layerView = CAShapeLayer()
@objc func changeToGreen() {
    // 画出飞机的线路
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    layerView.frame = view.frame
    layerView.path = getBezierPath().cgPath
    layerView.fillColor = UIColor.red.cgColor
    layerView.strokeColor = UIColor.blue.cgColor
    layerView.lineWidth = 3.0
    CATransaction.commit()
    // 飞机飞行的动画
    CATransaction.begin()
    let shipLayer = CALayer()
    shipLayer.frame = CGRect(x: 0, y: 0, width: 64, height: 64)
    shipLayer.position = CGPoint(x: 0, y: 150)
    shipLayer.contents = UIImage(named: "plane.png")?.cgImage
    view.layer.addSublayer(shipLayer)
    let animation = CAKeyframeAnimation()
    animation.keyPath = "position"
    animation.duration = 4.0
    animation.rotationMode = .rotateAuto // 根据飞行线路的切线改变飞机头的方向,苹果自带效果
    animation.fillMode = .forwards
    animation.isRemovedOnCompletion = false
    animation.path = getBezierPath().cgPath
    shipLayer.add(animation, forKey: "move")
    CATransaction.commit()
}

虚拟属性

没有显示的提供属性；如：考虑一个旋转的动画：如果想要对一个物体做旋转的动画，那就需要作用于transform属性，因为CALayer没有显式提供角度或者方向之类的属性，

// 飞机飞行的动画
CATransaction.begin()
let shipLayer = CALayer()
shipLayer.frame = CGRect(x: 150, y: 0, width: 64, height: 64)
shipLayer.position = CGPoint(x: 200, y: 150)
shipLayer.contents = UIImage(named: "plane.png")?.cgImage
view.layer.addSublayer(shipLayer)

let animation = CABasicAnimation()
animation.keyPath = "transform" // 虚拟属性
animation.duration = 4.0
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
animation.toValue = CATransform3DMakeRotation(CGFloat.pi, 0, 0, 1)
shipLayer.add(animation, forKey: "move")
CATransaction.commit()

另外一种实现方式：

CATransaction.begin()
let shipLayer = CALayer()
shipLayer.frame = CGRect(x: 150, y: 0, width: 64, height: 64)
shipLayer.position = CGPoint(x: 200, y: 150)
shipLayer.contents = UIImage(named: "plane.png")?.cgImage
view.layer.addSublayer(shipLayer)

let animation = CABasicAnimation()
animation.keyPath = "transform.rotation" // 虚拟属性
animation.duration = 4.0
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
animation.byValue = CGFloat.pi * 2
shipLayer.add(animation, forKey: "move")
CATransaction.commit()

用transform.rotation而不是transform做动画的好处如下：

  1. 我们可以不通过关键帧一步旋转多于180度的动画。
    可以用相对值而不是绝对值旋转（设置byValue而不是toValue）。
    可以不用创建CATransform3D，而是使用一个简单的数值来指定角度。
    不会和transform.position或者transform.scale冲突（同样是使用关键路径来做独立的动画属性）。
  2. transform.rotation属性有一个奇怪的问题是它其实并不存在。这是因为CATransform3D并不是一个对象，它实际上是一个结构体，也没有符合KVC相关属性，transform.rotation实际上是一个CALayer用于处理动画变换的虚拟属性。
  3. 你不可以直接设置transform.rotation或者transform.scale，他们不能被直接使用。当你对他们做动画时，Core Animation自动地根据通过CAValueFunction来计算的值来更新transform属性。
  4. CAValueFunction用于把我们赋给虚拟的transform.rotation简单浮点值转换成真正的用于摆放图层的CATransform3D矩阵值。你可以通过设置CAPropertyAnimation的valueFunction属性来改变，于是你设置的函数将会覆盖默认的函数。
  5. CAValueFunction看起来似乎是对那些不能简单相加的属性（例如变换矩阵）做动画的非常有用的机制，但由于CAValueFunction的实现细节是私有的，所以目前不能通过继承它来自定义。你可以通过使用苹果目前已近提供的常量（目前都是和变换矩阵的虚拟属性相关，所以没太多使用场景了，因为这些属性都有了默认的实现方式）。

动画组

CABasicAnimation和CAKeyframeAnimation仅仅作用于单独的属性，而CAAnimationGroup可以把这些动画组合在一起。CAAnimationGroup是另一个继承于CAAnimation的子类，它添加了一个animations数组的属性，用来组合别的动画。如下：

private let layerView = CAShapeLayer()

    @objc func changeToGreen() {
        // 画出飞机的线路
        CATransaction.begin()
        CATransaction.setDisableActions(true)
        layerView.frame = view.frame
        layerView.path = getBezierPath().cgPath
        layerView.fillColor = UIColor.red.cgColor
        layerView.strokeColor = UIColor.blue.cgColor
        layerView.lineWidth = 3.0
        CATransaction.commit()
        // 飞机飞行的动画
        CATransaction.begin()
        let shipLayer = CALayer()
        shipLayer.frame = CGRect(x: 150, y: 0, width: 64, height: 64)
        shipLayer.position = CGPoint(x: 200, y: 150)
        shipLayer.contents = UIImage(named: "plane.png")?.cgImage
        view.layer.addSublayer(shipLayer)

        let animation = CABasicAnimation()
        animation.keyPath = "transform.rotation" // 虚拟属性
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        animation.byValue = CGFloat.pi * 2

        let animation1 = CAKeyframeAnimation()
        animation1.keyPath = "position"
        animation1.rotationMode = .rotateAuto // 根据飞行线路的切线改变飞机头的方向,苹果自带效果
        animation1.fillMode = .forwards
        animation1.isRemovedOnCompletion = false
        animation1.path = getBezierPath().cgPath

        let group = CAAnimationGroup()
        group.animations = [animation, animation1]
        group.duration = 4.0
        shipLayer.add(group, forKey: "move")

        CATransaction.commit()
    }

    func getBezierPath() -> UIBezierPath {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addQuadCurve(to: CGPoint(x: 200, y: 50),
                          controlPoint: CGPoint(x: 100, y: 100))
        path.move(to: CGPoint(x: 200, y: 50))
        path.addQuadCurve(to: CGPoint(x: 400, y: 50),
                          controlPoint: CGPoint(x: 300, y: 150))
        return path
    }

过渡

  • 给层添加默认动画, 可以做图片替换的过渡动画
private let shipLayer = CALayer()
private var index = 0
    @objc func changeToGreen() {
        defer {
            index += 1
        }
        if index % 2 == 0 {
            shipLayer.contents = UIImage(named: "plane.png")?.cgImage
        } else {
            shipLayer.contents = UIImage(named: "ship.png")?.cgImage
        }
        view.layer.addSublayer(shipLayer)
        let transation = CATransition()
        transation.type = .reveal
        shipLayer.frame = CGRect(x: 150, y: 0, width: 64, height: 64)
        shipLayer.add(transation, forKey: "moveIn")
    }

以上为对图层树的动画

对于 tabbarcontroller 选择的时候做添加 CATransition 的动画会有意向不到的事情

CATransition并不作用于指定的图层属性，这就是说你可以在即使不能准确得知改变了什么的情况下对图层做动画，例如，在不知道UITableView哪一行被添加或者删除的情况下，直接就可以平滑地刷新它，或者在不知道UIViewController内部的视图层级的情况下对两个不同的实例做过渡动画。

自定义动画

  • 系统利用 CIFliter 等，做的一些动画。当然效果也可以自己根据上下文创建一个图片，然后根据需求做出自定义的一些动画
    let imageView = UIImageView()
    private var index = 0
    @objc func changeToGreen() {
        defer {
            index += 1
        }
        let image: UIImage?
        if index % 2 == 0 {
            image = UIImage(named: "plane.png")
        } else {
            image = UIImage(named: "ship.png")
        }
        UIView.transition(with: self.imageView, duration: 1.2, options: UIView.AnimationOptions.transitionCurlUp) {
            self.imageView.image = image
        } completion: { _ in

        }
    }
流沙包
关注
专栏目录
iOS核心动画
04-13
4. 显式动画（Explicit Animation）：开发者可以精确控制动画的开始、结束、持续时间以及动画曲线等，提供更丰富的动画体验。 5. 动画组合（Animation Composition）：通过组合多个动画，可以创建复杂的动画序列，...
iOS核心动画高级技巧（iOS Core Animation: Advanced Techniques）
03-23
隐式动画利用了Core Animation的默认动画行为，而显式动画则需要开发者明确指定动画的各个方面，例如动画类型、持续时间等。 8. 动画组合（Animation Groups）和过渡（Transitions）是创建复杂动画效果的技巧。动画...
CALayer的隐式动画
最新发布
weixin_46926959的博客
12-12 533
CALayer隐式动画
Core Animation笔记（动画）
weixin_30617797的博客
04-13 130
一.隐式动画 layer默认开启隐式动画 禁用隐式动画 [CATransaction setDisableActions:true]; 设置隐士动画时间 //默认0.25s [CATransaction setAnimationDuration:3.0]; //新启一个事务,防止对同一时间其他隐士动画产生影响 　　[CATra...
iOS-Core-Animation-Advanced-Techniques（四）
sunyazhou13的专栏
01-07 823
隐式动画和显式动画 隐式动画 按照我的意思去做，而不是我说的。 -- 埃德娜，辛普森 我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情。但是动画师Core Animation库一个非常显著的特性。这一章我们来看看它是怎么做到的。具体来说，我们先来讨论框架自动完成的隐式动画（除非你明确禁用了这个功能）。 事务 Core Animatio
iOS开发之让你的应用“动”起来(动画)
树上的男爵
10-22 1236
在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图，如何通过核心动画创建基础动画、关键帧动画、动画组、转场动画，如何通过UIView的装饰方法对这些动画操作进行简化等。在今天的文章里您可以看到动画操作在iOS中是如何简单和高效，很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单： C
iOS Core Animation---隐式动画
onebutterfly
03-27 4441
隐式动画这章我们介绍4个内容：事务、完成块、图层行为以及呈现与模型； 其实我们需要掌握的还有隐式动画的实现原理、UIKit怎样禁用了关联图层的隐式动画等等。一、隐式动画的理解 Core Animation基于一个假设，说屏幕上的任何东西都可以（或者可能）做动画。动画并不需要打开，相反需要明确地关闭，否则他会一直存在。当你改变CALayer的一个可做动画的属性，它并不能立刻在屏幕上体现出来。相反，
iOS 核心动画编程指南
08-16
动画（Animation）是整个指南的中心内容之一，介绍了动画类和时序、隐式动画和显式动画以及开始和结束显式动画的方法。隐式动画是系统根据属性的改变自动执行的动画效果，而显式动画则需要开发者明确指定动画的属性...
iOS 核心动画
05-31
隐式动画是系统默认的动画效果，而显式动画则需要开发者明确指定动画的属性和行为。同时，还介绍了如何开始和结束显式动画。 图层的行为部分讨论了行为对象的角色以及如何采用CAACTION协议。行为对象用于控制图层...
CAlayer层的隐式动画属性
11-20
CAlayer层的隐式动画属性
UITableView reloadData contentOffset被改变
JustinAelx的博客
07-31 784
UITableView调用reloadData后contentOffset会大概率的被改变，不是之前浏览的位置。
CALayer关闭隐式动画
wutao63的博客
06-04 4567
[CATransaction begin]; [CATransaction setDisableActions:YES]; self.myview.layer.position = CGPointMake(10, 10); [CATransaction commit];
Core Animation学习笔记一：CATransactions
weixin_30311605的博客
03-26 183
CATransaction 事务类,可以对多个layer的属性同时进行修改.它分隐式事务,和显式事务. 区分隐式动画和隐式事务：隐式动画通过隐式事务实现动画 。 区分显式动画和显式事务：显式动画有多种实现方式，显式事务是一种实现显式动画的方式。 1.隐式事务 除显式事务外,任何对于CALayer属性的修改,都是隐式事务.这样的事务会在run-loop中被提交. -(void)view...
iOS核心动画高级技巧(中)
chunqingtai2922的博客
06-24 128
隐式动画 Core Animation基于一个假设，说屏幕上的任何东西都可以做动画。动画并不需要你在Core Animation中手动打开，相反需要明确地关闭，否则它会一直存在，这其实就是所谓的隐式动画。 事务 实际上动画执行的时间取决于当前的事务设置，动画类型取决于图层行为。事务是...
去除Layer自带隐藏动画
diankuini1374的博客
06-04 515
在TableView的HeadView设置的时候（HeadView是刚刚创建和设置的），会出现很多不想看到的动画，此时可以增加代码去除这些动画 [CATransaction begin]; [CATransaction setDisableActions:YES]; /* 代码块 */ [CATransaction commit]; 转载于:https://w...
ios 关闭UICollectionview reload动画效果
ANDY_GUO_wei的专栏
11-29 1527
[CATransaction setDisableActions:YES]; [weakSelf.collectionView reloadSections:[NSIndexSet indexSetWithIndex:0]]; [CATransaction commit];
iOS 按钮set Enable or Disable
野草志
06-20 4673
在 .h 文件中：
猫猫学IOS（三十七）UI之CALayer
weixin_34267123的博客
05-07 101
猫猫分享，必须精品 原创文章，欢迎转载。转载请注明：翟乃玉的博客 地址：http://blog.csdn.net/u013357243?viewmode=contents CALayer 在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView。 其实UIView之所以能显示在屏幕上，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值