Under the Bridge

So you’ve probably heard that in iOS 6 the music app has buttons with orientation-sensitive reflections, right? And thought that was probably hard to do?

Well, not if some bright spark shows you how:

mobilerengler / iOS-Adaptive-Metal-Knob

A knob made in iOS that simulates real-time reflection updates on a brushed metal surface.

Looks pretty darn close to the real thing too; check out the video in ManiacDev’s writeup!

UPDATE:

For another alternative, check out danielamitay / DAAnisotropicImage!

Now here’s an extra clever snippet for easily adding a glow effect to an arbitrary view:

UIView+Glow: Fancy Glowing Effects for Everyone

We recently needed to add a tutorial to a board game (see SLTutorialController), and realised that we needed a way to highlight various controls and other user interface elements that the user should interact with next. A common way that this is handled is by making things glow, often with an animation.

So, we wrote UIView+Glow. It’s a very simple category that adds two methods: startGlowing and stopGlowing. When you call startGlowing, the view will start to pulse with a soft light; this effect is removed when stopGlowing is called…

Since if you’ve tried to deal with designers’ requests for that kind of thing you’d expect it to be rather image-heavy to say the least, we were intrigued enough to take a look at thesecretlab / UIView-Glow … and why yes, with some applied Core Animation niftiness coupled with objc_setAssociatedObject(), they really do make it just as universally applicable as advertised. Even if you don’t have any use for glows at this exact moment, check out UIView+Glow.m to see a nice clean pattern for adding any type of annotation functionality to arbitrary views!

h/t: @romainbriche!

This makes a nice pairing with our UIView path animation from yesterday – PRTween:

PRTween is a lightweight tweening library built for iOS. While Apple has done an incredible job with UIView Animations and Core Animation, there are sometimes cases that are difficult to get around. PRTween is a great alternative if you’d like to:

• Animate a property Core Animation won’t allow you to
• Ensure that [someView layoutSubviews] is respected during an animation
• Tween arbitrary numerical values, such as sound volume, scroll position, a counter, or many others
• Define your timing curve as a function rather than a bezier with control points

PRTween aims to be as simple as possible without sacrificing flexibility…

That second point about respecting layouts during animation is particularly interesting. We’ve had a couple instances where that kind of thing has gone off the rails with varying degrees of ensuing hilarity, indeed. Also, it’s nice to see some more complex computability:

… Sometimes you will find it necessary to animate a complex value, such as a CGPoint. Although you could write two tweens for the x and y fields, it is much simpler to use linear interpolation, or lerps … PRTween currently has built-in lerps for CGPoint and CGRect …

Looks like a pretty sweet start for adding some liveliness to your interface, yep. Also note iheart2code / PRTween for ARC-compatible fork.

(And don’t forget CPAnimationSequence for simplifying animation of stock Core Animation properties!)

h/t: ManiacDev!

Here’s an excellent display of applied Core Animation techniques:

Moving objects along a bezier path in iOS

The PathMove program allows the user to set up a predetermined set of bezier paths and then trigger a UIImageView object to move from start to end along that path. The program incorporates several options to do things like:

• Select the ending quadrant of the bezier path.
• Mix and match three different predefined bezier path segments for the starting and ending segments of the overall path.
• Allow the object to grow, shrink or remaiin the same size as it moves along the path.
• Rotate the object to match the tangent of the bezier curve as the object moves.
• Pre-Rotate the object by 90 degrees to accommodate how iOS calculates a tangent.
• Annotate the complete bezier path with the size and location of all of the path’s the control points

Read the whole thing, and check out the source at JoalahDesigns / PathMove!

h/t: @romainbriche!

Now here’s something we hadn’t noticed; these days it’s possible to use Apache Cordova aka PhoneGap as a plugin for your real apps — matter of fact, that’s how a full PhoneGap is structured nowadays:

How to use Cordova as a Component

Beginning with Cordova 1.4, you can use Cordova as a component in your iOS applications. This component is code-named “Cleaver”.

New Cordova-based applications created using the Xcode template provided in Cordova 1.4 or greater uses Cleaver, and this template is considered the reference implementation for Cleaver…

That brings up some interesting hybrid app possibilities, and here’s three examples to check out:

RandyMcMillan / ModalCleaverView2 – popup modal

RandyMcMillan / WikiCleaverView – Wikipedia

RandyMcMillan / Cleaver-RSSReader – RSS reader

Something to keep handy in your bag of tricks, especially if you’ve got a cross-platform product to manage, yes?

h/t : ManiacDev!

UPDATE:

Lots of good tips in A Primer on Hybrid Apps for iOS!

Really excellent presentation slides and code by @mpospese here introducing matrix math as applied in Quartz2D, CGAffineTransform, and CATransform3D and working up to flip and fold animations:

Matrix transformations can make your user interfaces come to life: translate, scale, and rotate. Each on its own is relatively simple and straightforward. Yet many developers are daunted when 2 or more operations need to be combined. What if you need to rotate or zoom about an off-center (or even off-screen) point? How do you combine multiple transformations into a single animation? How do you make advanced, polished 3D animations such as folding and flipping views? Learn everything you need to know to get started with complex matrix transformations in CoreGraphics and CoreAnimation.

And once you’ve got that read, check out the massively detailed followups he’s blogged:

MPFoldTransition – add fold transitions to your app

Anatomy of a folding animation

MPFlipTransition – add flip transitions to your app

Anatomy of a page-flip animation

Just the ticket for adding all that trendy foldy flipiness to your apps.

And while you’re there, read the rest of the blog too, several useful tips on graphic tweakiness for you!

h/t: @steipete via @rwenderlich!

UPDATES:

MPFlipViewController: a page-flipping container controller

Interested in turning your iDevice into a musical instrument? Well, look here, a framework just for that:

MoMu: A Mobile Music Toolkit

MoMu is a light-weight software toolkit for creating musical instruments and experiences on mobile device, and currently supports the iPhone platform (iPhone, iPad, iPod Touches). MoMu provides API’s for real-time full-duplex audio, accelerometer, location, multi-touch, networking (via OpenSoundControl), graphics, and utilities…

Neat, huh? Check out the paper here for background details, and this Making a Mandolin tutorial.

… and on the lighter side, if you haven’t heard of the Stanford Mobile Phone Orchestra, you’ve definitely got to check that out.

h/t: ManiacDev!