iPhone "Slide to Unlock" Animation

Creating a Slide to power off like slider on iOS

No, there is no direct UIElement available which will give the desired effect.
If you plan to release the app on AppStore I would suggest do not try to replicate slide to unlock / power off.

I had a app rejected exactly for this reason. Following is the rejection reason as given by Apple.

Specifically, the Slide to Start element is not appropriate
and not in compliance with the App Store Review Guidelines as it is
too similar to the iOS Slide to Unlock UI. While we understand this
specific UI element is not present in the current version of iOS, it
is still not appropriate to include it in your app.

I had this same UIElement approved in an earlier version but got rejected during an update. So there is a small chance it gets over looked.

Slide to unlock text animation on Android, looking like in iOS

There are ways to create animations on android.

• https://developer.android.com/guide/topics/resources/animation-resource.html
• https://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html

iOS7 Slide to unlock animation on a UILabel

I think the key to performing this effect is CALayer mask. You can attach a second CALayer to any existing layer as its mask. Then:

The [mask] layer’s alpha channel determines how much of the [parent] layer’s content
and background shows through. Fully or partially opaque pixels allow
the underlying content to show through but fully transparent pixels
block that content.

So the text is going to be the mask and the moving colour is going to be the parent.

The easiest way to deal with the text will be to use a CATextLayer. The easiest way to make the colour gradient will be CAGradientLayer.

To animate the gradient you can use Core Animation, since all properties are animatable. I guess locations is likely to be the best way to achieve the sliding animation.

For convenience you'll probably want to wrap all of that up into a UIView, but you can add layers directly if you prefer.

---

Related Topics