Table of contents



Official Content

This group of properties is under the Theme for Smart Devices classes (see Scope) to provide the end user with a UI/UX improvement called Motion Effect, closely related with Parallax Effect. This effect is a result of the multilayered design incorporated in iOS 7 UI, affecting the appearance of the interface when the end user device is tilted horizontally and vertically, giving the impression of depth and movement.

The properties under this group allow you to easily incorporate this impressive effect in the application. 

Property Description
Max Horizontal Offset It indicates the maximum offset that the control can reach when the end user tilts his device horizontally (left to right or right to left). It can be interpreted as a factor of movement - higher values imply more movement. 
Max Vertical Offset Likewise, when the end user tilts his device vertically (front to back or back to front).


Both properties accept integer values, allowing for smooth movements of the control layer and its container layer.
Depending on the effect that you want to achieve, its value can be in one of the three categories listed below.

  • Negative value: It makes the control move in the opposite direction to the movement of the physical device. 
  • Zero value (0): No effect (default value)
  • Positive value: It makes the control move in the same direction to the movement of the physical device.

Usage example

In EventDay, suppose you want to apply this UI/UX feature to each speaker picture on the list. 

First, open the List section of the WorkWithDevicesSpeaker object.

Since the aim is to have a moving image, it should be embedded in a Canvas control, expanded beyond the edge limits and filled when the picture moves.
So, the layout could be designed as follows:

Motion Effect - Layout design

The details of this decision are listed below.

  • TableImageSpeaker class makes the Canvas rounded, setting Border Radius with an appropriate value.
  • The Absolute Position properties of the Canvas image make it expanded and centered.
  • ImageSpeakerMotion class makes the image keep its aspect and adds the motion effect setting both offsets.

Just by setting a few properties, the runtime behavior will be as shown below. 

Horizontal tilt

Motion Effect - Horizontal
Motion Effect - Result horizontal 

Vertical tilt

Motion Effect - Vertical
Motion Effect - Result vertical

Horizontal & Vertical tilt

Motion Effect - Both moves
Motion Effect - Final result 

Note

  • Only supported in iOS 7 or higher.
  • If the tiled control is embedded in a Table control or Canvas control ensure to set Border Radius property (whose value could be 1 or higher, depending on your requirements). These settings will avoid the control scapes from its limits when motion effect is applied (e.g. a tiled image inside a canvas as it is shown in the Usage Example section).

Scope

Theme class: Image, Table, Calendar, Group
Generators: Smart Device (iOS)

 

Availability

This property is available as from GeneXus 15









Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant