iOS 动画（一）

2020-06-23 本文已影响0人 gaookey

iOS 动画（一）
iOS 动画（二）

基于 UIView 的 transform 属性

缩放

该方法有两个参数，分别控制 UI 组件宽高的缩放比

button.transform = CGAffineTransform(scaleX: 0.5, y: 0.8)

旋转

rotationAngle 方法以弧度为单位进行旋转

button.transform = CGAffineTransform(rotationAngle: .pi / 4)

位移

设置当前位置相对于x、y轴移动了多少

button.transform = CGAffineTransform(translationX: -20, y: 50)

动画常用的属性

UIView.animate(withDuration: 0.25, delay: 2, options: UIView.AnimationOptions.repeat, animations: {
    
    self.button.transform = CGAffineTransform(translationX: -20, y: 50)
}) { (finish) in
    
}

withDuration: 动画时长

delay: 动画延迟执行时间间隔

AnimationOptions�：

layoutSubviews 子控件和父控件一起动画
allowUserInteraction 动画进行时，允许交互
beginFromCurrentState 从当前状态下开始动画
repeat 动画无限的重复
autoreverse 执行动画回路，前提是设置动画无限重复
overrideInheritedDuration 忽略外层动画嵌套的执行时间
overrideInheritedCurve 忽略外层动画嵌套的时间变化曲线
allowAnimatedContent 通过改变属性和重绘实现动画效果，如果key没有提交动画将使用快照
showHideTransitionViews 用显隐的方式替代添加移除图层的动画
overrideInheritedOptions 忽略嵌套继承的动画
curveEaseInOut 由慢到快的进入
curveEaseIn 由慢到特别快的进入
curveEaseOut 由快到慢的退出
curveLinear 匀速进入
transitionFlipFromLeft 从左边翻转动画
transitionFlipFromRight 从右边翻转动画
transitionCurlUp 向上翻书动画
transitionCurlDown 向下翻树动画
transitionCrossDissolve 交叉消失动画
transitionFlipFromTop 从上向下翻转动画
transitionFlipFromBottom 从下向上翻转动画
preferredFramesPerSecond60 每秒60帧的刷新频率动画
preferredFramesPerSecond30 每秒30帧的刷新频率动画

关键帧动画

简单的帧动画

UIView.animateKeyframes(withDuration: 2, delay: 0, options: UIView.KeyframeAnimationOptions.calculationModeLinear, animations: {
    
    self.button.transform = CGAffineTransform(translationX: -20, y: 50)
}) { (finish) in
    
}

KeyframeAnimationOptions：

layoutSubviews 子控件和父控件一起动画
allowUserInteraction 动画进行时，允许交互
beginFromCurrentState 从当前状态下开始动画
repeat 动画无限的重复
autoreverse 执行动画回路，前提是设置动画无限重复
overrideInheritedDuration 忽略外层动画嵌套的执行时间
overrideInheritedOptions 忽略外层动画嵌套的时间变化曲线
calculationModeLinear 在帧动画之间采用线性过渡
calculationModeDiscrete 在帧动画之间不过渡，直接执行各自动画
calculationModePaced 将不同帧动画的效果尽量融合为一个比较流畅的动画
calculationModeCubic 不同动画之间平滑过渡
calculationModeCubicPaced 帧动画平滑均匀动画

addKeyframe 方法

UIView.animateKeyframes(withDuration: 2, delay: 0, options: UIView.KeyframeAnimationOptions.calculationModeLinear, animations: {
    
    UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1 / 2) {
        self.button.transform = CGAffineTransform(translationX: -60, y: -30)
    }
    
    UIView.addKeyframe(withRelativeStartTime: 1 / 2, relativeDuration: 1 / 2) {
        self.button.transform = CGAffineTransform(translationX: 20, y: 50)
    }
    
}) { (finish) in
    
}

addKeyframe 方法中：

withRelativeStartTime：关键帧起始时间
relativeDuration：关键帧相对持续时间

逐帧动画

基于 Timer 的逐帧动画效果

这种方法经常使用在动画帧率不高，且帧率之间的时间间隔并不身份严格的情况下。

比如实现图片按照连续的顺序和一定的时间间隔显示图片

Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(refreshImage), userInfo: nil, repeats: true)

基于 CADisplayLink 的逐帧动画

iOS设备的屏幕刷新频率是60Hz，而 CADisplayLink 可以保持和屏幕刷新率相同的频率将内容渲染到屏幕上，因此它的精确非常高。CADisplayLink 在使用的时候需要注册到 runloop 中，每当发送一次指定的 selector 消息，相应的 selector 中的方法会被调用一次。

preferredFramesPerSecond 设置为 1 时表示当前的刷帧周期为1/60s。当设置为 2 时表示当前的刷帧周期为1/60 * 2。

