Skip to main content

Part 4: Animation settings

This section describes the animation settings. Here, the position and size of the thumbnail image of the music is changed by the animation settings.

Right-click on the "Cover" below "Music" in the SceneTree panel and select "Add Animated Property..." to open the "Property Animation Configuration" dialog.

drawing-5-1696001153.png

In the "Property Animation Configuration" dialog make the following settings and press OK.

  • Add to : Create new animation and enter any name (eg. MyAnimation)
  • Location : /Animations
  • Property: Position
  • Interpolation: Spline
  • Select Radio button of "Create new key frame sequence"
  • and check both axes: "X" and "Y".
drawing-5-1696001529.png

The screen will switch to Animation Design screen. Press "Scene Design" button in the upper left toolbar to return the screen to the Scene Design screen.

drawing-5-1696001634.png

After returning to "Scene Design" screen, again right-click "Cover" below "Music" in SceneTree and select "Add Animated Property..." again. This time, configure following the below list.

  • Add to : Selected Animation (Select Animation you just created)
  • Property: Scale
  • Interpolation: Spline
  • Select Radio button of "Create new key frame sequence"
  • Check both axes: "X" and "Y".
drawing-5-1696001921.png

Select "Animation Design" button to show the Animation Values Panel. Select the Position Animation Values and enter the values from below table.

Time X Y
0 138.00 240.00
1000 104.00 207.00
drawing-5-1696002194.png

Next, select the Scale Animation Values and enter the values from below table.

Time X Y
0 0.5 0.5
1000 1.00 1.00
drawing-5-1696002298.png

Save your solution and click the Play button in the menu bar to run CGI Player.

drawing-5-1695991108.png

  • In the Music section: Click onto the progress bar below the Song title or drag it around. You can see that the progress time is changed according to your operation.
  • In the Comfort section: Press either +/- buttons in Seat heater section and watch the value and progress bar being updated according to your operation.

In the PlayerCGI Panel below the menu select your animation from the drop-down list. Then press the "run animation" button right next to the drop-down list in order to play the configured animation. You can now watch the Cover image animation in theCGI Player.

drawing-5-1696002805.png