↰ voltar ao início

tmergulhao/swift


Tales of a Swift futureConstraint animations using Swift Playgrounds

Lately I’ve been working a lot on building prototypes for usability testing. There are many types of tests you can apply and they vary a lot in the level of fidelity needed to gauge how sustainable is the interaction.

For the purposes of learning a better way to deliver I have tried many prototyping tools. Among those, I’ve been working a lot with Framer for the past few weeks. I have found myself mesmerised on how good it is on conveying ideas quick and easy — and dirty. It’s really refreshing to have an interface that helps you iterate and show development quickly.

My issue with Framer is that it’s too simple sometimes and it does not scale very well. That’s why I was very interested in the Swift Playgrounds example named “Talking to the Live View”. It was the answer to my calls, trying interactive Swift programming without the Simulator (although the playground engine is in fact a simulator).

That idea of using the Playground for prototyping was mostly dormant until I’ve come across the new edition of Design+Code by Meng To. It’s a really interesting series of articles that explain how to design and build an app from the ground up. I have read the first edition and come to it for reference every once in a while. It’s highly recommended for designers and iOS beginners.

In the third chapter there are two sections that really caught my interest: Prototyping in Xcode and Animate in Playground. [1. If you intend on reading, I’d recommend you read the whole chapter in order for more context.] They were the foundation I needed to leap from Framer to Playgrounds for animation prototyping. There I saw a simple walkthrough of implementing interactions on the Live View.

This article explains what I did and what I am to do. This is not a tutorial so don’t expect easy and well explained, nonetheless the code is here for you to download, try, tinker and break.

Playground

DOWNLOAD THE PLAYGROUND HERE

Firstly, the final product of Meng’s tutorial is an iOS Playground with a simple back and forth interaction. It uses a subclass of UIViewController to setup all the elements and create all the action outlets. My take on this is that I wanted to go a step further and deepen the scope to deal with constraint animations.

Constraints are one of the basic building blocks of UI in iOS so it’s a natural evolution on how to do adaptable interfaces and animations for the platform. I used them in this example to help me setup the animation states.

Also, in the aforementioned example, Meng uses Swift programatically to setup views, subviews and sizes. I’m trying to parallel this with Framer’s Design experience using the .xib format. It’s like Sketch and Framer’s Design mode, but the output is a file that is readable to Xcode and contains not only elements but the relationships between them.

Although playgrounds are really adaptable, the connection of the Controller to a given .xib file needs to be declared on the public scope. In another words, there need to be a public base class declared on another Swift file under the Sources folder.

XIB file outline and render

import UIKit

open class CardController : UIViewController {

@IBOutlet public var cardView: UIView!

@IBOutlet public var image: UIImageView!

@IBOutlet public var close: UIButton!

@IBOutlet public var cardConstraints: Array<NSLayoutConstraint>!

@IBAction open func tapCard(_ sender: AnyObject)

@IBAction open func tapClose(_ sender: AnyObject)
}

In this example, for the animation states there is a collection of constraints named cardConstraints that determine the card layout set to 1000 of priority amongst others that describes a fullscreen modality that is set to 999. The set with higher priority is activated and deactivated to create the animation so as to lower the complexity of setting back and forth countless properties. Also the visibility of the close button and the corner radius of the card are also set programatically for they are not constraint settable.

The final product is the animation below:

Card open animation

The idea is to try and study more realistic, expressive and maybe useful deliverables. In the following studies I’ll try to coordinate these advances with Navigation Controller and other structures to investigate it’s feasibility as an option for high fidelity interaction design and development.

References