1
00:00:07,170 --> 00:00:11,610
Hey everybody what's going on this is Caleb with Loeb's dot com and I hope you're excited because in

2
00:00:11,610 --> 00:00:16,380
this video we're going to go ahead and set up that amazing parallax effect that takes advantage of the

3
00:00:16,380 --> 00:00:19,460
accelerometers and gyroscopes in your iPhone.

4
00:00:19,470 --> 00:00:22,110
So let's actually just let's get started let's do it.

5
00:00:22,110 --> 00:00:28,290
So pull open your project go into your parallax cell subclass and we're going to go ahead and finish

6
00:00:28,350 --> 00:00:34,740
writing this set up parallax function so you can actually go ahead and close the terminal or the console

7
00:00:34,770 --> 00:00:37,710
rather and make some space.

8
00:00:37,710 --> 00:00:38,850
So here we go.

9
00:00:38,940 --> 00:00:44,100
We're going to go ahead and first set up two properties and these two properties are what are going

10
00:00:44,100 --> 00:00:51,180
to allow us to determine how much slide or movement happens when the parallax effect takes place.

11
00:00:51,180 --> 00:00:56,160
So we're going to say a minimum and a maximum value to kind of give it a range of motion.

12
00:00:56,160 --> 00:01:02,910
So go ahead and type let me in and we're going to set the minimum value to be negative 30 then we're

13
00:01:02,910 --> 00:01:04,770
going to set the max to be positive 30.

14
00:01:04,780 --> 00:01:10,770
OK so we're basically saying hey if I move my phone you can go a maximum of 30 to the left right up

15
00:01:10,800 --> 00:01:11,310
or down.

16
00:01:11,310 --> 00:01:14,780
So let Max equals positive 30.

17
00:01:14,790 --> 00:01:21,210
But the thing we do need to think about is that this framework we're going to be using requires our

18
00:01:21,210 --> 00:01:22,890
values to come in as C.G. float.

19
00:01:22,900 --> 00:01:30,000
So type C-g float and put negative 30 in parentheses and this is just going to force it to be a type

20
00:01:30,000 --> 00:01:30,940
C.G. float.

21
00:01:31,260 --> 00:01:35,590
OK so go ahead and do that C.G. float and then put the values in parentheses.

22
00:01:35,610 --> 00:01:40,630
So now we have set the amount of parallax that we're allowing 30 to the left right up or down.

23
00:01:40,830 --> 00:01:45,660
And now all we need to do is set up a property for the x motion.

24
00:01:45,730 --> 00:01:51,570
So if our phone moves you know up or down on the x axis and the y motion for moves left to right on

25
00:01:51,570 --> 00:01:52,900
the y axis.

26
00:01:52,920 --> 00:02:00,620
So let's create two properties let x motion equals and let y motion equals.

27
00:02:00,620 --> 00:02:01,140
OK.

28
00:02:01,500 --> 00:02:03,100
Make some space for both.

29
00:02:03,240 --> 00:02:10,590
And this is going to be equal to a property or I guess a class called UI interpolating motion effect

30
00:02:11,010 --> 00:02:11,730
and check it out.

31
00:02:11,730 --> 00:02:19,320
It is an object that maps the horizontal or vertical tilt of a device to values that you specify so

32
00:02:19,320 --> 00:02:22,020
that you can apply those values to your views.

33
00:02:22,020 --> 00:02:24,140
So guys this is built in to Iowa.

34
00:02:24,150 --> 00:02:25,950
We don't even have to build this.

35
00:02:25,950 --> 00:02:27,760
It uses the accelerometer already.

36
00:02:27,790 --> 00:02:32,350
It uses the gyroscope data and it applies it to you I could elements to amazing.

37
00:02:32,350 --> 00:02:33,850
So go ahead and click on that.

38
00:02:34,020 --> 00:02:41,140
And then when we instantiate it we can choose an option here with a key path and a motion effect type.

39
00:02:41,220 --> 00:02:48,870
So click on that and the key path that we actually want to modify is the the x property of the image

40
00:02:48,870 --> 00:02:49,520
right.

41
00:02:49,530 --> 00:02:57,320
So if we go ahead and pass in a string here we can type layer whip's layer dot transform.

42
00:02:57,750 --> 00:03:03,150
So we're basically saying hey I want the image in image view that's the layer I want to transform it

43
00:03:03,540 --> 00:03:09,090
the trance formation I want to cause is a translation right because it's sliding on the screen.

44
00:03:09,090 --> 00:03:12,150
And I want to modify the x axis.

45
00:03:12,150 --> 00:03:12,920
OK.

46
00:03:13,140 --> 00:03:20,340
Now the type of motion is dot tilt along horizontal axis because the x axis is the horizon.

47
00:03:20,340 --> 00:03:25,550
The why is vertical so go ahead and select tilt along horizontal axis.

48
00:03:25,560 --> 00:03:32,880
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

