scale

WWDC’23 introduced SF symbol animations. There are 8 different animation presets: appear, disappear, bounce, scale, pulse, variable color, and replace. Each of these presets have a dedicated use-cases. Appear animation is used when a symbol is shown in the UI for the first time. Disappear when a symbol is removed from the UI. Bounce is suitable for communicating to a user that an action was triggered, or it was completed successfully. Scale animation is suitable for highlighting elements in the UI, like when hovering on the element. It could also be used to let the user know that an action has taken a place (think about a button which has pressed down state). Pulse animation is an excellent way to show that some action is ongoing. While recording a video, the record button’s symbol pulses. Variable color animation communicates a state which changes over time (Wi-Fi signal strength). Replace animation is useful for communicating that the function of a symbol has changed. Think about a play button changing to a pause button.

Symbol animations are applied with symbolEffect(_:options:value:) for discrete effects, symbolEffect(_:options:isActive:) for indefinite effects and contentTransition(_:) and transition() view modifiers with a new symbolEffect. Discrete effects are on-off effects, whereas indefinite effects change the symbol indefinitely and need to be explicitly removed. Bounce, pulse, and variable color support discrete effects and pulse, variable color, scale, appear, disappear support indefinite effects. Appear and disappear also support transition effects, and replace supports a content transition effect. Therefore, we need to keep in mind this information when picking the view modifier.

Next, let’s look at some of the examples and how to apply these view modifiers.

Appear and Disappear

	struct AppearDisappearView: View {
	@State private var isDrizzleHidden = true

	var body: some View {
	VStack(spacing: 16) {
	HStack {
	Image(systemName: "cloud.fill")
	Image(systemName: "cloud.drizzle.fill")
	.symbolEffect(.disappear, isActive: isDrizzleHidden)
	Image(systemName: "cloud.heavyrain.fill")
	}
	.imageScale(.large)
	HStack {
	Image(systemName: "cloud.fill")
	if !isDrizzleHidden {
	Image(systemName: "cloud.drizzle.fill")
	.transition(.symbolEffect(.automatic))
	}
	Image(systemName: "cloud.heavyrain.fill")
	}
	.imageScale(.large)
	Button("Appear/Disapper") {
	isDrizzleHidden.toggle()
	}
	}
	}
	}

view raw AppearDisappearView.swift hosted with ❤ by GitHub

Bounce

	struct BounceView: View {
	@State private var value = 0

	var body: some View {
	VStack(spacing: 16) {
	HStack {
	Image(systemName: "snowflake")
	.symbolEffect(.bounce, value: value)
	Image(systemName: "snowflake")
	.symbolEffect(.bounce, options: .speed(0.1), value: value)
	Image(systemName: "snowflake")
	.symbolEffect(.bounce, options: .repeat(2), value: value)

	}
	.imageScale(.large)
	Button("Bounce") { value += 1 }
	}
	}
	}

view raw BounceView.swift hosted with ❤ by GitHub

	struct ScaleView: View {
	@State private var isActive = false

	var body: some View {
	VStack(spacing: 16) {
	HStack {
	Image(systemName: "drop.fill")
	.symbolEffect(.scale.up, isActive: isActive)
	Image(systemName: "drop.fill")
	.symbolEffect(.scale.down, options: .speed(0.1), isActive: isActive)
	Image(systemName: "drop.fill")
	.symbolEffect(.scale.down, options: .speed(5), isActive: isActive)

	}
	.imageScale(.large)
	Button("Scale") { isActive.toggle() }
	}
	}
	}

view raw ScaleView.swift hosted with ❤ by GitHub

Pulse

	struct PulseView: View {
	@State private var isActive = false

	var body: some View {
	VStack(spacing: 16) {
	HStack {
	Image(systemName: "moonphase.first.quarter")
	.symbolEffect(.pulse, isActive: isActive)
	Image(systemName: "moonphase.first.quarter")
	.symbolEffect(.pulse, options: .speed(0.1), isActive: isActive)
	Image(systemName: "moonphase.first.quarter")
	.symbolEffect(.pulse, options: .speed(5), isActive: isActive)

	}
	.imageScale(.large)
	Button("Pulse") { isActive.toggle() }
	}
	}
	}

view raw PulseView.swift hosted with ❤ by GitHub

Variable Color

	struct VariableColorView: View {
	@State private var isActive = false

	var body: some View {
	VStack(spacing: 16) {
	HStack {
	Image(systemName: "rainbow")
	.symbolEffect(.variableColor, options: .speed(0.1), isActive: isActive)
	Image(systemName: "rainbow")
	.symbolEffect(.variableColor.iterative, options: .speed(0.1), isActive: isActive)
	Image(systemName: "rainbow")
	.symbolEffect(.variableColor.iterative.reversing, options: .speed(0.1), isActive: isActive)

	}
	.symbolRenderingMode(.multicolor)
	.imageScale(.large)
	Button("Variable Color") { isActive.toggle() }
	}
	}
	}

view raw VariableColor.swift hosted with ❤ by GitHub

Replace

	struct ReplaceView: View {
	@State private var isActive = false

	var body: some View {
	VStack(spacing: 16) {
	HStack {
	Image(systemName: isActive ? "pause.circle.fill" : "play.circle.fill")
	.contentTransition(.symbolEffect(.replace))
	Image(systemName: isActive ? "pause.circle.fill" : "play.circle.fill")
	.contentTransition(.symbolEffect(.replace.offUp))
	Image(systemName: isActive ? "pause.circle.fill" : "play.circle.fill")
	.contentTransition(.symbolEffect(.replace.upUp))
	}
	.imageScale(.large)
	Button("Replace") { isActive.toggle() }
	}
	}
	}

view raw ReplaceView.swift hosted with ❤ by GitHub

Example Project

SymbolsAnimationExample (Xcode 15 beta 6)

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Support me on Patreon

Donate with Paypal

Buy me a coffee

Resizing images is an important topic when we need to display images which do not match with the intended display size. For example, rendering much large images in a small rectangle. UIImageView supports scaling images automatically but that becomes inefficient when dealing with larger images. In this blog post we’ll take a look on how to crop and resize images to fill a target size while keeping the original aspect ratio.

Cropping and scaling UIImages

The end goal of this exercise is to create a small ImageScaler struct which supports cropping the original image and resizing it to the target size. The final instance of the UIImage has smaller size which means that less memory is required for rendering the image.

	// Scaling the full image
	let originalImage = UIImage(named: "example_photo.jpg")!
	var targetSize = CGSize(width: 100, height: 100)
	imageView.image = ImageScaler.scaleToFill(originalImage, in: targetSize)

	// Scaling only a small part of the image
	let originalImage = UIImage(named: "example_photo.jpg")!
	var fromRect = CGRect(x: 362.0, y: 449.0, width: 260.0, height: 160.0)
	var targetSize = CGSize(width: 100, height: 100)
	imageView.image = ImageScaler.scaleToFill(originalImage, in: targetSize, from: fromRect)

view raw Image.swift hosted with ❤ by GitHub

Scaling an image to a target size.

As the first step let’s take a look on how to write the cropping and scaling logic. NSHipster has a great post about the different techniques what we can use for resizing images. We are going to use UIGraphicsImageRenderer for creating the scaled image. One important thing to note is that when we use CGContext for drawing the image then we need to flip the coordinate system because UIImage’s and CGContext’s coordinates do not match (UIImage uses upper left corner, CGContext bottom left corner). Coordinates can be transformed from the UIImage coordinate system to the CGContext coordinate system by combining translation and scale transforms. First we’ll move the image and then flip it in the opposite direction so that the final frame stays in the image rect.

	var transform = CGAffineTransform(translationX: 0.0, y: targetSize.height)
	transform = transform.scaledBy(x: 1, y: –1)
	context.cgContext.concatenate(transform)

view raw CGContext.swift hosted with ❤ by GitHub

Flipping the image vertically in the CGContext .

Next step after applying the affine transform is to crop the image. UIImage has a cgImage property but it can be nil when the instance was initialized with a CIImage backing storage. Therefore, we’ll need to handle both cases. Apple has a convenience drawing method for CIImage which already knows how to handle cropping. On the otherhand CGImage needs to be cropped first and then drawn. The full implementation of the crop and resize becomes:

	private static func scale(_ image: UIImage, fromRect: CGRect = .zero, targetSize: CGSize) -> UIImage {
	let renderer = UIGraphicsImageRenderer(size: targetSize)
	return renderer.image { context in
	// UIImage and CGContext coordinates are flipped.
	var transform = CGAffineTransform(translationX: 0.0, y: targetSize.height)
	transform = transform.scaledBy(x: 1, y: -1)
	context.cgContext.concatenate(transform)
	// UIImage -> cropped CGImage
	let makeCroppedCGImage: (UIImage) -> CGImage? = { image in
	guard let cgImage = image.cgImage else { return nil }
	guard !fromRect.isEmpty else { return cgImage }
	return cgImage.cropping(to: fromRect)
	}
	if let cgImage = makeCroppedCGImage(image) {
	context.cgContext.draw(cgImage, in: CGRect(origin: .zero, size: targetSize))
	}
	else if let ciImage = image.ciImage {
	var transform = CGAffineTransform(translationX: 0.0, y: image.size.height)
	transform = transform.scaledBy(x: 1, y: -1)
	let adjustedFromRect = fromRect.applying(transform)
	let ciContext = CIContext(cgContext: context.cgContext, options: nil)
	ciContext.draw(ciImage, in: CGRect(origin: .zero, size: targetSize), from: adjustedFromRect)
	}
	}
	}

view raw Resize.swift hosted with ❤ by GitHub

