2.2 – Creative Coding with Swift – Animation

2.2 – Creative Coding with Swift – Animation


Hey coders. So in this video I’m going to
show you a little bit of code and hopefully you’ll follow along. Please
feel free to pause the video if you need to catch up or rewatch certain areas
that are confusing to you. We’re going to talk about animations in this video and
animations in C4 and Swift are not self-explanatory. It is a little bit of a
thing you have to wrap your head around and I will help you with a sunset and
sunrise simulator… very simple, simple code and you’ll see what I mean when we
start to build it together. So first of all I’m gonna modify the background
color because it has to be… the background is my sky. All right then
we’re gonna create a circle. The circle will be my sun. Use the center radius
initializer and I’m gonna… center horizontally is going to be canvas dot
center dot x and then since the sun is gonna start at the very bottom of the screen,
the way that I access that is canvas dot height. That takes me to the very bottom
of the screen and my radius is going to be 150 pixels. Let’s change the fill color to orange…
classic sun color and let’s change the line width so this is an attribute that
allows me to remove the line. So 0.0. By default C4 shapes all have
an outline on them. I’m not a big fan of that so… and then let’s canvas dot add
myCircle. So a good thing to do instead of writing a bunch of code you want to test
it every time you get to a place where you can. Since we’ve just added to the
canvas this is a good place to actually test that some of our code works and
that it compiles. My simulator has already launched and
there we go. So that looks like a landscape with the sun rising and next
we’re going to think about adding our view animation. So let a equal… So I’m going to change this a little bit
and you can feel free to do the same. In Swift animations are objects so they’re
just like everything else in Swift… all of our shapes… we can create them and
then manipulate their attributes. This is a something you will see over and over
and over again in Swift and it actually becomes really useful because everything
is modifiable and customizable. So I’m gonna have a duration of five seconds.
It calls for a double which is a number with a decimal point and then on the
inside of this I’m just going to say myCircle dot center equals point…
so remember canvas dot center dot x is the horizontal position of the center
of the canvas and then zero is the y position. That would be at the very top
and when you’re inside of a code block you have to add the self. The self takes
you outside of the code block and allows it to refer… if I were to remove that it
would cause an error. It always wants it. It always wants you to be very specific.
Swift doesn’t like non-specificity. And I’m gonna change the background
color to cyan because as the day gets longer the sky gets less dark and rich
so… and I think that’s good so when you create an animation you have to do
something with it. Just like with shapes, you have to add it to the canvas, you
also have to start the animation. So the way that you do that… there are a
few settings… a few attributes I want to change. I want to make this one auto-
reverse. That’s true. I also want to make it repeat, so that’s gonna be true and
these are booleans. So anytime you see a true or a false that means it’s a
boolean and then all you have to say is a dot animate and that’s a function that
starts the animation. And there we go. We have a five-second
long duration. It auto-reverses and it repeats and one thing I want you to
notice about Swift and C4 and and Apple’s animation frameworks in general
is that everything tweens by default. So if I change the color it’s
going to change it gradually inside of an animation. If I change the position,
it’s going to change it gradually and it does all the work for you, which is both
good and bad. I think it takes a lot of the guesswork out and you’ll find that a
lot of the things in Swift and a lot of Apple’s frameworks are all about making
coding easier for you, but it does take away some
customizability, so there are going to be… as you learn to code there will be other
ways that you want to move things around on the screen. This is just one tool for
your toolbox. So I hope that teaches you animation and I hope you take this and
use the basic principles for your own work. See you in the next video.

Leave a Reply

Your email address will not be published. Required fields are marked *