Informational post: How to create a 3D rotation animation on Y-Axis in Volt Iris project

[venkataraju.banka]

Hello All,

Here is a code snippet through which you can create an animation of 3D rotation on Y-Axis in an Iris project.

Output:

Code Snippet:

    /**
     * @function animateProgressIndicator
     * @scope private
     * @description 3D translation animation
     * @param widget {reference of widget to be animated}
     * @param duration {decimal Value}
     * @param iterationCount {Integer}
     */
    animateProgressIndicator: function (widget, duration, iterationCount) {
      voltmx.print("#### Entering into animateProgressIndicator ####");

      var transform1 = voltmx.ui.makeAffineTransform();
      transform1.rotate3D(0,0,1,0);

      var transform2 = voltmx.ui.makeAffineTransform();
      transform2.rotate3D(90,0,1,0);

      var transform3 = voltmx.ui.makeAffineTransform();
      transform3.rotate3D(180,0,1,0);

      var transform4 = voltmx.ui.makeAffineTransform();
      transform4.rotate3D(270,0,1,0);

      var transform5 = voltmx.ui.makeAffineTransform();
      transform5.rotate3D(360,0,1,0);

      var animationObject = {
        0: {"transform": transform1,"opacity":1,"stepConfig":{"timingFunction":voltmx.anim.LINEAR}},
        25: {"transform": transform2,"opacity":1,"stepConfig":{"timingFunction":voltmx.anim.LINEAR}},
        50: {"transform": transform3,"opacity":1,"stepConfig":{"timingFunction":voltmx.anim.LINEAR}},
        75: {"transform": transform4,"opacity":1,"stepConfig":{"timingFunction":voltmx.anim.LINEAR}},
        100: {"transform": transform5,"opacity":1,"stepConfig":{"timingFunction":voltmx.anim.LINEAR}}
      };

      var animationConfigObject = {
        "duration":duration,
        "iterationCount":iterationCount,
        "direction":voltmx.anim.DIRECTION_NONE,
        "fillMode":voltmx.anim.FILL_MODE_NONE
      };
      var animationCallbackObject = {"animationEnd" : function(){}};

      widget.animate(voltmx.ui.createAnimation(animationObject),animationConfigObject,animationCallbackObject);
      
      voltmx.print("#### Exiting out of animateProgressIndicator ####");
    }

Thanks and Regards,
Venkata Raju Bankapalli