Crop and resize the image.

Calculating rects for scaled to fill behavior

Now we have cropping and resize logic available. Depending on the target size of the image we’ll need to figure out which parts of the original image should be cropped so that the original aspect ratio does not change. Note that the original image size and the target size can have different aspect ratios: square, portrait, landscape. Therefore, we’ll need to handle all the cases. Let’s start by adding convenience properties to CGSize.

	extension CGSize {
	enum Aspect {
	case portrait, landscape, square
	}
	var aspect: Aspect {
	switch width / height {
	case 1.0:
	return .square
	case 1.0…:
	return .landscape
	default:
	return .portrait
	}
	}
	var aspectRatio: CGFloat {
	return width / height
	}
	}

view raw CGSizeAspect.swift hosted with ❤ by GitHub

Convenience properties on CGRect.

After that we can add a method on CGRect which calculates a CGRect of the original image, what can be drawn in the target image. There are 9 different combinations what we need to handle. But the core logic stays the same: scale the current rectangle so that it fills the target size while keeping the original aspect ratio. Then chop off the sides which go over the target size and center the image in the target size.

	extension CGRect {
	func scaled(toFillSize targetSize: CGSize) -> CGRect {
	var scaledRect = self
	switch (size.aspect, targetSize.aspect) {
	case (.portrait, .portrait), (.portrait, .square):
	scaledRect.size.height = width / targetSize.aspectRatio
	scaledRect.size.width = width
	if scaledRect.height > height {
	scaledRect.size = size
	}
	scaledRect.origin.y -= (scaledRect.height – height) / 2.0
	case (.portrait, .landscape), (.square, .landscape):
	scaledRect.size.height = width / targetSize.aspectRatio
	scaledRect.size.width = width
	if scaledRect.height > height {
	scaledRect.size = size
	}
	scaledRect.origin.y -= (scaledRect.height – height) / 2.0
	case (.landscape, .portrait), (.square, .portrait):
	scaledRect.size.height = height
	scaledRect.size.width = height * targetSize.aspectRatio
	if scaledRect.width > width {
	scaledRect.size = size
	}
	scaledRect.origin.x -= (scaledRect.width – width) / 2.0
	case (.landscape, .landscape), (.landscape, .square):
	scaledRect.size.height = height
	scaledRect.size.width = height * targetSize.aspectRatio
	if scaledRect.size.width > width {
	scaledRect.size = size
	}
	scaledRect.origin.x -= (scaledRect.width – width) / 2.0
	case (.square, .square):
	return self
	}
	return scaledRect.integral
	}
	}

view raw CGRectAspectScale.swift hosted with ❤ by GitHub

Scaling rect to the target size with keeping the initial aspect ratio.

Finalizing the ImageScaler

We can proceed with creating a single static method which takes care of scaling the original image to the target size while keeping the aspect ratio. The whole implementation looks like this:

	struct ImageScaler {
	static func scaleToFill(_ image: UIImage, in targetSize: CGSize, from fromRect: CGRect = .zero) -> UIImage {
	let rect = fromRect.isEmpty ? CGRect(origin: .zero, size: image.size) : fromRect
	let scaledRect = rect.scaled(toFillSize: targetSize)
	return scale(image, fromRect: scaledRect, targetSize: targetSize)
	}

	private static func scale(_ image: UIImage, fromRect: CGRect = .zero, targetSize: CGSize) -> UIImage {
	let renderer = UIGraphicsImageRenderer(size: targetSize)
	return renderer.image { context in
	// UIImage and CGContext coordinates are flipped.
	var transform = CGAffineTransform(translationX: 0.0, y: targetSize.height)
	transform = transform.scaledBy(x: 1, y: -1)
	context.cgContext.concatenate(transform)
	// UIImage -> cropped CGImage
	let makeCroppedCGImage: (UIImage) -> CGImage? = { image in
	guard let cgImage = image.cgImage else { return nil }
	guard !fromRect.isEmpty else { return cgImage }
	return cgImage.cropping(to: fromRect)
	}
	if let cgImage = makeCroppedCGImage(image) {
	context.cgContext.draw(cgImage, in: CGRect(origin: .zero, size: targetSize))
	}
	else if let ciImage = image.ciImage {
	var transform = CGAffineTransform(translationX: 0.0, y: image.size.height)
	transform = transform.scaledBy(x: 1, y: -1)
	let adjustedFromRect = fromRect.applying(transform)
	let ciContext = CIContext(cgContext: context.cgContext, options: nil)
	ciContext.draw(ciImage, in: CGRect(origin: .zero, size: targetSize), from: adjustedFromRect)
	}
	}
	}
	}

view raw

ImageScaler.swift

hosted with ❤ by GitHub

Summary

While UIImageView supports cropping and scaling images, we’ll need to do this on our own. It becomes handy especially when dealing with larger images.

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Support me on Patreon

Donate with Paypal

Buy me a coffee