Hey everybody what's going on this is Caleb with Loeb's dot com and I hope you're excited because in
this video we're going to go ahead and set up that amazing parallax effect that takes advantage of the
accelerometers and gyroscopes in your iPhone.
So let's actually just let's get started let's do it.
So pull open your project go into your parallax cell subclass and we're going to go ahead and finish
writing this set up parallax function so you can actually go ahead and close the terminal or the console
rather and make some space.
So here we go.
We're going to go ahead and first set up two properties and these two properties are what are going
to allow us to determine how much slide or movement happens when the parallax effect takes place.
So we're going to say a minimum and a maximum value to kind of give it a range of motion.
So go ahead and type let me in and we're going to set the minimum value to be negative 30 then we're
going to set the max to be positive 30.
OK so we're basically saying hey if I move my phone you can go a maximum of 30 to the left right up
or down.
So let Max equals positive 30.
But the thing we do need to think about is that this framework we're going to be using requires our
values to come in as C.G. float.
So type C-g float and put negative 30 in parentheses and this is just going to force it to be a type
C.G. float.
OK so go ahead and do that C.G. float and then put the values in parentheses.
So now we have set the amount of parallax that we're allowing 30 to the left right up or down.
And now all we need to do is set up a property for the x motion.
So if our phone moves you know up or down on the x axis and the y motion for moves left to right on
the y axis.
So let's create two properties let x motion equals and let y motion equals.
OK.
Make some space for both.
And this is going to be equal to a property or I guess a class called UI interpolating motion effect
and check it out.
It is an object that maps the horizontal or vertical tilt of a device to values that you specify so
that you can apply those values to your views.
So guys this is built in to Iowa.
We don't even have to build this.
It uses the accelerometer already.
It uses the gyroscope data and it applies it to you I could elements to amazing.
So go ahead and click on that.
And then when we instantiate it we can choose an option here with a key path and a motion effect type.
So click on that and the key path that we actually want to modify is the the x property of the image
right.
So if we go ahead and pass in a string here we can type layer whip's layer dot transform.
So we're basically saying hey I want the image in image view that's the layer I want to transform it
the trance formation I want to cause is a translation right because it's sliding on the screen.
And I want to modify the x axis.
OK.
Now the type of motion is dot tilt along horizontal axis because the x axis is the horizon.
The why is vertical so go ahead and select tilt along horizontal axis.
And now what we need to do is say hey what is the minimum and the maximum for the x axis and to do that
we're going to use our min and max values so go ahead and type x motion.
Minimum relative value equals men.
We already have a property then type x motion for maximum relative value and set Max.
OK that's all we need to do to set up parallax on the x axis.
Now you might be wondering well I wonder if the y axis is the same as well.
It might be I don't know yet.
No it's totally the same guy.
So let's go ahead and type you I interpretating motion effect.
Give it a key path and we're going to do the same thing that we did above here except we're going to
go ahead and perform a translation on the y axis.
So passing a string here léa transform.
Translation dot Y and the type is going to be tilt along vertical axis.
OK.
Now we need to set the minimum and maximum relative values by typing y motion minimum and go ahead and
pass in the min value.
Then we're going to call y motion maximum relative value and pass in the Max.
OK.
So we now have two properties that keep track of and basically transform whatever we call this on on
the x and y axis based on the minimum and maximum values that we've set.
The last thing we need to do is to actually add these motion effects to our image view.
So to do that we're going to go ahead and create what's called a motion effect group and it's essentially
just a folder that we can drop these two effects and add them at the same time instead of needing to
add them individually.
So go ahead and type let motion affect group equal UI motion effect group and then you're going to instantiate
it like so you're going to go ahead and type motion effect group dot motion effects and you'll notice
it's an array of motion effect.
Now these are all both these are both motion effects so we can say hey that equals x motion comma y
motion and now we have an array of motion effects that we can add to our image view.
So the image is what we want to modify and so to do that we're going to go ahead and call item image
if you don't add motion effect and we can pass in our motion effect group.
Now if I build this you'll notice we get no errors.
The only thing we need to do is to actually call it in Awake from NIB and build our app.
It is that easy to add parallax to an image view.
All right.
So let's go ahead let's build and run it let's see how we did.
We have successfully set up parallax for every cell we've added our motion effects guys let's do it
let's see how we did building and running a pull up in my simulator here.
As soon as the app is up so that we can see how we did super cool stuff guys.
All right.
Here we go pulling it open.
Look at that as we move.
We get translation on the x and y axis no matter how we move the image moves around.
Guys this is the coolest You can do this with any image view in your application to just give a little
bit of an extra visual edge a little bit of a visual effect to your project.
Amazing amazing work guys were done.
I mean that's that's literally how easy it is.
And in the next video I'm going to give you a challenge to challenge what you have learned so far about
the accelerometer and gyroscope in Iowa.
I'll see you there.