The "Move Spot on Tap" snippet allows you to trigger a movement animation on specific objects (referred to as "spots") within your VR space when they are tapped. This tutorial will guide you through the steps to set up and customize this snippet, enabling you to define the movement's direction, duration, easing type, and looping behavior.
Purpose of the Snippet
The "Move Spot on Tap" snippet is designed to animate the movement of selected spots in your XR scene whenever a user taps on a designated trigger spot. This functionality is ideal for interactive applications, such as moving objects in response to user inputs in a virtual showroom, guiding users through a tutorial, or creating interactive storytelling elements.
Setting Up the Snippet
This is the Snippet Window with the various fields. We will go through these step by step.
1. Select the Spot(s) to Trigger the Move Animation
The first step is to choose the spots that will act as triggers for the movement animation. These are the spots that users will tap on to initiate the movement. This field allows you to select one or more spots that will trigger the movement animation when tapped. These could be any interactive elements in your scene, such as 3D models or images.
2. Choose the Spot(s) to Be Moved
Next, specify which spots should move when the trigger spot is tapped. This field allows you to select the spot(s) that will be moved upon tapping the trigger spot. You can choose any objects within your scene that you want to animate with a movement.
3. Set the Movement Direction and Distance
Define how much you want the selected spots to move along the X, Y, and Z axes. Enter the desired movement values in centimeters for the X, Y, and Z axes. These values determine how far the spot will move along each axis.
4. Use X, Y, and Z as target position
Check this box to specify whether the new position should be treated as an absolute position or relative to the current position. When enabled, the spot will move to the exact specified position. Otherwise, the movement will be relative to the spot's current position.
5. Set the Animation Duration
Control how long the movement animation should take. Set the duration of the movement animation in seconds. This determines how quickly the spot moves to the new position.
6. Choose an Easing Type for Smooth Transitions
Easing functions create smooth transitions in the animation, making the movement feel more natural. Select from a variety of easing options, such as Linear
, inBounce
, or inOutSine
, to control how the movement accelerates and decelerates during the animation.
7. Configure Looping Behavior to Repeat the Animation
Decide if the movement should repeat and, if so, how it should loop.
loopType: Choose the looping behavior:
- None: No looping.
- Normal: Restarts the animation from the beginning each time.
- Incremental: Continues the movement in the same direction.
- PingPong: Reverses the movement direction after each iteration.
8. Number of Playback
Specify how many times the animation should play. Use -1
for an infinite loop.