Bounce Animation (Swift in Xcode) Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

everybody today I'm going to show you
how to animate something kind of
bouncing in into your scene with Swift
and Xcode so let's go ahead and get
started
stop coming up with pop-ups first let's
hop on into Xcode and create a new Xcode
project this is going to be a single
View application click Next and our
product name I'm just going to call nine
cents our language will be set to Swift
and our devices will be set to iPhone
click Next and create now let's make
this a bit bigger Wow okay let's make
this a bit bigger head over to our main
dot storyboard and inside of our main
dot storyboard the first thing we want
to do is just add a button so go ahead
click and drag a button onto our scene
and this is the button that we are going
to actually make bounce so let's go
ahead right-click or control click and
drag from this button over to our scene
and we're going to make him Center
horizontally in the container and Center
vertically in the container and that
that's basically all we want to do with
the button now let's go ahead hop on
into our view controller not Swift now
inside of our view controller dot Swift
inside of our viewdidload we want to say
UI view dot to animate with duration so
we want to animate something so we're
going to animate with duration duration
delay using spring with damping so be
sure to click that or tab that all in
and inside of this we our duration we're
going to set this equal to one second or
however long you want it to be our delay
we want this to happen immediately so
I'm going to set that to zero using
spring with damping the damping
basically means imagine there's a
marshmallow so when the marshmallow
comes and there's a spring coming at the
marshmallow the marshmallow is going to
slow down the spring up into an ease in
a position so I'm going to set this
using spring with damping just equal to
1.0 seconds you can play around this
about with this value to see what kind
of results you get but I'm going to set
that to 1 second initial spring velocity
I will set this to 5 although we will
play with around with this number a bit
later and options we're going to make
this equal to nil
and animations we are going to say open
parentheses close parentheses and then
inside of this say open curly bracket
enter and close curly bracket and then
completion we will say nil lowercase n
il now you shouldn't have any errors so
now whether we have no errors let's hop
on into our main dot storyboard and go
over to our assistant editor and
right-click or ctrl click and drag from
this button right over here over to our
viewcontroller.swift we are going to
insert this as an outlet and just call
the name of this button button
BTN now our button is just going to go
into our view did load and first thing
we need to do is as you can see our
button is loaded up in the center of the
screen so we need to make the make it
offset over to the side of the screen so
we can easily do this by just saying
button dot center dot X will be equal to
our self dot view dot frame dot width
and we will make this plus 30 just so
it's 30 pixels off the side of the width
and then down here on our animate with
duration we want to say button dot
center dot X will be equal to self dot
view dot frame dot width divided by two
so we are setting it exactly in the
middle of the scene so now let's go
ahead build and run and we should see an
easing in of our button now we also have
this error that just came up it says
reference to property BTN enclosure
requires explicit self dot basically
this means we need to say self dot
button dot center as we reference this
inside of a UI view which means that we
kind of have to create new variables or
we either call a variable by st. by
calling it exactly from our view
controller UI view controller that is
exactly what this self dot button dot
centered x means so if you are
referencing anything outside of your UI
view dot animate with duration you will
have to put itself in front of that so
let's go ahead build and run so as you
can see it's going to build and run but
the button just appears on there so
let's go ahead play around with some of
these numbers and say using spring with
damping our initial spring velocity we
will now set this equal to we'll say one
point zero second over one point zero as
our velocity and if we were to build and
run this
and now we get kind of an ease into it
we don't get such a sudden thing
happening now let's go ahead play around
with this number a bit more we can set
this to we'll say six and you still get
a nicer ease in but it's a little bit
faster and now if you wanted it to
bounce back you can play around with
this number but basically if you want it
to be really fast in order for it to go
back and then forth like so so you're
going to get this nice little animation
of it going past the scene and then back
into its a position that it's supposed
to be in and of course you can always go
back to your UI view dot animate with
duration and change the duration of this
to like four seconds we'll say and now
we'll have a very slow ease in but we'll
still have the initial spring velocity
and everything happening still so there
you have it it just kind of eases in
again play around with the numbers get
something that you like but that is how
you use UI view dot animate with
duration using a spring velocity now of
course if you want to make several
objects go into the scene you can do
this by simply adding a label will say
just showing you the set this does the
same thing with different objects so
let's all go ahead add the label we'll
set this up to our view controller dot
Swift and this will be an outlet and
we'll call this label connect and if you
want it to be a different animation you
can say just add this right in here and
we'll say animate with duration
we'll make this two seconds versus one
seconds up here and instead of self
button Center X you will make this self
dot label dot center dot X equal to our
self dot view dot frame dot width
divided by two and then but again we can
take this label up here and we can say
label dot center dot X will be equal to
and we'll just basically place it in the
same place like so and we can build and
run this and this equal sign and the
self should not be mixed together now
let's go ahead build and run
and you will see a different kind of
bouncing thing happening along with each
of these labels and buttons now as you
can see the label was a bit offset so
again we need to go back to our label on
our main dot storyboard and right-click
or ctrl click and drag from the label
and say Center horizontally in container
and center vertically in container we're
just adding constraints to this so it
automatically does it in the proper
place so now we have our button and our
label and again you can adjust the
initial spring velocity or the using
spring with damping you can change the
amount of damping that goes on so if I
were to move this to like five you will
see a lot more damping and you won't get
so much of a bounce effect and of course
you can do this with a uiimageview but
I'm not going to show you how to do that
as I think you should get the general
gist of how everything works
so yeah just basically play around with
these numbers and you'll get something
that you like that's it for this
tutorial if you enjoyed it be sure to
hit that like button down below and if
you want to see more tutorials like this
from me in the future be sure to
subscribe thank you all so much for
watching and I will see you in the next
one