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
NSTimer created in
EXAnimationViewController periodically calls the
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
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
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.