How can I animate drawings made in PaintCode?

PaintCode can generate drawing methods with parameters (read about Variables to learn more). These parameters can be colors, gradients, shadows, images, texts, points, sizes, rectangles and booleans. Changing the values of these parameters and re-drawing your code will animate your drawing.

Please, check out the "Example.pcvd" document and the "Animations" tab in the example project.

Animation with UIView and NSTimer

Check out the "Clock" canvas in the "Animations" tab of the "Example.pcvd" document. This canvas uses "WatchColor", "hrs", "mins" and "secs" as a parameters of the drawing method.

EXClockView, subclass of UIView, implements "clockColor", "hours", "minutes" and "seconds" as IBInspectable properties. These properties are then used as a parameters when calling the StyleKit drawing methods inside the overriden drawRect(_:) (Objective-C: drawRect:) method. NSTimer created in EXAnimationViewController periodically calls the updateClock(_:) (Objective-C: updateClock:) method to adjust the values of those properties and redraw the view.

Animation with custom animatable property of CALayer

Check out the "LiveButton" canvas in the "Animations" tab of the "Example.pcvd" document. This canvas uses "LiveButtonColor", "strokeWidth" and "radius" as a parameters of the drawing method.

EXAnimationLayer, subclass of CALayer, implements "color", "radius" and "width" properties used to drive the animation. It also implements all necessary methods to make these properties animatable in the drawInContext(_:) (Objective-C drawInContext:) method, the StyleKit drawing method is called using the "color", "radius" and "width" properties as parameters.

Animation with custom animatable property and delegate of CALayer

Check out the "Aperture" canvas in the "Animations" tab of the "Example.pcvd" document. This canvas uses "apertureValue" as a parameter of the drawing method.

It also uses "angle" expression where angle is calculated from the "apertureValue" variable. The "angle" variable is connected to each part of the aperture (see "Transforms" box in the inspector). EXApertureView file defines both EXApertureView subclass of UIView and EXApertureLayer subclass of CALayer with animatable property "apertureValue".

In this example, the default UIView layer class is set to EXApertureLayer subclass of CALayer and its UIView is automatically set to be a delegate of view's layer (EXApertureLayer). The delegate implements drawLayer(_:inContext:) (Objective-C: drawLayer:inContext: ) method to call drawAperture(_:) (Objective-C: drawAperture:) in StyleKit.

The last two examples support both implicit and explicit animation using CAAnimation.

Facebook Origami with PaintCode

You need to install PaintCode Quartz Composer plugin in order to use PaintCode document within Origami (and Quartz Composer).

The plugin allows you to use a special PaintCode patch in Quartz Composer. With this patch, you can use PaintCode vector drawings with Origami (and Quartz Composer). Moreover, it also allows you to specify the values of parameters of your PaintCode canvases. These parameters will automatically appear as input ports of the PaintCode patch.

PaintCode Origami Plugin with sample project can be downloaded from our Origami page.