Device Orientation #2

• General
• Project Templates
• Projects
• Studio

This project builds upon Example: Device Orientation to demonstrate using timelines for more control over animations that occur when the user rotates the device from landscape to portrait. You can find this example project within the New Project modal in ZapWorks Studio.

As in the previous example, multiple states define the UI orientation by changing the button's relativeToProp parameter.

Timelines have been added between each pair of states. These timelines have been modified to move the button down before changing the relativeToProp value, then moving the button back up into place at the new location.

When the accelerometer node activates the state appropriate to a new orientation, the animation will follow the timeline between the previous orientation's state and the new one.

Editing the project

1. Delete the WebsiteButton from the LandscapeGroup in the Hierarchy.
2. Import your content into ZapWorks Studio, this can be an image, text, 3D model or video.
3. Drag the content into the landscapeGroup.
4. Edit the timeline animations by using the ˅ icon on each of the states within the orientation controller and selecting on the timeline that appears.

   To learn more about animating content along a timeline, watch the timelines getting started video.

5. Preview and view the content rotate with the device.