Parallax in the seventh version of the operating system. Parallax in the seventh version of the operating system Parallax effect iphone

Let's try to answer the burning questions that readers ask and ask in the comments. And we are happy to answer them.

Let's start with the panoramic wallpapers in iOS 7. Or rather, with their absence ...

Panoramic wallpapers in iOS 7

Panoramic wallpapers appeared in iOS 7 beta 1. This function allowed setting panoramic photos (examples of panoramas are on our forum) as wallpaper on the desktop or lock screen. Users twisted the iOS 7 device in their hands and the photo moved on the screen depending on the angle at which the device is at the moment.

In iOS 7 beta 6, for some reason, Apple removed this functionality from the firmware. That's why in the final version of iOS 7.0 there is NO “Panoramic Wallpaper” feature!

You can of course set panoramas instead of wallpapers. The system will allow you to do this, but it will not give “that very” effect. You will only see the Parallax effect.

Parallax effect in iOS 7

Parallax effect- a beautiful innovation in iOS 7. Parallax effect allows wallpapers and icons on the desktop to exist, as it were, separately from each other. The icons are in one plane, and the wallpaper is in another. The iOS 7 device reads data from the gyroscope and moves these planes relative to each other. As a result of the movements, we see those parts of the wallpaper that have remained behind the scenes. There is a feeling of multidimensionality and depth.

Now that I have explained how the parallax effect works in iOS 7, it becomes obvious that concepts such as “Parallax wallpaper” or “Wallpaper with parallax effect” from the point of view of the Russian language and understanding of the process, are erroneous and only mislead users. The so-called "Parallax wallpapers" are nothing more than ordinary standard wallpapers, which differ only in resolution.

It is enough to save the photo in the desired resolution, upload it to the iPad, iPhone or iPod Touch and it will have the parallax effect in iOS 7. If you do not do this or use the wallpaper that was created for iOS 6, then an unpleasant image stretching effect because of which many of our readers could not sleep well.

Resolutions for snapshots if you want parallax effect in wallpaper (in brackets is the standard recommended resolution for snapshots without parallax effect in iOS 6 and below):

iPad 21424 x 1424(1024 x 1024)

iPad Mini1424 x 1424(1024 x 1024)

iPad 32448 x 2448(2048 x 2048)

iPad 42448 x 2448(2048 x 2048)

iPhone 4S1360 x 1040(960 x 640)

iPhone 5, 5S, 5C1536 to 1040(1136 x 640)

iPod Touch 5Gen1536 to 1040(1136 x 640)

iPhone 4does not support parallax effect (960 x 640)

Enterprising comrades are already riveting collections of special parallax wallpapers with might and main and even creating such applications. But we now know that everything is easier than it seems and this application is just an attempt to cut money off quickly on a wave of ignorance.

How to make wallpaper yourself?

It is very easy to make wallpaper yourself, even with parallax effect, even without it.

Our site has long had step-by-step instructions using Photoshop as an example - How to make wallpaper for iPad. The instruction has not lost its relevance now. The main thing is to choose the correct resolution for your device (the recommended resolution is a little higher in this article).

After the picture has been created in the required resolution, you can:

1) send it to yourself by mail and then save it to film

How to disable Parallax effect in iOS 7?

Some users don't like the parallax effect. You can disable it in the settings.

Settings-> General-> Universal Access-> Reduce Motion. Turn on the "Reduce motion" switch.

Dynamic wallpapers in iOS 7

IOS 7 introduces dynamic wallpapers built into the system. Some call them "live" or "dynamic". But Apple said Dynamic, which means we'll stick to the official terminology.

You can install them in the settings ( Settings-> Wallpaper and brightness-> Wallpaper selection-> Dynamic). By type, Dynamic wallpapers differ from each other only in color. There are now 7 colors to choose from.

