Drawing your Animation in Code

You are a developer and there are so many options to choose from to develop. However the biggest factor that differentiates between Apple Mobile apps and other apps is the ease and amazing effects offered. However most of this is generated via code. What if there was some way to create these animations visually?

Starting from the days of Adobe Flash, the canvas with a timeline was made popular. You could simply drag drop items onto the canvas and you could set the properties for these items and then when run, it would animate accordingly.

QuartzCode

As a Mobile App developer, we know how QuartzCore library provides all of the amazing drawing and animation functionality. With a similar sounding name, QuartzCode provides you an Editor based option to draw and test out all of your animations and drawings.

The Cool

From the samples and the videos on YouTube that demonstrate the use of QuartzCode, it is amazing. The effects are smooth and the best part is that they are self-contained. In plain words that means that you can export the animations and/or the art into code and use it in your own application.

Why would you need this?

There are a couple of reasons why someone would want this. If you are a developer and have created at least an app for the iOS; you are then aware about the images, the @2x and now the @3x. When the iPhone4 was released, developers had to now create two set of graphics, one for the lower resolution devices and one for the higher resolution. The only problem with this is that memory on mobile devices are limited. Uncompressed, the size of a graphic image at iPhone 5 screen size (1136x640) is approximately 1136x640x4 = 2,908,160 or about 2.7 MB. In a game where you have a couple of backdrops and animations, etc you graphics assets can easily reach the 20-30 MB mark. For that there were techniques like spriteSheets or Textures. We have covered a couple of applications that help you achieve that. The problem remains, now that we have a newer @3x resolution. Our existing graphics would not scale well and hence the graphic artist or you would create a newer set of graphics that suit/fit this new resolution. This is where the industry introduced vector art. This was an alternative for raster (or bitmapped images). In the earlier days of vector art, it was nothing to talk about. if you have ever worked with MS Office prior to a 2000 version, you must know ClipArt and WMF files. These were the early attempts of vector art, then there are the more current SVG formats. In all fairness, your holiday picture cannot be (as yet) captured as a SVG file, a stunning 14-15 megapixel JPEG/RAW file would be best suited for that. But for Icons, you could consider a vector drawing as it could scale down for tab bar elements and scale up for the splash screen. Even as they scale up or down, they retain the crispness and best of all, they are part of your code not images that can be nicked by others. Apart from the Vector VS Raster comparison, the other advantage is that it allows you to handcraft your animations and test them in QuartzCode tweaking the little bits that you want before exporting the results in Obj-C or Swift as source code that can be included in your application.

Does it do what it Advertises?

QuartzCode is at version 1.12.9 and in its current form is quite an exciting application that can provide you with most of what you would need. The objects, vectors and hand-drawn points can all be added to the canvas and edited, moved, etc. Each of the object can animations added to them. All animations are time based and the ode is generated on the fly adapted to be generated for iOS/Mac in Obj-C or Swift.

Code? Tell me more...

This is becoming quite popular and is seen with PaintCode, Stencyl, and a whole lot of other softwares. This Visual programming paradigm might one day take over. This is not something new, in the past there have been many software packages that have provided abstraction between the code generated and the visual editor. A lot of Web Editors provide you with something similar. Back on the topic, if we drew a circle on the screen, we would get something like

import UIKit
class CustomView:UIView {
  var oval:CAShapeLayer!

  override init(frame:CGRect) {
    super.init(frame: frame)
    setupLayers()
  }

  required init(coder: aDecoder) {
    super.init(coder: aDecoder)
    setupLayers()
  }

  func setupLayers() {
    oval = CAShapeLayer()
    oval.frame       = CGRectMake(67. 130, 46, 45)
    oval.fillColor   = UIColor(red:0.922, green: 0.922, blue:0.922, alpha:1).CGColor
    oval.strokeColor = UIColor(red:0.329, green: 0.329, blue:0.329, alpha:1).CGColor
    var ovalPath     = UIBezierPath(ovalInRect: CGRectMake(0, 0, 45.785, 44.699))
    oval.path = ovalPath.CGPath;
    self.layer.addSublayer(oval)
  }

  @IBAction func startAllAnimations(sender: AnyObject!){

  }
}

Pretty much the same code that you would write as a coder in Xcode or any other editor of your choice. The only difference is that this is generated visually by placing a circle on the on-screen canvas and you can update your code as you reposition the item on screen visually!! When you are satisfied and good to go, just export and include the code files into your application. You could also tweak this to separate the code for Bezier Drawing. Of course there is a custom file full of utility functions that assist this code (nothing in the sample above uses any of that code). This file called QCMethod is also exported with your work.

