Bees & Bombs
Rebuilding a gif from Bees & Bombs
10 - 20 minutes
The core focus of C4 is to make building beautiful interactive experiences and interfaces. C4 is centered around Apple’s Core Animation (CA) framework, and makes programming interactivity, animations and media way faster and way easier than working directly with CA.
This tutorial highlights the basics of getting media on screen and, in some case, playing. It is broken into self-contained examples so that you can jump to any section without having to read through the entire thing.
I built all these examples using the C4 Single-view template, that comes from the installer.
All of the examples below can be pasted into the
setup() function directly in
For example, here’s how you can run the circle example:
Shapes are all pretty straightforward: paths that you can style.
To create a square or a rectangle all you need to do is specify the frame into which it will be drawn:
To create a circle you need to specify a center point and a radius:
For anything that isn’t a circle, you specify the frame (just like a rectangle):
To create a line you need to specify a 2-element tuple (i.e. not an array) of
Lines are special 2-point polygons whose end points can be updated
To create a triangle you need to specify a 3-element array of
Triangles are simply 3-point polygons that close between the last point and the first point.
To create a polygon you need to specify an n-length array of
Creating a regular polygon, whose sides are all equal in length, is similar to creating a circle:
The phase refers to the inital angle from which to start drawing the shape.
Creating a star is also similar to creating a circle:
Creating an arc is similar to creating a circle, except you also need to add a start and end angle:
Creating a wedge is identical to creating an arc, except that it draws the pie-piece all the way down to the center point of the shape:
You can create a text shape by specifying a string and a font:
TextShapeinitializer is optional because it depends on an optional font. So, you’ll need to handle it properly. Here, I know it will build properly so I force unwrap it with a
C4 has its own color object, and there are a ton of default colors and 3 of our own colors that we’ve cooked into the framework.
The three default colors that we have in C4 are from the logo. There is
C4Blue. Here’s how to use them:
There are a bunch of default colors cooked into C4. Here’s how to use a couple of them:
Color.swiftfor all the default colors.
Creating a custom color is pretty straightforward, you need to specify the RGBA components:
You can create colors from images too! Do it:
To add an image you simply specify the name of the file you want to use:
There are some nice filters that are already a part of C4. You can apply a filter to an image like this:
There are also image generators:
Notice that I didn’t use an optional here. This is because creating an empty image from a frame is always going to return an object. Unlike specifying a “fileName” that may or may not exist.
Like images, you can easily add movies to your apps by specifying the name:
Unlike images, you need to specify the file extension of the movie.
Even though you specify the file name (incl. extension) creating an audio players is a little different than a movie. You need to create a variable outside the scope of the method you’re using to set it up:
When a movie is added to the canvas it gets a strong reference because it’s a subview of the canvas. Since an audio player is not a visible object to add to a subview, you need to store a reference to it as a variable.
Compared to UIKit, adding a gesture is a cinch. In C4, every visible object is ready to have gestures attached to it, even the main canvas.
You can add a tap gesture to any object like so:
You can add a pan gesture to any object. In this example, panning (i.e. dragging) on the canvas will update the position of the square:
Almost every single object in C4 is animatable in one way or another. Visible objects have the most animatable properties, but others like
AudioPlayers can also animate things like their pan properties.
In general, a good rule of thumb is:
If an object has a property, it’s probably animatable.
To animate something you create a
ViewAnimation and put some code to change inside that object’s block. For example, the
background property of any object (including the canvas) is animatable:
The previous block will immediately animate the background color to
C4Blue, taking 1 second to do so.
You can also create the animation as an object, change its properties and animate it later, like so:
If you have a bunch of animations that you want to start at the exact same time, you can do that by creating a
To execute a bunch of animations one after another you can use a
Shapes. Images. Movies. Audio. Gestures. Animations. These are the basics you’ll need to build any of the amazing iOS experiences you can imagine.
Grab of a copy of the the code from this tutorial: Basics Tutorial Code
Seriously. Complex interfaces and UI elements are all really just made up of these fundamental building blocks.