Features

generate Code
Turn Drawing and Animation to Code

Apply animation to vector drawing or raster image. QuartzCode generate Objective C or Swift code in real time to be used in iOS or OS X project.

multiple animation 2
Multiple Animations

Create multiple animations states in a single QuartzCode project. Very useful if you need to create different animation using same asset. Each animation have its own method which you can call using the generated code.

SVG Import

Import SVG Files created from other vector drawing application into QuartzCode

sharedColor2
Shared Color

Reuse same color across different layers and timelines. The color is created as property in generated code so you can still change the color using Xcode.

Layers

Each layers in QuartzCode has different use and have their own unique animatable properties. You can combine multiple layer types to create interesting and unique animation.

hamburger
Shape Layer

Use basic shapes provided or use pencil or vector tool to create shape. Modify them using boolean operations, vertex mode or transform mode. You can also import SVG file created from other applications.

heart
Emitter Layer

Emitter layer can be used to create effects such as smoke or sparkles, and they can also add beautiful details to animation. Emitter layer can take multiple emitter cells so you can use and define multiple images and properties in an emitter layer.

image
CALayer/UIView

In QuartzCode, image is contained by either CALayer or UIView. It is a great way to put placeholder image for prototyping, and you can also animate it and get the code at same time.

loading
Replicator Layer

Replicator layer lets you create repeating pattern from its sublayers. You can use any layer type as sublayers, including image. This make it possible to create many interesting patterns with or without animation.

text
Text Layer

Text Layer let you create basic text and get CATextLayer/ UILabel/UITextView code. Text Layer can be converted to effect layer to produce text effects.

maskCar
Mask

Mask works similar to shape layer. So you can create custom mask path or animate it as you control shape layer too. You can mask any other layer and inverse mask also supported.

Effect Layer

Effect layer can chain and combine multiple animations to create a delayed animation. Add any animation to effect layer and set instance delay, all of its sublayer automatically have the animation with incremental delay. There are various ways delayed animation can be utilized, one of them is to create various text effects.

button
arrowDot
calculatorAnimation
text

Timeline Panel

Timeline panel is used to add and modify timelines added to animation. Timeline Panel has been improved to ease usage whether when creating simple or complex animation.

timeline_1.3
keyframe value Preview
Keyframe Value Preview

For animatable properties that use color, gradient, number and bool, value for each keyframe is shown at the timeline. 

customTimingFunct
Timing Function

In addition to default built in timing function such as linear, ease in, ease out, ease in ease out, custom timing function also can be used.

Animation Speed

Change animation speed so that the animation can be observed closely. You can also set the animation to repeat indefinitely.

Realtime Tweaking

Change layer or animation property and see layer state automatically changed. Use time indicator to see layer state at specific time.

Animatable Properties

transform2

•  Transform

positionPath2

•  Position

fillColor

•  Fill Color

strokeEnd

•  Stroke End

  • Z Position
  • Shadow
  • Opacity
  • Line Width
  • Path
  • Stoke Start
  • Stroke Color
  • Gradient
  • Line Dash Phase
  • Font Size

Tools

vectorTool
Vector Drawing Tool

Use built-in vector shapes to draw shapes. Use boolean operation, vertex mode and transform mode to refine the shapes.

transform
Transform Tool
inspector2
Layer Inspector

Layer Inspector is where layer properties can be edited. Each layer type has different properties that can be edited.

clockAnchorAlign
Alignment Tool

Alignment Tool can be used to align multiple layers. Align based on layers anchor point also supported.

Gradient editor
WYSIWYG Gradient Editor

Generated Code

codegenerator1.32
iOS and OS X
Objective C and Swift
Realtime Code Generation
IBDesignable
Relative Frame

With relative frame, it is easier to support multiple devices with different resolution. Currently frame, path, position animation and translation animation are supported.

Completion Block

Each animation now have completion block, so you can perform necessary action when an animation is completed.

Reverse Animation

Reverse complete animations in Xcode even for multiple animation with different layers.

Animation Duration

Duration of an animation now can be set manually using Xcode when Animation Duration option is selected.

End Time

Using end time option, an animation can be ended abruptly before its original time.

Documentation