Step 3 - Animate the button that the user drags

In this step you fine-tune the implementation of the drag and drop functionality by playing an animation that wiggles the button when the user drags it.

To animate the button that the user drags:

  1. In Kanzi Studio in the Prefabs > Drag Item prefab select the Image node, in the Node Components press Alt and right-click Animation, and select Animation Player.

    ../../_images/image-in-prefabs.png ../../_images/triggers-add-animation-player.png

  2. In the Animation Player set:

    • Target Animation Timeline to Shake

    • Autoplay Enabled to enabled

      Autoplay Enabled sets whether the animation starts immediately after Kanzi attaches the node with the Animation Player to the node tree.

    • Repeat Count Infinite to enabled

      In the Repeat Count property when you enable the Infinite property, the Animation Player plays the animation infinite amount of times.

    ../../_images/animation-player.png

  3. In the Properties add the Render Transformation Origin property and set the X and Y property fields to 0,5.

    This way you set the animation to move the node from the center point of the node, instead of its top-left corner.

    ../../_images/image-properties1.png

  4. Select File > Export > Export KZB.

    ../../_images/export-kzb-binary1.png

  5. In Visual Studio run your application.

    When you drag a button, it wiggles.

< Previous step

See also

To learn more about animations, see Animations.

To learn how to deploy your Kanzi application to different platforms, see Deploying Kanzi applications.