- Develop
- Galaxy Watch for Tizen
Gyro
gyro add movement to your watch face that’ll make your design stand out from the rest. gyro effect add gyro effects to your watch face and see how it moves and changes appearance as you tilt your watch. the aspects of watch face components that you can change include size, inner pivot position, rotation and opacity. you can use the gyro effect tab to tweak the x and y rotation dimensions of objects independently to create 3d effects for your watch face. the watch gyroscope gyro effects are applied as the watch moves within the -90º to 90º range along the x and y axes. 0º indicates that the watch is level. watch faces can also change appearance when the watch moves clockwise or counter-clockwise. -90º on the x axis indicates that the watch has rotated 90º upwards along the x axis (counter-clockwise). conversely, 90º indicates that the watch has rotated 90º downwards along the x axis (clockwise). -90º on the y axis indicates that the watch has rotated 90º to the left (counter-clockwise). conversely, 90º on the y axis indicates that the watch has rotated 90º to the right (clockwise). gyro effects let you adjust the dimensions, inner pivot positions, rotation, and opacity of objects in your watch face. tip : you can only enter values for each property for the -90º to 90º range. gyro effects won’t work unless the absolute values of each property’s reference points are equal. for example, inner pivot x can’t use -90 and 45 as its reference points, but it can use -45 and 45. the values you enter will determine how much the actual value of the property will change with respect to the base value. the actual value will be calculated through linear interpolation using the values at -90º and 90º. for example, if you enter values of -90 and +90 for inner pivot x to allow a range of -90º to 90º, then inner pivot x will be +80 px of the base value when the watch is rotated 80º. there are three different tabs (gyro xy, gyro x, gyro y) for applying gyro effects. gyro xy properties are always applied, regardless of the axis of rotation. tip : you can only change each property in one tab. for example, if a rotation value is entered in the gyro x tab, then the rotation value cannot be entered in the gyro y or gyro xy tabs. the gyro x and gyro y tabs allow you to control the properties when the watch rotates along the x and y axes respectively, so you can use these gyro properties independently to create a variety of cool effects. let’s take a look at how the dimension property can be used to create watch faces. when the watch is laid flat with no tilt in any direction (0º along both the x and y axes), the dimension values of the watch face are at 100% (case 1 below). any movement downwards or to the right will incrementally increase this percentage up to a maximum of 200%. any movement upwards or to the left will decrease this percentage down to a minimum of 0%. in the example above: 2 if the watch rotates -90º along the x axis or -90º along the y axis, the object will shrink and disappear from the screen (0%). 3 if the watch rotates 90º along the x axis or 90º along the y axis, the object will double in size in that direction (200%). 4 if the watch rotates along both the x and y axes, the properties entered for both axes will be applied simultaneously. if the watch rotates in opposite directions along the x and y axes, then the object will stretch vertically or horizontally. 5 if the watch rotates in the same direction along the x and y axes, then the object will increase or decrease in size. resize enlarge and shrink an object in relation to a point at its center. the point will remain in the same position as the object gets bigger or smaller. move change the position of an object using a point at its center. the value of the position input field is based on the center of the object. rotation rotate an object based on a point at its center. rotations will not change the position of the object. tip : tip! when entering an exact value in the gyro input field, it’s important to anticipate an object’s position and dimension changes. place the object to see how it looks and where it is located at -90 or +90. then enter the difference value into the gyro input field so that the object reaches the desired end position. adding depth to watch faces create dynamic watch faces with a sense of depth. step 1. create a shadow use a tool like photoshop or sketch to make shadows for your objects. step 2. place the shadow place the shadows above the background images, and below the watch components. step 3. apply gyro effects apply the following gyro effects to the shadows. in the gyro x tab – inner pivot x: +5px to -5px. in the gyro y tab – inner pivot y: +5px to -5px. adding a level to watch faces use gyro effects to create a watch face with integrated level functions. step 1. create step-wise images use a tool like photoshop or sketch to create a series of images that gradually decrease in size. step 2. place the step-wise images place the images in order based on size, with the largest image at the bottom. step 3. apply gyro effects apply gyro effects to the images. the bottom-most image should have the smallest value, and the top-most image the largest. the images in-between should have gradually decreasing values. for example, you can apply the following values: 14 px, 20 px, 30 px, 40 px. the bottom-most image: in the gyro x tab – inner pivot y: +14 px to -14 px. in the gyro y tab – inner pivot x: +14 px to -14 px. the top-most image: in the gyro x tab – inner pivot y: +40 px to -40 px. in the gyro y tab – inner pivot x: +40 px to -40 px. adding parallax effects to watch faces use gyro effects to create a watch face with parallax effects. step 1. create the images use a design tool like photoshop or sketch to create images for the effect: a background image and a number of png images to be placed on top. for this example, we will create a watch face showing someone floating in a tube. step 2. place the images place the background image at the bottom, then overlay the images for the tube shadow, waves, and person/tube in that order. step 3. apply gyro effects apply the following gyro effects to the images for the tube shadow, waves, and person/tube. tube shadow: in the gyro x tab – inner pivot y: +10 px to -10 px. in the gyro y tab – inner pivot x: +15 px to -15 px. waves: in the gyro x tab – inner pivot y: +10 px to -10 px. in the gyro y tab – inner pivot x: +10 px to -10 px. person/tube : in the gyro x tab – inner pivot y: -35 px to +35 px. in the gyro y tab – inner pivot x: -40 px to +40 px. for more details on producing dynamic gyro effects, take a look at the sample watch faces included with gws or check out the gyro presets in complications > effects.
