Animated iOS User Interfaces
New Articles!
New Book Reviews!
Popular Articles
Written by
Denys Telezhkin
A walkthrough of building and animating schematic designs for iOS user interfaces using a framework that&allows a simple yet powerful way of drawing and changing shapes.
Since the release of iOS 7 application designs for iOS have dramatically changed. With the termination of skeuomorphism came solid colors. Icons and buttons no longer try to recreate look and feel of real objects, but instead choose to be schematic.
Shadows, gradients, complex controls are all gone. Simplicity, clarity, efficiency - these are the new goals for iOS 7, iOS 8 and iOS 9. We are seeing more and more interfaces that are very simplistic, and instead of using complex imagery they often use simple geometric forms. Circles. Rectangles. Triangles. How do we implement this kind of designs? We'll try to answer this question with a new framework from , called &that is available on .&.
Introducing Shapes
Shapes is a set of wrappers that allows a simple yet powerful way of drawing and changing shapes on iOS. CAShapeLayer and UIBezierPath are the two main keystones it is built on.
CAShapeLayer is one of CALayer subclasses, that allows drawing cubic Bezier spline in its coordinate space. And UIBezierPath is a class, that defines geometric Bezier path. These two classes are very similar yet they serve completely different purposes. UIBezierPath is used for defining a path, and CAShapeLayer is responsible for drawing it. Both classes have very similar properties, but it's not so easy to use them together since one is using QuartzCore framework and CoreFoundation and the other one comes from UIKit world. With Shapes we are bridging the gap between these two.
DTShapeView
DTShapeView is a UIView, that is backed by CAShapeLayer instead of CALayer. To setup it's shape, simply create UIBezierPath, pass it to this class, and its properties will automatically be converted to underlying CAShapeLayer properties. Not only that, it also provides a set of properties, that allows using CoreGraphics properties and enums, such as CGLineCap and CGLineJoin, completely bypassing QuartzCore and CoreFoundation.
Now, having geometrically shaped view is cool, but what can we do with it? The first thing that comes to mind is progress view.
Progress views
In a nutshell, what is a progress view? It's some kind of a geometric figure, most likely a bar, that is filling from start to the end. If you are familiar with CAShapeLayer, that should immediately ring a bell, because it has properties strokeStart and strokeEnd, that define exactly that. Meet DTProgressView, DTShapeView subclass, that builds on top of those.
By default, DTProgressView fills entire view bounds, filling view from left to right. And all you need to do to create a progress view, is to drop it onto your view, set strokeColor and your progress view is ready!
self.simpleProgressView.strokeColor = & & & & & & & & & & & & & & & & & &[UIColor greenColor];
Whenever your progress changes, simply call
[self.simpleProgressView setProgress:& & & & & & & & & & & & & & & & &progress animated:YES];
And progress change will be animated. Of course, duration and animation function are configurable. But let's not stop there! DTProgressView is a DTShapeView subclass, which means that it allows any geometric shape, that can be defined by UIBezierPath. And you can go crazy and make something like this:
What if we want to cut one shape from another? Sometimes you need a tutorial in your app, and you want to dim some parts of the interface to shift user attention to some element in the UI. Sometimes you may be building a photo picker, that picks rounded photo of the user, and you want to hide everything else except this circle, that will be selected. This is where DTDimmingView comes in.
Dimmed views
By default, DTDimmingView dims its entire bounds. So all you need to do, is create UIBezierPath, that will define which part of the view should be visible, and set it to visiblePath property.
??UIBezierPath * roundedPath = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(self.view.bounds, 100, 100)]; self.dimmingDynamicView.visiblePath = roundedP
OK, drawing shapes is fun, but how about interacting with them?
Shaped buttons
DTShapeButton is a UIButton, that has a DTShapeView added as a subview. By default, this DTShapeView fills entire button frame. And since any DTShapeView property is animatable, changing its path can be used to animate changing the button's geometric shape. But we should be careful here because changing shape is not so simple as it might sound. Why is that?
AppStore download button
Let's take a look at AppStore download button. It has initial shape of a rounded rectangle. After user taps it, it animates to infinitely spinning circle. And you might think, ok, I will simply animate from rounded rectangle to circle, and that's it. But after trying to do so you will learn, that animation is drawing unnecessary angles and animates not exactly how you would expect it to. And after looking at the docs for CAShapeLayer, you will immediately understand why.
If the two paths have a different number of control points or segments the results are undefined.
Here's how UIBezierPath draws rounded rectangle:
It has many more control points and segments than a circle does. When changing paths, CAShapeLayer tries to interpolate between these lines and, obviously, fails because number of lines and control points differs.
You may encounter totally unexpected animations like swirling or partial drawing of views. This is not acceptable.
One obvious solution would be to draw shapes with the same number of control points. At its core, a circle, can be drawn as a rounded square with corner radius of half of its side. And this approach works fine, but only on the iOS simulator, not on the actual device.
This happens because of device optimizations, it seems as if iOS is automatically estimating how shapes could be drawn. And even if you created shape as a rounded rectangle, if it can be drawn as a simple circle, it will be drawn as a circle with a same number of control points as a circle.
There are different solutions, that can help you here.
Our approach is to have two buttons instead of one, one in a form of a rounded rectangle, and the other in a form of a circle. Button animation consists of two parts. In the first part we animate a rounded rectangle with a very small width. When first animation is completed, we hide the first button and show the second one. This makes the transition between the two buttons almost unnoticeable.
Starting state:
Middle state:
Finished state:&
&And here's result in motion:
Voice memos record button
Having two buttons is not a panacea, though. Sometimes you might go in a completely different direction. For example, if you want to build iOS 7 Voice Memos record button, having two buttons is no longer going to cut it.
The solution here is a little different. Instead of changing the button shape itself, we chose to animate the mask of CAShapeLayer. This is possible, because CALayer mask can itself be a CAShapeLayer. To achieve implicit animations with it, we wrote DTAnimatableShapeLayer class. After that, animating button state change is a matter of simply decreasing or increasing mask around a button.
Conclusion
Shapes is a powerful tool for drawing shapes and controls on iOS. And it became even more powerful with XCode 6 and Swift, because in Swift you can watch how a UIBezierPath builds itself, step by step, line by line. This is just a start for Shapes. You can find an example project on GitHub with everything discusssed here. Now see what you can build with it.
Denys Telezhkin, aka DenHeadless on GitHub,&is&iOS team leader at&,&a Ukrainian company which specializes in mobile and web development following Lean principles. MLSDev uses agile methodologies to deliver the best solutions in minimal timeframes to reduce development costs.
More Information
To be informed about new articles on I&Programmer,,&subscribe to the&&and&follow us on,&&,&&or&.
The time has finally come for Firefox to upgrade the aging Gecko rendering engine that served it for 20 or some years.The upgrade will enable Firefox to take full advantage of modern CPU's and GPU's, &[&...&]
o The Unum Number Format: Mathematical Foundations, Implementation and Comparison to IEEE 754 Floating-Point Numbers
o Even&1×n&Edge-Matching and Jigsaw Puzzles are Really Hard&
Please enable JavaScript to view the
RSS feed of all content
Copyright © 2017 . All Rights Reserved.
is Free Software released under the专栏：iOS与LEGO EV3机器人 - 博客频道 - CSDN.NET
> & & > &iOS与LEGO EV3机器人
将iOS和LEGO EV3机器人结合在一起，通过蓝牙和wifi实现iOS对ev3的有效控制。在国内外都独一无二，全开源代码
共14篇博文
在这个系列之前的博客中，我研究觉得在iOS未越狱的情况下，无法使用蓝牙来控制EV3，编写类似Commander的程序。但，最近和网友的研究发现，通过External Accessory 来实现蓝牙的传...
在上一篇文章中，我们已经知道了如何通过WiFi将iOS设备和EV3连接起来，那么下一步的工作就是从iOS设备中发送命令给EV3并接收EV3返回的数据。这也是本篇文章将告诉大家的。首先要明确的一点是本开...
在上一篇文章中，我们讲解了如何用开源代码库CocoaAsyncSocket来实现iOS上的UDP和TCP数据通信。那么在本文中，我们将介绍在CocoaAsyncSocket的基础如何使用UDP和TCP...
在上一篇文章中，我们通过编写EV3 Port Viewer项目实现了iOS监测EV3的实时端口数据。程序最核心的部分就是我们的开源代码库iOS_WiFi_EV3_Library。那么，在本文中，我们将...
在前两篇文章中，我们对iOS与EV3混合机器人编程做了一个基本的设想，并且介绍了要完成项目所需的软硬件准备和知识准备。那么在今天这一篇文章中，我们将直接真正开始项目实践。==第一个项目： EV3 Po...
在上一篇文章中，我们论述了iOS与EV3结合后机器人开发的无限可能，那么，大家要不要一起来Hacking一把呢？为了能够完整地完成我接下来我讲的项目，我们需要做以下准备：1、一台Mac运行MAC OS...
乐高Mindstorm EV3智能机器人（以下简称EV3）自从在2013年的CES（Consumer Electronics Show美国消费电子展）上展出之后，就吸引了全球广大机器人爱好者的眼球！E...
视频链接：
点击打开链接
说明：使用Gyro Boy源程序修改加上蓝牙控制信号。手机端使用陀螺仪计算来实现手势操作。手机向前倾则加速，向后则减速。向左左拐，向右右拐。加减速视频中不是很...
在上一篇文章中，我们已经实现了iOS通过BTstack给EV3发送Message！
但仅仅发送Message显然不是我们的目标！
我们要控制EV3的动作！
这需要依靠EV3协议中的Direct Co...
在上一篇文章中，我们已经分析了iOS通过BTstack这个第三方库连接外部蓝牙设备的方法，也就是可以连接EV3了。
那么，在连接成功之后，我们要做的关键就是给EV3发它可以识别的信息。这...
在上一篇文章中我们已经分析出使用BTstack是解决问题的办法，但当时还没有进行具体的测试。
那么经过几天的研究，终于实现了BTstack与iOS的通信，也因此事实上证明了方法的可行。
在上一篇文章中，我分析得出最后的方法是dig源代码。
把200多M的源代码从GitHub上下下来后，用搜索的方法竟然就只找到几个含有iPhone 字样的宏定义。要深入的研究源代码，唯一的方法就是装个...
在上次的资料收集中，我们已经找到了EV3的蓝牙通信协议。
按照之前的设想，只要能够通过蓝牙将iPhone与EV3连接，那么根据协议就有望实现对EV3的控制。
但今天发现事情并没有想像的简单。
...
EV3自从去年发布之后，
因为配备了ARM处理器，底层又是Linux，还支持Bluetooth和WiFi，
已经吸引了大量爱好者在Hacking！我也算其中之一吧，就是晚了点。
从今天网上搜集的信息...
1889427611}