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.
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.
Import SVG Files created from other vector drawing application into QuartzCode
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.
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.
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.
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.
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.
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 Layer let you create basic text and get CATextLayer/ UILabel/UITextView code. Text Layer can be converted to effect layer to produce text effects.
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 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.
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.
Keyframe Value Preview
For animatable properties that use color, gradient, number and bool, value for each keyframe is shown at the timeline.
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.
• Fill Color
• Stroke End
- Z Position
- Line Width
- Stoke Start
- Stroke Color
- Line Dash Phase
- Font Size
Vector Drawing Tool
Use built-in vector shapes to draw shapes. Use boolean operation, vertex mode and transform mode to refine the shapes.
Layer Inspector is where layer properties can be edited. Each layer type has different properties that can be edited.
Alignment Tool can be used to align multiple layers. Align based on layers anchor point also supported.