动画图标

由 Matěj K. Jirásek 设计和开发 (mkj.is)

完整文档请访问：http://mkj-is.github.io/MKJIcons

Animated star

目录

安装

安装此库需要满足以下最低要求

要安装，请使用 Xcode 11 并添加包，或手动将以下行添加到您的 Package.swift 文件中

.package(url: "https://github.com/mkj-is/MKJIcons.git", from: "0.3.0")

展示

一个可用作 iOS 框架的图标集。 此第一篇文档页面用作所有可用图标的参考和展示。

图标的特性

您需要打开带有时间轴的辅助编辑器才能查看图标。 如果单击它们，它们将动画。 默认情况下，其中一些是不可见的。 不要忘记点击空白处！

// We need to import basic frameworks so this example can work
import UIKit
import XCPlayground

// These are all the icons available
let checkmark = CheckmarkIcon(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
let burger = BurgerIcon(frame: CGRect(x: 100, y: 0, width: 100, height: 100))
let heart = HeartIcon(frame: CGRect(x: 200, y: 0, width: 100, height: 100))
let star = StarIcon(frame: CGRect(x: 300, y: 0, width: 100, height: 100))
let plus = PlusMinusIcon(frame: CGRect(x: 0, y: 100, width: 100, height: 100))
let settings = SettingsIcon(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
let pin = DropPinIcon(frame: CGRect(x: 200, y: 100, width: 100, height: 100))
let play = PlayPauseIcon(frame: CGRect(x: 300, y: 100, width: 100, height: 100))
let stop = PlayStopIcon(frame: CGRect(x: 0, y: 200, width: 100, height: 100))
let smile = SmileIcon(frame: CGRect(x: 100, y: 200, width: 100, height: 100))
let fingerprint = FingerprintIcon(frame: CGRect(x: 200, y: 200, width: 100, height: 100))
let clip = PaperclipIcon(frame: CGRect(x: 300, y: 200, width: 100, height: 100))
let wave = SoundwaveIcon(frame: CGRect(x: 0, y: 300, width: 100, height: 100))
let bike = BikeIcon(frame: CGRect(x: 100, y: 300, width: 100, height: 100))
let earth = EarthIcon(frame: CGRect(x: 200, y: 300, width: 100, height: 100))
let textAlign = TextAlignIcon(frame: CGRect(x: 300, y: 300, width: 100, height: 100))

// We create a view to contain all the icons
let view = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))

// Then we add them to the large parent view
view.addSubview(checkmark)
view.addSubview(burger)
view.addSubview(heart)
view.addSubview(star)
view.addSubview(plus)
view.addSubview(settings)
view.addSubview(pin)
view.addSubview(play)
view.addSubview(stop)
view.addSubview(smile)
view.addSubview(fingerprint)
view.addSubview(clip)
view.addSubview(wave)
view.addSubview(bike)
view.addSubview(earth)
view.addSubview(textAlign)

// At last we assign the parent view with the icons to assistant editor
XCPlaygroundPage.currentPage.liveView = view

基础知识

本章介绍如何配置图标样式和外观。

可以为所有图标更改下列属性，但其中许多属性还有更多设置。 此外，可以使用应用程序启动时的 UIAppearance 来设置这些基本值。 如果您选择使用这种方式，则之后创建的所有图标都将继承这些属性。

最好的事情是，这些图标是 IBDesignable。 这意味着如果将它们添加到您的 .xib 或 .storyboard 中，您可以看到它们在应用程序中的外观，并且可以非常快速地构建用户界面原型。

// We need to import basic frameworks so this example can work
import UIKit
import XCPlayground

// Then we create the icon
let icon = BikeIcon(frame: CGRect(x: 0, y: 0, width: 300, height: 300))

// We can set the line parameters
icon.lineCap = .Round
icon.lineJoin = .Round
icon.lineWidth = 6

// We make the icon to animate longer so we can see the animation in more detail
icon.animationDuration = 2

// If you animate using HSB the animation will be really colorful
// (Or you can of course stock with RGB, if you are conservative)
icon.colorMode = .HSB

// We make the icon visible by default, the icon will animate at the beginning!
icon.visible = true

// Then we assign the icon to assistant editor
XCPlaygroundPage.currentPage.liveView = icon

导出

本章向我们展示了如何导出位图图像序列。

在该框架中，有一个特殊的类，用于从图标导出图像及其序列。 您将图标分配给导出器，然后保存结果，就完成了！

如果您正在 Playground 中查看此文档并想要导出图标，则需要在用户*文档*文件夹中拥有*共享 Playground 数据*文件夹。

import UIKit
import XCPlayground

// We create the icon which will be 100x100 pixels
let icon = CheckmarkIcon(frame: CGRect(x: 0, y: 0, width: 100, height: 100))

// Then we tell where we would like the sequence to be stored
let folder = XCPlaygroundSharedDataDirectoryURL
    .URLByAppendingPathComponent("checkmark_forward")

// We can tell the exporter how many frames the animation has
let frameCount = 50

// Also, there is an option to export animation going once forward,
// once backward or forward and back in one export
let direction = AnimatedIconExporterDirection.ForwardAndBack

// Then we create the exporter and save the result!
let exporter = AnimatedIconExporter(icon: icon, folder: folder, direction: direction, count: frameCount)

exporter.save()