Show me the results

The developer has created several videos and they can be found here http://www.quartzcodeapp.com/examples/. Custom Views and custom animated views are now much easier. In addition to these videos, the developer has a wonderful repository of notes, explaining what most of the functions and terms are.

However there are two things that one must note,
1. You need to either have a good understanding of CoreAnimation and QuartzCore or have good clear concepts about animation.
2. If you have neither, you can still create amazing stuff but you might have to visit the videos a few times to see what was done to achieve that particular effect. The videos do not have voice or text overlays so it could be a bit difficult for the beginner.

The Hits and the Misses

First the Hits
Some of the things that I loved with QuartzCore are the Timing Functions, you can visually set these by altering a graph. This is quite handy to create animations. Specially if you do not understand maths.
Till date, majority of the animations were based on moving the x, y co-ordinates of a sprite/object. If you have read the principles of Animation (the Disney version) you would know that dynamism in animation comes from a lot more than just displacing an object. It involves squashing and stretching. Watch any old Tom & Jerry or Warner Bros cartoons, even some old Disney ones for a visual understanding. When animation became digital, cell animation was fine, but these techniques would being alive basic objects like circles and rectangles without the need of cell animation. Then recently, someone came up with the animated Hamburger menu, where the three hamburger lines morphed into a cancel button and vice-versa. There is an open source project that has a couple of these providing a set of buttons that can morph into the other.
Long story short, creating that for the beginner is a bit too involved. However with QuartzCode, this is like staging any other animation. The results are nothing short of amazement. It was right there, these properties were all animatable and not many developers used the strokeEnd or the strokeStart to animate. With QuartzCode, you can explore a lot more properties and achieve amazing effects added to your apps. There are some other interesting components that need a mention too. The CAReplicatorLayer, now I have not seen a lot of reference to this or samples that use this, worse still that Apple has no code samples for all of their API's. Something that Microsoft had covered since their Windows 3.1 API 5 volume set. Each API had some code to show how things worked or were used. Personally after seeing the video, I can visualise so many more uses for this. I have not used this in the past, but now intend to use this in the future. Look at the Spinning Indicator using Replicator sample/video for details on this component.
The Other is the Effect Layer, this is more like a Group Animation, where all the elements are applied the same transforms.

My personal favourite is the Text Animation, where you can split text into curves and then animate the stroke and fill on each to animate the construction of the text. Simple effects generated via code and can take over a lot of cell/frame based animation AND would scale and remain crisp on an iPhone4 to a iPad Air or even the newer iMac Retina.

Summary

All in all, firstly, there is no other software that helps you create animations visually. Secondly, these are all generated by using what Apple has offered in their own API, not using a 3rd party library. The included QCMethod file are helper functions than anything else. In my opinion, this is not only for non-developers to create animations, but for developers as well to better understand and use these in their own applications.

Competition

Are there other contenders? Is there anything else that comes close or does something similar? The first thing that many would say on first sight is Oh, PaintCode! However this is not PaintCode. PaintCode is a different piece of software that caters to generating UI's from the drawn elements. QuartzCore uses the QuartzCore library to provide and visually draw animations. The developer has something similar in the genre of PaintCode called BezierCode (review coming soon). There are some other competitors to PaintCode and BezierCode like Qwarkeee, CGSnippets, QBlocks and many more. The major point of difference is that this generates both Objective-C and Swift code, where as some generate only Objective-C code.

App Details

Software : QuartzCode
Version : 1.12.9
Publisher : Wan Ahmad Lutfi
Website : www.quartzcodeapp.com
Twitter : @quartzcode
Platform : Mac OS X (10.9.x or higher)
Demo : Free Trial Version
Price : $89.99 USD or ($114.99 AUD)
Mac App Store : https://itunes.apple.com/us/app/quartzcode-vector-animation/id913523893?ls=1&mt=12

And we have the developer providing a couple of licenses (3 - Three) of QuartzCode for some lucky winners, all you need to do

1. Follow @whatsin4me
2. Retweet the message "Read reviewme.oz-apps.com, follow @whatsin4me and RT this msg. Might win a copy of #QuartzCode from @quartzcode"

NOTE: To be eligible it should include both @reviewme and @quartzcode and the lucky winners will be determined and the licenses issued directly from the developer. The cut off for this is 24th December 2014. Do not miss this chance.

and you could also Follow us on Facebook by liking our page at http://www.facebook.com/pages/ReviewMe/137640632964588

ReviewMe

Search This Blog