Wayne's blog
design, development, hobbies

Flippin' Cards

The other day I needed to represent a physical 2-sided card in a design. The previous design had the user selecting the front or back of the card, with the new view being presented showing that side of the card. We can do better. Let’s make this more interactive!

Design

The face card was scanned and traced in Illustrator, then exported as SVG into Figma.

Figma Cards

Xcode

A Single View Application will do fine for this demo. Our card will be a tappable button. Add in an outlet for the card:

@IBOutlet weak var btnCard: UIButton!
var isOpen = false 

In the viewDidLoad() method, further customize the card button:

override func viewDidLoad() {
	...
	btnCard.adjustsImageWhenHighlighted = false
	btnCard.layer.cornerRadius = 11.0
	btnCard.layer.shadowColor = UIColor.gray.cgColor
	btnCard.layer.shadowOffset = CGSize(width: 0.0, height: 10.0)
	btnCard.layer.shadowRadius = 12.0
	btnCard.layer.shadowOpacity = 0.7
}

And finally, let’s add the action to the button tap, swapping the image, and animating the view’s transform:

  @IBAction func btnFlip(_ sender: Any) {
    if isOpen {
      isOpen = false
      let image = UIImage(named: "cardBack")
      btnCard.setImage(image, for: .normal)
      UIView.transition(with: btnCard, duration: 0.3,
       options: .transitionFlipFromLeft, animations: nil, completion: nil)
    } else {
      isOpen = true
      let image = UIImage(named: "cardFront")
      btnCard.setImage(image, for: .normal)
      UIView.transition(with: btnCard, duration: 0.3, options: .transitionFlipFromRight, animations: nil, completion: nil)
    }
  }

We’re basically using a built-in animation called .transtitionFlipFromRight and .transitionFlipFromLeft to simulate the flipping. The animation duration is set to 0.3 seconds, and swaps the image using the isOpen binary flag. ddd

Result

Card Flip Animation

If you’d like to take a look at some of the other free animation curves, settings and transition presets UIKit provides, take a look at Apple’s documentation.

Conclusion

Today we discussed a simple way to flip a card or any view for that matter. Using nothing but built-in UIKit animation presets.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next post.

End of Year Update

Most updates for this project are happening on Instagram. It’s easy for me snap a few pics and post there, and at the same time, each post will be printed in my R2D2 Chatbook.

In summary, the dome is coming along. I have all the greeblies for inside except for the hinges and the magic panel. RLD and FLD’s are working, PSI housings are complete, need to finish building the LED boards for those. I’ve soldered up the boards for the HP’s, and 3D printed some base brackets that stand-off and mount the servos. Need to buy servos, oh and all the dome hinges.

Major breakthrough, after being on the waiting/standby list for Commando-8’s CS:R aluminum frame, the time has finally come. Out of the 3 batches of frames James is doing this year, enough people on the interest list backed out that it reached my spot #37 on the standby list. Frame is ordered and on the way. I opted for all the trinkets that go with it. Very excited to put this together.

I have the WORRParts all aluminum legs with cast booster covers and billet aluminum shoulders and spacers. Still need the greeblies that attach to the booster covers, booster covers to complete the legs.

I figure once the frame is assembled, attached to the dome, and the dome drive connected and spinning, it will be a whole new ballgame. Tired of just staring at the dome.

Next steps are to get the skins and mount them to the frame. Order the Octagon Ports, coin returns, coin slots, and side vents. Then on to order the hinges and assemble all the panels, servos, actuators, HP’s, PSI’s, and whatnot for the dome. It’s like a never ending list.

Then I’ll take a breath before diving into ankles, feet and drive motors. Still hoping for a finish date a little less that a year away. Gotta keep cranking.

Also, R.I.P. Carrie Fisher. She passed away today, and is surely missed by everyone.

July Update

Waiting for parts is the name of the game at this point. Critical parts suppliers are hit and miss. I’ve been attached to the Tapatalk mobile app to keep tabs on parts runs and availability countdowns. So far so good. I’ve managed to secure the CS:R aluminum legs from WorrParts, along with the matching diet horseshoes and shims that mount to the upper portion of the outside legs. The booster covers came in from IA Parts, and man they are slick. Off to a good start on the legs. Over the next few months I’ll try to pick up the leg struts, shoulder buttons, and under shoulder details. Relatively smaller parts, but no less expensive for their size.

Still need to find all three ankles and all three feet.

Mounted some of the HP’s with painters tape just to get an idea of how it’s going to look once the parts are attached. Also tried out my first dome drilling and use of the captive studs. Seems pretty straight forward, however, I didn’t like how the captive studs are a little visible even with the outer dome placed on top. Hmm. Will have to do more research.

reflecting legs Could not wait A little distraction