On all wallpapers, balls move / decrease / increase / change transparency in real time (everyone already knows about Apple's love of balls).

Own unique dynamic wallpapers for iOS 7 cannot be officially made now! Use what you have. In the future, there may be ways to set your own dynamic wallpaper.

Another informative note will concern parallax, which appeared along with the seventh version of iOS. In this article we will try to answer the main questions that concern the user. So what is this panoramic wallpaper and how to set a dynamic wallpaper, how to turn off the parallax effect?

Panoramic pictures in the "seven"

Panoramic pictures were already present in the first beta of iOS 7. This feature made it possible to put large panoramas as wallpaper on the home screen or lock screen. After installation, the user could twirl his iOS 7 gadget in his hands, and the photo moved on the screen depending on the angle to which the smartphone or tablet was turned.

In the sixth beta, for some reason, removed this effect from iOS 7. That is why the original pure iOS 7 does not have such a function as panoramas. You, of course, will be surprised and ask: "Where are they?" They were replaced by the parallax effect. Of course, you can put panoramas, but you will not see the same effect that was present in iOS 7 beta 1.

Parallax effect

Now let's take a look at parallax. This is a great innovation that allows icons and wallpapers on the home screen to live a separate life from each other. Wallpaper is in one plane, and icons are in another. The gadget on iOS 7 reads information from the gyroscope and moves these two planes relative to each other so that as a result of the movement we see those parts of the image that were previously "behind the scenes". Due to these manipulations, the user has a sense of depth and multidimensionality.

When we explained what the parallax effect is and how it works in iOS 7, it becomes clear that definitions such as "Panoramic wallpaper" or "Parallax wallpaper" are misleading users. Indeed, from the point of view of understanding the process and the Russian language, these are different functions, in fact, they are exactly the same action. The so-called "Panoramic wallpapers" are nothing more than simple photos that differ from other images only in their resolution.

To get such "Panoramic wallpapers", users will only have to save any photo in the required resolution, and then upload it to their tablet, smartphone or player with iOS. If you do not do this or put a photo that was used in the sixth version of the operating system, then an unpleasant defect with stretching may appear.

Photo resolutions, if you want to get a parallax effect on the working screen (in brackets we have indicated the standard recommended resolution for photos without parallax from the sixth version of iOS):

  • Tablet iPad 2 - 1424 x 1424 (1024 x 1024)
  • IPad Mini - 1424 x 1424 (1024 x 1024)
  • Aypad 3 - 2448 x 2448 (2048 x 2048)
  • IPad 4 - 2448 x 2448 (2048 x 2048)
  • IPhone 4S - 1360 x 1040 (960 x 640)
  • IPhone 5, 5S, 5C -1536 by 1040 (1136 x 640)
  • IPod 5th generation - 1536 x 1040 (1136 x 640)
  • IPhone 4 - does not support parallax (960 x 640)

Already now, many people are engaged in the creation of various collections with such screensavers, there are even applications "Dynamic and parallax screensavers" through which you can download new pictures. But we now know that everything is simpler than it seems. Such applications are just another attempt to cut money.

How to make pictures with this effect yourself?

You can do everything with an image editor. The most popular option is, of course, Photoshop. The main thing that will need to be done is to choose the correct resolution suitable for your gadget (above we have written all the permissions for all devices). Once you have an image with the desired resolution, you will need to upload it to your device in one of these ways:

  1. Send the picture to yourself by e-mail, and then save it to the film;
  2. Upload to Dropbox and save to photo gallery again;
  3. Download according to the standard scheme via iTunes.
How do I turn off parallax?

Some users do not like this innovation. You can disable it in the settings. Settings, then Basic, then Accessibility, then Reduce Motion. We press the switch "Reduce movement" - by this pressing, you can turn off the prallax.

Dynamic images

In the iOS 7 updates, dynamic photos have appeared. Dynamic images can be set in the settings. We go to Settings, there we find the "Wallpaper and brightness" tab, then we find there "Wallpaper selection" - Dynamic. Dynamic images differ from each other only in color. At the moment, Apple only offers 7 options. Dynamic images allow the elements of the wallpaper to move / change the transparency / decrease in real time.

On the day of the presentation and, on October 22, an update of the iOS operating system was released - 7.0.3. One of its main innovations is the ability to turn off the notorious parallax, due to which many users complained about feeling unwell.

To explain what parallax is in iOS, the easiest way is to quote from Apple's official presentation: “IOS 7 creates a sense of multidimensionality. The operating system makes the most of iPhone, iPad and iPod touch technologies to further expand the capabilities of iOS. Clear and functional layers create depth and order in your content. The translucent background gives a sense of connection with context and place. And the new approach to animation and movement makes the simplest tasks that much more fun. "

In other words, parallax creates the illusion of 3D screen depth. So what do you need to do to turn off parallax?

  1. Go to the "Settings" menu;
  2. Further - "Basic";
  3. Choose "Universal Access";
  4. Then - a decrease in movement.

After these actions, the user will see a regular flat screen, and no 3D effects will undermine his health.

This function will be useful not only for those who feel worse after working with a smartphone or tablet. IPhone 4 / 4S and older tablet users can turn off the effect on their device to improve the performance of their device.

We all know that Apple is trying to take care of all categories of its users and released such a feature as reducing motion on the iPhone.

It is very useful and has a logical explanation of its creation and, of course, application. Let's figure out what it is and how it can be activated.

What is motion reduction in iOS?

I'll start with the fact that with the advent of iOS 7 there were a lot of changes, and one of them was the feature of the visual depth of the screen.

If you put a special standard wallpaper on your iPhone, then when the device moves, it will move and it all looks very impressive.

Over time, improved animations for opening applications have also begun to appear. Transition animations and much more have also been improved.

If the user simply doesn't need it, then the whole thing can be turned off using the "Reduce Motion" function. It will also help save a little battery power.

We'll talk about turning it on a little later, but for now I want to list what exactly will turn off after activation:

  • removes animation in the standard Weather application;
  • all screen effects are completely changed;
  • the parallax effect, what I explained about the wallpaper, is also turned off;
  • well, some other standard applications also stop using animation.

I think you understand the main essence of this function and now it's time to start the part when I tell you how to properly activate the function or disable it if necessary.

How to turn on / off motion reduction on iPhone?

I'll start this part by saying that most often this function is used on old devices or phones, the battery of which has already decreased in volume.


This means that it is used to extend the life of the iPhone and if you have an old model and do not want to see the smooth operation of your device on the latest iOS.

Well, now you can start turning on the motion reduction function:

  1. as always, we go to Settings- looking for an item The main;
  2. go to Universal accessReducing movement;
  3. we see an item with the same name and just activate it so that it lights up green.


At the bottom, you may have noticed another item called "Message Effects (Auto)". It is best to keep it active.

If you turn it off, then in the event that someone sends you messages with an effect like balloons, fireworks and others, they simply will not work.

I now use iPhones 5S and I activated it as soon as I switched to iOS 10. At first, of course, it’s unusual, but then it’s normal and it became much more comfortable to work.

The idea of ​​using parallax in mobile app design is not new. Like many others, she came to us from the world of web design, where at first it became a very common direction. Parallax gives a design an impressive depth effect and apparent volume. By now, due to some inconveniences associated with the specifics of the development of web applications, the fashion for parallax in the design of sites has subsided. However, mobile apps are a different story altogether. Parallax in mobile design lives on and is not going to go anywhere, and is even added by default to design of the new iOS 7 !

In this article we will tell you about our DVParallaxView component and demonstrate, using its device as an example, how to add exactly the same parallax effect to the application as in the home screen in iOS 7. And even better.

How does parallax work?

Let's digress for a while into the harsh world of physics in order to better understand and structure for ourselves the mechanism of the parallax effect. This will help us to faithfully reproduce it on the phone screen.

So how does parallax work? Its essence is quite simple. Parallax is a change in the position of the same object viewed from two different points in space. You can observe this effect in the real world at any time. All you need is something large to act as a background (for example, a wall of a house) and some object observed against this background, which is closer to you than the background (for example, a lamppost or a tree). If you walk along the wall while watching the lamppost, you will feel that the lamppost is shifting relative to the wall. This effect is called parallax - the apparent displacement of the pillar relative to the wall when you move the observation point, that is, you. In this case, the closer the pillar is to you, the higher the speed of its displacement will seem. Conversely, if you move a considerable distance from the post and try to walk along the wall of the house again, the post will practically not move relative to the wall. Our eyes are accustomed to assessing the distance to objects in many ways, and one of them is the relative speed of an object's displacement. If you observe a scene in which objects move at different speeds as you move, your eyes immediately tell your brain that objects are at different distances from you. This is the beauty of using parallax in your design - simulating it will add depth to a flat scene.

So, in a practical sense for us, the parallax effect is that objects located at different distances from you move relative to you at different speeds. Moreover, this speed is inversely related to your distance to objects. If you are close - the speed of the object is high, if it is far away - vice versa.

Let's highlight the main components of this effect. First, for a pronounced parallax, it is desirable to have a background that is ideally stationary, or the displacement of which will be negligible compared to other objects. Second, parallax can only be observed when there are objects filling the space between the background and the observation point. And the most important thing in these objects is the difference in their distance from you. In other words, objects should form a kind of hierarchy, lining up at different distances from the point of view to the background. And, finally, thirdly, parallax is impossible without the movement of objects relative to the observation point at different speeds.

With all three main points - background, objects and relative movement - we will observe parallax.

Parallax scrolling

Now that we know how parallax works, we need to decide how exactly we will implement it in the code.

The most obvious approach to implementing parallax is parallax scrolling. Played old platform games? If so, you will most likely remember that while the character was running from the left end of the level to the right, the objects in the background moved in the opposite direction at different speeds depending on the expected distance from the foreground. Here is a link to Wikipedia so that you remember exactly what we are talking about.

Parallax scrolling in games was designed in such a way that the scene you see on the screen consists of several layers on which objects are located. Depending on the estimated distance of the layer from the screen (the “forest” layer is closer to you than the “clouds” layer, which are closer to you than the “sun” layer), the layers are displaced at one speed or another. This gives a certain depth to what is happening on the screen, making a flat picture look more voluminous. Admittedly, this approach fits in pretty well with what we've learned about parallax. Indeed, you can mentally divide the space between you and the background into layers containing objects in this space.

It is logical to assume that the implementation of the parallax effect should be encapsulated in a container component that contains other components and has a kind of hierarchy of views, the position of which will shift by a distance depending on the position in the hierarchy. Let's think about it, is there an element in UIKit that already contains a similar feature? Of course have! Any UIView contains a hierarchy of other UIViews placed in it by the addSubview: method.

Here we come to the main idea behind our DVParallaxView component. The idea is for the component to be a descendant of UIView, encapsulating the parallax effect. The effect itself will be implemented by passing a new value to the contentOffset property of type CGPoint. Thus, DVParallaxView is similar in meaning to UIScrollView. When we change the contentOffset value, we will change the position of each view that is in the DVParallaxView hierarchy. The amount of displacement will be inversely related to the distance of the element from the "top" of the hierarchy. And since the elements in the subviews array are stored starting from the lowest in the hierarchy (that is, from the farthest from the screen), the offset will be in direct proportion to the index of the processed element when walking through the array directly. In this way, we interpret the presence of "distance" between elements, as in the real world. To control the value of the distance, we will output to the external interface a property that is a multiplier by which the index of the element in the array will be multiplied. By setting it, you can always adjust the parallax value as you wish.

Well, the proposed model looks viable, all the main points are thought out. Here we can put an end to our acquaintance with the conceptual parallax device in DVParallaxView and start a story about its practical implementation.

Create DVParallaxView

In this and the next chapters, we will take a closer look at creating the DVParallaxView component.

Before proceeding directly to the implementation, let's define a couple of properties of the DVParallaxView class.

Firstly, parallax looks best and is most often done against the background of some beautiful picture (remember, we decided that one of the mandatory components of parallax is the background?). Therefore, in our class, it is necessary to provide for the ability to set a background image. At the very root of the view hierarchy, there will always be a private element of the UIImageView class, which we will call backgroundImageView. This element will act as a background in the DVParallaxView. Its location at the root of the hierarchy will guarantee us the smallest relative offset, as befits the background, the farthest object in the scene. To transfer the background image, the public interface of the component will have a special property - the backgroundImage of the UIImage class.

Secondly, the parallax effect in iOS 7 does not only add up to the displacement of the background. If you take a closer look, you will notice one curious detail: the icons are displaced in the direction opposite to the displacement of the background. This is done to enhance the parallax effect and contrast between the shifting background and application icons, which at first glance are stationary. Since we set out to catch up and overtake parallax in iOS 7, we simply have to add such a feature to our component. To do this, we will create a frontView property in the public interface, into which we will transfer the view that we want to shift in the direction opposite to parallax.

So, all the preparations have been made - the theory has been studied, the device of the component has been thought out. You can start creating DVParallaxView. Ready?

Create a single-view project in Xcode, give it a name and any other required attributes. Inside the project, create the DVParallaxView class, which is a descendant of the UIView class. Create a DVParallaxView header file and fill it as follows.

#import @interface DVParallaxView: UIView @property (nonatomic, strong) UIImage * backgroundImage; @property (nonatomic, strong) UIView * frontView; @property (nonatomic) float parallaxDistanceFactor; @property (nonatomic) float parallaxFrontFactor; @property (nonatomic) CGPoint contentOffset; @end

All the properties of the class that you see here, we have already discussed above, so their set should not surprise you with anything. Two properties that have not been discussed explicitly before - parallaxDistanceFactor and parallaxFrontFactor - are the very factors that serve to control the amount of offset, respectively, of the elements of the hierarchy and the frontal view.

In the class implementation file, create a private interface. You need to put the backgroundImageView property in it, since the class doesn't need to provide public access to it.

@interface DVParallaxView () @property (nonatomic, strong) UIImageView * backgroundImageView; @end

Let the class object be created by calling the initWithFrame: method. In its call, you need to do all the initial configuration.

- (id) initWithFrame: (CGRect) frame (self =; if (self) (self.parallaxDistanceFactor = 2.f; self.parallaxFrontFactor = 20.f; self.backgroundColor =;; UIPanGestureRecognizer * panRecognizer = [initWithTarget: self action : @selector (panHandler :)];;) return self;)

We set these values ​​of the multipliers based on our personal preferences. You can choose other values ​​if the parallax seems to you too strong or, conversely, too weak. Note that the background is from the very beginning in the view hierarchy, even if no image is specified for it.

If you have already asked the question “How are we going to initiate the displacement of views in a component?”, Then you can already see the answer to it in the initializer code - UIPanGestureRecognizer. Yes, we remember that in iOS 7, parallax was triggered by tilting the phone. Everything has its time.

The panHandler: method selector was passed to the UIPanGestureRecognizer. Let's write this method right away so we don't forget to do it later.

#pragma mark - Gesture handler - (void) panHandler: (UIPanGestureRecognizer *) pan (CGPoint translation =;;;)

Nothing unusual. We read the movement of the touch, and set the same offset value to our DVParallaxView. Do not forget to zero the resulting offset at the end.

Now comes the fun part. So far nothing happens to change contentOffset, let's fix that. Create a setter method setContentOffset as shown below.

- (void) setContentOffset: (CGPoint) contentOffset (BOOL backgroundReachedEdgeX = NO; BOOL backgroundReachedEdgeY = NO; double contentDivider; // 1 if (self.backgroundImageView) (contentDivider = self.subviews.count * self.parallaxDistanceFactor = CGPointGPoint newCakeenter (self.backgroundImageView.center.x + (contentOffset.x - _contentOffset.x) / contentDivider, self.backgroundImageView.center.y - (contentOffset.y - _contentOffset.y) / contentDivider); if ((newCenter.x - self .backgroundImageView.frame.size.width / 2.f)> 0.f || (newCenter.x + self.backgroundImageView.frame.size.width / 2.f)< self.bounds.size.width) { newCenter.x = self.backgroundImageView.center.x; backgroundReachedEdgeX = YES; } if ((newCenter.y - self.backgroundImageView.frame.size.height/2.f) >0.f || (newCenter.y + self.backgroundImageView.frame.size.height / 2.f)< self.bounds.size.height) { newCenter.y = self.backgroundImageView.center.y; backgroundReachedEdgeY = YES; } self.backgroundImageView.center = newCenter; } // //2 for (int i = 1; i

So, let's take a closer look at the method. The backgroundReachedEdgeX and backgroundReachedEdgeY variables are used to signal that by offsetting the background we have reached the edge of the picture. If the background is set, then it makes sense to check if we have gone beyond the backgroundImage. After all, we do not want users to contemplate the "clipping" of the image, it looks unnatural. Therefore, we considered it necessary to limit the parallax region to the size of the background image, if any. Thus, block // 1 contains a check for going beyond the image.

Block // 2 is a pass through all the elements of the view hierarchy with the calculation of the values ​​of the displacement of their centers, depending on their position in the hierarchy. Also, if along the X or Y axes we are at the edge of the background image, then there will be no displacement along these axes.

The main offset logic is created, there is not much left - to set accessor methods for the main properties, and also to overload the addSubview method.

#pragma mark - Getters - (UIImageView *) backgroundImageView (if (! _backgroundImageView) (_backgroundImageView = [init]; _backgroundImageView.contentMode = UIViewContentModeCenter; _backgroundImageView.center = CGPointMake (CGRectGet selfMidX (CGR.bidounds) ;) return _backgroundImageView;) #pragma mark - Setters - (void) setParallaxDistanceFactor: (float) parallaxDistanceFactor (_parallaxDistanceFactor = MAX (0.f, parallaxDistanceFactor);) - (void) setParallaxFront) .f, parallaxFrontFactor);) - (void) setBackgroundImage: (UIImage *) backgroundImage (_backgroundImage = backgroundImage;; CGPoint origin = CGPointMake (CGRectGetMidX (self.bounds) - backgroundImage.size.width / 2.f, CGRectGetMidY (self bounds) - backgroundImage.size.height / 2.f); self.backgroundImageView.frame = (CGRect) (. origin = origin, .size = backgroundImage.size);) - (void) setFrontView: (UIView *) frontView ( _frontView = frontView; ; ) #pragma mark - Overriding - (void) addSubview: (UIView *) view (if (self.frontView); else;)

Let's go in order. Everything is clear with the backgroundImageView getter - an ordinary lazy instantiation, we create an object only if necessary. Setting the ParallaxDistanceFactor and ParallaxFrontFactor values ​​will automatically check for negative values. The setter for backgroundImage sets the background image in the backgroundImageView and simultaneously centers its position on the screen. The frontView setter adds frontView to the subview hierarchy at the same time, so it doesn't make sense to add it manually. Finally, the overloaded addSubview: method works as usual, if frontView is not defined in DVParallaxView, but if it is defined, then any view will be one position below it in the hierarchy. After all, it is assumed that the frontView is always ahead.

Let's dwell on this for now and switch to the main viewController of our test project. Now is the time to plug in our new component and test it in action. Since we want to look like the new home screen in iOS 7, we will try to recreate it in the test project. To do this, we need a background image (preferably with an image of space) and application icons. Moreover, since our component also supports other objects between the background and foreground, we will add them too. Since the background is space, then we will develop a space theme and revive the desert space a little with the planet Earth and its satellite - the Moon. You can find all the necessary images on the Internet or pick them up from our test project on github.

In iOS 7, app icons are the foreground, so in DVParallaxView we have to place them in the frontView. To do this, we will create a UIView, in which we will place all the icons. In order not to have to manually create and place all these components, create a container and icons in the storyboard, then connect them to the controller.

This is what the front view looks like in our test application. Bind the UIView container as an IBOutlet to the controller and name it frontView. Let's get down to creating an instance of DVParallaxView.

Create a parallaxView property in your controller's private interface. Create a getter for this property.

- (DVParallaxView *) parallaxView (if (! _ParallaxView) (_parallaxView = [initWithFrame: self.view.bounds]; [_parallaxView setBackgroundImage:]; UIImageView * earth = [initWithImage:]; earth.frame = (CGRect) (.or = CGPointMake (CGRectGetMidX (self.view.bounds) - earth.image.size.width / 2.f, CGRectGetMidY (self.view.bounds) - earth.image.size.height / 2.f), .size = earth .frame.size); [_parallaxView addSubview: earth]; UIImageView * moon = [initWithImage:]; moon.frame = (CGRect) (.origin = CGPointMake (CGRectGetMidX (self.view.bounds) + 30.f, CGRectGetMidY ( self.view.bounds) + 30.f), .size = moon.frame.size); [_parallaxView addSubview: moon]; [_parallaxView setFrontView: self.frontView];) return _parallaxView;)

The code shows how after creating an instance of the DVParallaxView class, the background "galaxy2" is assigned to it, then images of the Earth and the Moon are added to the view hierarchy. Then the frontView property is set as the foreground. Now all we have to do is add our component to the controller's view hierarchy. Add this line to the viewDidLoad method:

;

Parallax is ready, you can start the project. As you can see, the component we created already at this stage of its development gives a completely reliable parallax effect.

There is only one detail left. So far, moving elements is done by touching. It's time to fix that. It's time to connect a gyroscope to DVParallaxView.

Connecting Core Motion

If you have read our article, then you already have all the necessary skills to use a gyroscope in this project, and you also know that to connect a gyroscope, you need to add the Core Motion framework to the project. But how exactly are we going to use the sensor data? In our project, we chose rotationRate to indicate the tilt of the phone. That is, contentOffset will change if there is a non-zero angular rate of rotation.

Connect the framework to the DVParallaxView class implementation file.

#import

Then create motionManager and displayLink properties in the private interface of the class.

@property (nonatomic, strong) CMMotionManager * motionManager;

@property (nonatomic, strong) CADisplayLink * displayLink;

CMMotionManager is the main CoreMotion class used to access data from sensors. CADisplayLink is a timer that works with the screen refresh rate, which will call the method for updating data from the gyroscope.

Now let's add accessor methods for the new properties.

- (CADisplayLink *) displayLink (if (! _DisplayLink) (_displayLink =;) return _displayLink;) - (CMMotionManager *) motionManager (if (! _MotionManager) (_motionManager = [init]; _motionManager.deviceMotionUpdate) ;)

Obviously, a developer using the DVParallaxView component does not necessarily always need to use a gyroscope. There may be other conditions and actions to change the contentOffset value. Therefore, the component should provide the ability to choose whether to control the parallax through the gyroscope. To provide this choice, we will display the gyroscopeControl property in the public interface, which will be of type BOOL. If it is set to YES, the component starts reading the gyroscope readings and displaces the hierarchy when the device is tilted. If it is set to NO, then the component stops responding to changes in the angular velocity of the device. In this case, the motionManager and displayLink properties should stop their activity so as not to waste processor resources.

As we agreed, create a gyroscopeControl property in the public interface.

@property (nonatomic, strong) BOOL gyroscopeControl;

Then create a setter for it.

- (void) setGyroscopeControl: (BOOL) gyroscopeControl (if (_gyroscopeControl == gyroscopeControl) return; _gyroscopeControl = gyroscopeControl; if (gyroscopeControl) (; forMode: NSDefaultRunLoopMode];) else (;; self.motionManager) = n

Note that when the property is set to YES, the motionManager starts receiving readings from the deviceMotion, not the gyroscope. The reasons for this choice are described in detail in the article. When set to NO, receiving data is stopped, displayLink is removed from all threads by calling the invalidate method, and motionManager itself is set to nil.

Now we just have to write a method for converting data from the gyroscope into data for contentOffset, as well as implement the displayLinkHandler method, which is called in the displayLink timer.

#pragma mark - Gyroscope to offset - (CGPoint) contentOffsetWithRotationRate: (CMRotationRate) rotationRate (double xOffset = (fabs (rotationRate.y)> DV_ROTATION_THRESHOLD)? rotationRate.y * DV_ROTATION_MULTIPLIER. x)> DV_ROTATION_THRESHOLD)? rotationRate.x * DV_ROTATION_MULTIPLIER: 0.f; CGPoint newOffset = CGPointMake (self.contentOffset.x + xOffset, self.contentOffset.y + yOffset); return newOffset;) - (Handler) (displayLinkL )

Do not forget at the very beginning of the implementation file to describe the two define constants that we used in the transformation method.

#define DV_ROTATION_THRESHOLD 0.1f

#define DV_ROTATION_MULTIPLIER 2.5f

In the controller class, when creating a DVParallaxView object, set its gyroscopeControl property to YES.

So, the gyroscope is connected, the data from it should now be correctly converted to an offset. Now you can compile the project and run it on the device. Looks great, doesn't it? Note that the gyroscope will only work on a real device.

Conclusion

If you are reading this paragraph, then you have just created a separate component with a parallax effect, like in iOS 7. And even more - the effect in the DVParallaxView component is more complete, since it shifts not only the background and foreground, but also the entire hierarchy of elements between them. As you can see, his device was not at all complicated.

DVParallaxView was created by us for free use and uploaded to our repository. Use, improve, we will be glad to your suggestions!