49
00:03:32,880 --> 00:03:36,950
we're going to use our min and max values so go ahead and type x motion.

50
00:03:37,020 --> 00:03:40,370
Minimum relative value equals men.

51
00:03:40,440 --> 00:03:48,290
We already have a property then type x motion for maximum relative value and set Max.

52
00:03:48,300 --> 00:03:52,380
OK that's all we need to do to set up parallax on the x axis.

53
00:03:52,380 --> 00:03:56,210
Now you might be wondering well I wonder if the y axis is the same as well.

54
00:03:56,250 --> 00:03:57,380
It might be I don't know yet.

55
00:03:57,390 --> 00:03:58,780
No it's totally the same guy.

56
00:03:58,770 --> 00:04:02,520
So let's go ahead and type you I interpretating motion effect.

57
00:04:02,520 --> 00:04:06,960
Give it a key path and we're going to do the same thing that we did above here except we're going to

58
00:04:06,960 --> 00:04:09,500
go ahead and perform a translation on the y axis.

59
00:04:09,510 --> 00:04:15,030
So passing a string here léa transform.

60
00:04:15,690 --> 00:04:21,710
Translation dot Y and the type is going to be tilt along vertical axis.

61
00:04:21,770 --> 00:04:22,310
OK.

62
00:04:22,680 --> 00:04:30,660
Now we need to set the minimum and maximum relative values by typing y motion minimum and go ahead and

63
00:04:30,660 --> 00:04:31,910
pass in the min value.

64
00:04:32,310 --> 00:04:37,300
Then we're going to call y motion maximum relative value and pass in the Max.

65
00:04:37,470 --> 00:04:38,140
OK.

66
00:04:38,460 --> 00:04:45,950
So we now have two properties that keep track of and basically transform whatever we call this on on

67
00:04:45,960 --> 00:04:50,100
the x and y axis based on the minimum and maximum values that we've set.

68
00:04:50,100 --> 00:04:55,080
The last thing we need to do is to actually add these motion effects to our image view.

69
00:04:55,170 --> 00:04:59,820
So to do that we're going to go ahead and create what's called a motion effect group and it's essentially

70
00:04:59,820 --> 00:05:04,020
just a folder that we can drop these two effects and add them at the same time instead of needing to

71
00:05:04,020 --> 00:05:05,090
add them individually.

72
00:05:05,360 --> 00:05:14,690
So go ahead and type let motion affect group equal UI motion effect group and then you're going to instantiate

73
00:05:14,690 --> 00:05:19,940
it like so you're going to go ahead and type motion effect group dot motion effects and you'll notice

74
00:05:20,000 --> 00:05:22,700
it's an array of motion effect.

75
00:05:22,700 --> 00:05:30,800
Now these are all both these are both motion effects so we can say hey that equals x motion comma y

76
00:05:30,800 --> 00:05:35,650
motion and now we have an array of motion effects that we can add to our image view.

77
00:05:35,840 --> 00:05:41,420
So the image is what we want to modify and so to do that we're going to go ahead and call item image

78
00:05:41,420 --> 00:05:48,310
if you don't add motion effect and we can pass in our motion effect group.

79
00:05:48,320 --> 00:05:51,290
Now if I build this you'll notice we get no errors.

80
00:05:51,290 --> 00:05:56,410
The only thing we need to do is to actually call it in Awake from NIB and build our app.

81
00:05:56,420 --> 00:06:00,280
It is that easy to add parallax to an image view.

82
00:06:00,290 --> 00:06:00,620
All right.

83
00:06:00,620 --> 00:06:03,170
So let's go ahead let's build and run it let's see how we did.

84
00:06:03,170 --> 00:06:08,000
We have successfully set up parallax for every cell we've added our motion effects guys let's do it

85
00:06:08,030 --> 00:06:11,860
let's see how we did building and running a pull up in my simulator here.

86
00:06:11,870 --> 00:06:17,220
As soon as the app is up so that we can see how we did super cool stuff guys.

87
00:06:17,240 --> 00:06:17,600
All right.

88
00:06:17,600 --> 00:06:19,330
Here we go pulling it open.

89
00:06:19,490 --> 00:06:22,380
Look at that as we move.

90
00:06:22,580 --> 00:06:28,410
We get translation on the x and y axis no matter how we move the image moves around.

91
00:06:28,410 --> 00:06:33,380
Guys this is the coolest You can do this with any image view in your application to just give a little

92
00:06:33,380 --> 00:06:37,980
bit of an extra visual edge a little bit of a visual effect to your project.

93
00:06:38,000 --> 00:06:40,730
Amazing amazing work guys were done.

94
00:06:40,730 --> 00:06:42,850
I mean that's that's literally how easy it is.

95
00:06:42,950 --> 00:06:47,750
And in the next video I'm going to give you a challenge to challenge what you have learned so far about

96
00:06:47,750 --> 00:06:50,240
the accelerometer and gyroscope in Iowa.

97
00:06:50,330 --> 00:06:50,840
I'll see you there.