iOS18适配指南之Symbol Animations

介绍

• WWDC23 推出的 Symbol Animations 使得 SF Symbols 中的图标可以呈现丰富多彩的动画。
• UIImageView 通过addSymbolEffect()方法增加动画效果。
• WWDC24 中 Symbol Animations 新增了动画效果rotate、wiggle与breathe以及控制方式periodic。

使用

• rotate 效果。

import UIKit

class ViewController: UIViewController {
    lazy var imageView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "heart.fill")?.withTintColor(.red, renderingMode: .alwaysOriginal))
        imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        imageView.contentMode = .scaleAspectFit
        imageView.center = view.center
        return imageView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(imageView)

        // iOS18新增
        imageView.addSymbolEffect(.rotate, options: .repeat(.periodic(3, delay: 1)), animated: true) // periodic控制方式：重复执行3次，延迟1s
    }
}

rotate.gif

• wiggle 效果。

import UIKit

class ViewController: UIViewController {
    lazy var imageView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "heart.fill")?.withTintColor(.red, renderingMode: .alwaysOriginal))
        imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        imageView.contentMode = .scaleAspectFit
        imageView.center = view.center
        return imageView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(imageView)

        // iOS18新增
        imageView.addSymbolEffect(.wiggle, options: .repeat(.continuous), animated: true)
    }
}

wiggle.gif

• breathe 效果。

import UIKit

class ViewController: UIViewController {
    lazy var imageView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "heart.fill")?.withTintColor(.red, renderingMode: .alwaysOriginal))
        imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        imageView.contentMode = .scaleAspectFit
        imageView.center = view.center
        return imageView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(imageView)

        // iOS18新增
        imageView.addSymbolEffect(.breathe, options: .repeat(.continuous), animated: true)
    }
}

breathe.gif