let displayLink = CADisplayLink(target: self, selector: #selector(refreshImage))
displayLink.preferredFramesPerSecond = 1
displayLink.add(to: RunLoop.current, forMode: .default)

基于 draw 方法的逐帧动画

draw() 方法的触发机制

使用 addSubview会触发 layoutSubviews
使用 view 的 frame 属性会触发 layoutSubviews
直接调用 setNeedsDisplay()

通过 Timer 或 CADisplayLink 逐帧渲染来实现

GIF动画效果

借助 ImageIO 框架实现图片的分解和合成

GIF 分解单帧图片

if let path = Bundle.main.path(forResource: "image", ofType: "gif") {
    // 本地读取GIF图片，将其转换为 Data 数据类型
    let data = try! Data(contentsOf: URL(fileURLWithPath: path))
    
    // 将 Data 作为 ImageIO 模块的输入
    let dataSource = CGImageSourceCreateWithData(data as CFData, nil)
    
    let imageCount = CGImageSourceGetCount(dataSource!)
    
    for i in 0..<imageCount {
        let imageRef = CGImageSourceCreateImageAtIndex(dataSource!, i, nil)
        // 获取 ImageIO 的输出数据：UIImage
        let image = UIImage(cgImage: imageRef!, scale: UIScreen.main.scale, orientation: .up)
        
        // 将获取到的 UIImage 数据存储为JPG或PNG格式保存到本地
        let imageData = image.pngData()
        try? imageData?.write(to: URL(fileURLWithPath: NSSearchPathForDirectoriesInDomains(.cachesDirectory, .userDomainMask, true).first! + "/\(i)" + ".png"), options: .atomic)
        
    }
}

序列图像合成GIF图像

// 读取全部png图片
var images = [UIImage]()
for i in 0...20 {
    let imageName = "\(i).png"
    let image = UIImage(named: imageName)!
    images.append(image)
}

// 创建gif文件
let gifPath = NSSearchPathForDirectoriesInDomains(.cachesDirectory, .userDomainMask, true).first! + "/image.gif"
let url = CFURLCreateWithFileSystemPath(kCFAllocatorDefault, gifPath as CFString, .cfurlposixPathStyle, false)
// import CoreServices
let destion = CGImageDestinationCreateWithURL(url!, kUTTypeGIF, images.count, nil)

// 设置gif图片属性
let delayTime = [kCGImagePropertyGIFDelayTime : 0.1] // 每帧之间播放时间
let property = [kCGImagePropertyGIFDictionary : delayTime]
for cgImage in images {
    CGImageDestinationAddImage(destion!, cgImage.cgImage!, property as CFDictionary)
}

var gifProperties = [CFString : Any]()
gifProperties[kCGImagePropertyColorModel] = kCGImagePropertyColorModelRGB
gifProperties[kCGImagePropertyDepth] = 16 //设置图像的颜色深度。颜色深度为1，表示2的一次方。
gifProperties[kCGImagePropertyGIFLoopCount] = 1 //设置gif执行次数

let dict = [kCGImagePropertyGIFDictionary : gifProperties]
CGImageDestinationSetProperties(destion!, dict as CFDictionary)
CGImageDestinationFinalize(destion!)

GIF图片展示：基于UIImageView

var images = [UIImage]()
for i in 0...20 {
    let imageName = "\(i).png"
    let image = UIImage(named: imageName)!
    images.append(image)
}

imageView.animationImages = images
imageView.animationDuration = 5
imageView.animationRepeatCount = 1
imageView.startAnimating()

CABasicAnimation

位置动画

let animation = CABasicAnimation()
animation.keyPath = "position"
animation.toValue = NSValue(cgPoint: CGPoint(x: 50, y: 80))
animation.duration = 2
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

position 表明当前是为了修改控件位置信息。

toValue 从现在的位置移动到指定的位置
byValue 在控件原来位置的基础上移动多少位置
fromValue 从指定的位置移动到现在的位置

缩放动画

transform.scale 属性可实现挤压效果。scale 还有x、y两个属性，x 属性表明当前UI控件的 width 的缩放系数。y 属性表明当前UI控件的 height 的缩放系数。

let animation = CABasicAnimation()
animation.keyPath = "transform.scale.x"
animation.fromValue = 1.0
animation.toValue = 0.5
animation.duration = 2
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

旋转动画

transform.rotation 属性可实现旋转动画

let animation = CABasicAnimation()
animation.keyPath = "transform.rotation"
animation.toValue = Double.pi / 2
animation.duration = 2
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

位移动画

Translation 还有x、y两个属性分别表示在x、y方向上移动

let animation = CABasicAnimation()
animation.keyPath = "transform.translation.x"
animation.toValue = 100
animation.duration = 2
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

圆角动画

cornerRadius 设置 Layer 图层圆角属性

let animation = CABasicAnimation()
animation.keyPath = "cornerRadius"
animation.toValue = 20
animation.duration = 2
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

边框动画

button.layer.borderColor = UIColor.orange.cgColor
        
let animation = CABasicAnimation()
animation.keyPath = "borderWidth"
animation.toValue = 5
animation.duration = 2
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

颜色渐变动画

let animation = CABasicAnimation()
// 边框颜色的渐变
// animation.keyPath = "borderColor"
animation.keyPath = "backgroundColor"
animation.fromValue = UIColor.orange.cgColor
animation.toValue = UIColor.red.cgColor
animation.duration = 2
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

淡入淡出动画

let animation = CABasicAnimation()
animation.keyPath = "opacity"
animation.fromValue = 0
animation.toValue = 1
animation.duration = 10
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

阴影渐变动画

button.layer.shadowColor = UIColor.red.cgColor
button.layer.shadowOpacity = 0.5

let animation = CABasicAnimation()
animation.keyPath = "shadowOffset"
animation.toValue = NSValue(cgSize: CGSize(width: 10, height: 10))
animation.duration = 10
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

CAKeyframeAnimation

淡出动画

let animation = CAKeyframeAnimation()
animation.keyPath = "opacity"
animation.values = [0.95, 0.8, 0.5, 0.05, 0.00]
animation.duration = 6
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

任意路径动画

addArc ：以 center 为圆心，radius 为半径，startAngle 为起始角度，endAngle 为最终角度，clockwise 为顺时针

let pathLine = CGMutablePath()
pathLine.move(to: CGPoint(x: 50, y: 50))
pathLine.addLine(to: CGPoint(x: 100, y: 200))
pathLine.addArc(center: CGPoint(x: 200, y: 300), radius: 50, startAngle: 0, endAngle: .pi / 2, clockwise: true)

let animation = CAKeyframeAnimation()
animation.keyPath = "position"
animation.duration = 6
animation.path = pathLine
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
button.layer.add(animation, forKey: nil)

CAAnimationGroup组合动画

let rotation = CABasicAnimation()
rotation.keyPath = "transform.rotation"
rotation.toValue = Double.pi

let scale = CABasicAnimation()
scale.keyPath = "transform.scale"
scale.toValue = 0.2

let move = CABasicAnimation()
move.keyPath = "transform.translation"
move.toValue = NSValue(cgPoint: CGPoint(x: 50, y: 50))

let animationGroup = CAAnimationGroup()
animationGroup.animations = [rotation, scale, move]
animationGroup.duration = 6
animationGroup.fillMode = .forwards
animationGroup.isRemovedOnCompletion = false
button.layer.add(animationGroup, forKey: nil)

实践：水纹按钮动画效果

AnimationButton

import UIKit

class AnimationButton: UIButton {
    
    private var countNum = 0
    private var circleCenterX: CGFloat = 0
    private var circleCenterY: CGFloat = 0
    private var radius: CGFloat = 0
    private var animationColor = UIColor.red
    private var timer = Timer()
    
    override init(frame: CGRect) {
        super.init(frame: CGRect(x: 20, y: 200, width: UIScreen.main.bounds.size.width - 40, height: 44))
        
        backgroundColor = .lightGray
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func startAnimation(_ sender: UIButton, _ event: UIEvent) {
        
        isUserInteractionEnabled = false
        
        let touchSet = event.touches(for: sender)
        let touch = touchSet?.first
        let point = touch?.location(in: sender)
        
        circleCenterX = point!.x
        circleCenterY = point!.y
        
        timer = Timer.scheduledTimer(timeInterval: 0.2, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
        RunLoop.main.add(timer, forMode: .common)
    }
    
    @objc func timerAction() {
        
        countNum += 1
        DispatchQueue.main.asyncAfter(deadline: .now()) {
            self.radius += 10
            self.setNeedsDisplay()
        }
        
        if countNum > 50 {
            countNum = 0
            radius = 0
            timer.invalidate()
            
            DispatchQueue.main.asyncAfter(deadline: .now()) {
                self.radius = 0
                self.setNeedsDisplay()
            }
            isUserInteractionEnabled = true
        }
    }
    
    override func draw(_ rect: CGRect) {
        
        let ctx = UIGraphicsGetCurrentContext()
        ctx?.addArc(center: CGPoint(x: circleCenterX, y: circleCenterY), radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true)
        
        animationColor.setStroke()
        animationColor.setFill()
        ctx?.fillPath()
    }
}

使用

override func viewDidLoad() {
    super.viewDidLoad()
    
    let button = AnimationButton()
    button.addTarget(self, action: #selector(buttonClick(_:_:)), for: .touchUpInside)
    view.addSubview(button)
}

@objc func buttonClick(_ sender: UIButton, _ event: UIEvent) {
    
    let button = sender as! AnimationButton
    button.startAnimation(sender, event)
}