Part 4: Animation settings

This section describes how to create an animation that animates the position and size of an object. Here, the thumbnail image of the music is animated. 
 Configuring the Animation 
 
 In the Scene Tree panel navigate to the RenderNode2D Cover and right-click it. Select [Add Animated Property...] from the context menu. The Cover node can be found in the path below.
 
 The Property Animation Configuration dialog will be opened. 
 
 
 
 Scene Tree Path 
 IVI_Sample > IVI_Sample > Music > Cover 
 
 
 
 
 
 
 In the Property Animation Configuration apply the settings as in the table below and press [OK] .
 
 A new animation MyAnimation has been created. 
 The new animation is visible in the Solution Explorer. 
 Scene Composer switches to Animation Design . Three new panels are visible:
 
 Animation Configuration panel 
 Animation Timeline panel 
 Animation Values  panel 
 
 To switch back to Scene Design press the [Scene Design] button in Scene Composer's main toolbar. 
 
 
 
 Create new Animation 
 MyAnimation 
 
 
 Location 
 /Animations 
 
 
 Property 
 Position 
 
 
 Interpolation 
 Spline 
 
 
 Create new keyframe sequence 
 X and Y 
 
 
 
 
 
 
 
 
 
 In the  Animation Configuration panel's scene tree select the same Cover node as before. In the Properties panel click on the [+] button.
 
 The Property Animation Configuration will be opened. 
 
 
 In the Property Animation Configuration apply the settings as in the table below and press [OK] .
 
 A new keyframe sequence for the property "scale" has been added to the existing animation MyAnimation. 
 This can be seen in the Animation Timeline , in the Animation Values panel and in the Properties panel. 
 
 
 
 Selected Animation 
 MyAnimation 
 
 
 Property 
 Scale 
 
 
 Interpolation 
 Spline 
 
 
 Create new keyframe sequence 
 X and Y 
 
 
 
 
 
 
 In the Animation Values panel select the animated properties and enter the configurations from the table below.
 
 The keyframes for the animated properties are fully configured. 
 
 
 
 IVI_Sample\Music\Cover\ Position \XY 
 
 
 Time 
 X 
 Y 
 
 
 0 
 138.00 
 140.00 
 
 
 1000 
 104.00 
 207.00 
 
 
 
 
 
 
 IVI_Sample\Music\Cover\ Scale \XY 
 
 
 Time 
 X 
 Y 
 
 
 0 
 0.50 
 0.50 
 
 
 1000 
 1.00 
 1.00 
 
 
 
 
 
 
 
 Check Animation in Player 
 Use the Player to check the configured animation. 
 
 Save your solution and click the [Play selected scenario...] icon on the toolbar to start the Player. 
 
 Three windows will open, and you can see that the simulation display shows the IVI_Sample scene. 
 
 
 In CGI Panel below the menu select your animation from the drop-down list and press the "run animation" button right next to the drop-down list. 
 
 The configured animation of the Cover image will be started and played once in the simulation display.