Create animation keyframes

This tutorial demonstrates how to add ArcGIS Pro playback controls to your add-in to start and stop your animation. It also shows how to use a combobox to enter camera roll values, which are used to create of new keyframes in a 3D animation.

With the ArcGIS Pro SDK for .NET, you can extend ArcGIS Pro with your own unique tools and workflows. Using Microsoft Visual Studio and the Pro SDK, developers can build Pro add-ins and solution configurations that provide users with custom functionality specific to their organization or industry.

The ArcGIS Pro SDK for .NET provides a Map Exploration API, which allows you to create keyframes that can store values using the camera class.

In this tutorial, you will create a fly-through animation that allows you to pause playback, and insert new keyframes with roll values that bank / tilt the camera, providing a more interesting animation and demonstrating control using the SDK.

Prerequisites

• Microsoft Visual Studio is required. See the ArcGIS Pro system requirements for latest version and compatibility.
• Install ArcGIS Pro version 3.3 or higher.
• Install the ArcGIS Pro SDK for .NET. See the Installation ProGuide for more information.
• This tutorial uses Pro SDK Community sample data.

Steps

Before you begin

Take some time to review the ArcGIS Pro documentation on animating the camera and on the Keyframe List.

Create a new animation and keyframes using a sample dataset

1. Start ArcGIS Pro. When the start page appears, select the previously-installed Pro sample project: C:\Data\Interacting with Maps\Interacting with Maps.aprx.

2. When the project opens, open the Catalog pane (View > Catalog Pane).

3. On the pane, open the Maps > Portland 3D City scene.

4. In the TOC, in the 3D Layers section, right-click on the Buildings layer and select Zoom to Layer. From here you will begin to build a series of animation keyframes to be used by your add-in.

5. Click the View tab. In the Animation group, select Add. The Animation Timeline pane should display with a Create first keyframe button.

6. Click Create first keyframe to create your first keyframe. Each time you create a keyframe, you store the current map view.

7. Zoom closer into the scene buildings and change your perspective (use the 3D navigator if needed), and then use the + button to add approximately five additional keyframes with different views simulating a fly-through around the buildings. By default, each keyframe you add will be given a 3-second time gap.

8. In the Keyframe Gallery > Animation Timeline, click on your first keyframe and then press Autoplay forward below the timeline to try out the fly-through with the keyframes you created.

9. Save your project with your new keyframes, and close ArcGIS Pro. You are now ready to build your add-in, which uses the fly-through animation you just created.

Create a new ArcGIS Pro Add-In Visual Studio Project

1. Start Visual Studio.

2. Choose File > New > Project and then from the ArcGIS templates group, select ArcGIS Pro Module Add-in. Name the add-in project CameraProperties.

   More info

   By default, the Config.daml file opens in Visual Studio. The Module1.cs file contains add-in module code.

   Note also in the Config.daml file that the id attribute of the insertModule tag matches the ID within the Module1.cs file and the className attribute matches the class name of the module.

   The ArcGIS templates group is located in Templates > Visual C# > ArcGIS. Confirm that the latest .NET Framework is selected.

Add Ribbon controls to your add-in

1. Right-click the project and choose Add > New Item. From the ArcGIS Pro Add-ins group, select ArcGIS Pro Button from the list of item templates.

2. When prompted, name the new class file CreateKeyframe.cs and click Add to close the dialog box. The Button template provides the contents of the class file, as well as the corresponding code in the Config.daml file for the Pro UI.

3. Right-click the project and choose Add > New Item again. From the ArcGIS Pro Add-ins group, select ArcGIS Pro ComboBox from the list of item templates.

4. When prompted, name the new class file RollValCombobox.cs and click Add to close the dialog box. The ComboBox template also provides the contents of the class file, as well as the corresponding code in the Config.daml file for ArcGIS Pro UI.

Update code in the Config.daml and Module1.cs files

1. Open the Config.daml file and replace the contents of the groups and controls sections with the following:

   More info

   This DAML code provides the following:

   • Adds animation playback control, named Keyframe Tools Sample, to your new controls group.

   • Updates the captions and sizes of the button and combobox controls in the group.

   • Enables editing of your combobox control.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
     <groups>
       <group id="CameraProperties_Group1" caption="Keyframe Tools Sample" appearsOnAddInTab="true">
         <button refID="esri_mapping_animationPlaybackControl" />
         <comboBox refID="CameraProperties_RollValCombobox" size="middle" />
         <button refID="CameraProperties_CreateKeyframe" size="middle" />
       </group>
     </groups>
   
     <controls>
       <button id="CameraProperties_CreateKeyframe" caption="Create Keyframe with roll value" className="CreateKeyframe" loadOnClick="true" smallImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/GenericButtonBlue16.png" largeImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/GenericButtonBlue32.png">
         <tooltip heading="Tooltip Heading">Tooltip text<disabledText /></tooltip>
       </button>
       <comboBox id="CameraProperties_RollValCombobox" caption="Enter roll value:" className="RollValCombobox" itemWidth="140" extendedCaption="Extended Caption" isEditable="true" isReadOnly="false" resizable="true">
         <tooltip heading="Tooltip Heading">Tooltip text<disabledText /></tooltip>
       </comboBox>
     </controls>

2. Open the Module1.cs file and paste the following code below the Overrides region:

   More info

   It is helpful to consolidate business logic in the module when possible. This new code provides the following:

   • Creates an instance of the RollValCombobox for use in the module.

   • Creates a new method, CreateNewKeyFrame, to be called by the button. This new method:

     • Gets the current animations, camera and camera track.
     • Gets the current value in the roll value combobox.
     • Creates a new keyframe with the roll value if a valid numeric value is entered into the combobox.
     • Notifies the user if an invalid value is in the combobox.
   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
       #region Business Logic
   
       public RollValCombobox RollValueCombobox { get; set; }
   
       public void CreateNewKeyFrame()
       {
           QueuedTask.Run(() =>
           {
               var currentmapview = MapView.Active;
               var currentcamera = currentmapview.Camera;
               var newCamera = currentcamera;
   
               var viewAnimation = currentmapview.Animation;
               var currentAnimationTime = viewAnimation.CurrentTime;
               var mapAnimation = currentmapview.Map.Animation;
               var cameraTrack = mapAnimation.Tracks.OfType<CameraTrack>().First();
   
               // Check the entered roll value and if valid, create a keyframe using it.
               var rollValue = RollValueCombobox.Text;
               if (Double.TryParse(rollValue, out double dblRollValue))
               {
                   newCamera.Roll = dblRollValue;
                   cameraTrack.CreateKeyframe(newCamera, currentAnimationTime, AnimationTransition.Linear);
               }
               else
               {
                   ArcGIS.Desktop.Framework.Dialogs.MessageBox.Show("Roll value can't be used, please re-enter a valid number.");
                   RollValueCombobox.Text = "";
               }
           });
       }
   
       #endregion

Update button and combobox code

1. Open the CreateKeyframe.cs file and go to the OnClick method. Add the following code: Module1.Current.CreateNewKeyFrame();Your code, located below the using statements, should look like the following:

   More info

   When clicked, this button will call the CreateNewKeyFrame method in Module1.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   namespace CameraProperties
   {
       internal class CreateKeyframe : Button
       {
           protected override void OnClick()
           {
               Module1.Current.CreateNewKeyFrame();
           }
       }
   }

2. Open the RollValCombobox.cs file and replace UpdateCombo() with the following code: Module1.Current.RollValueCombobox = this; Your code for the constructor should look like the following:

   More info

   This allows Module1 to reference an instance of this class. No other code changes are needed in this file.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
       public RollValCombobox()
       {
           Module1.Current.RollValueCombobox = this;
       }

Build and test your code

1. Once your code is complete, build your project and debug any issues. Click Start to launch ArcGIS Pro. Open the Interacting with Maps project that you updated with your new animation in Create a new animation and keyframes using a sample dataset.

2. Open the Animation Timeline pane (if not already open) and ensure that you have created at least five keyframes. Select the first keyframe in the Keyframe Gallery, which sets playback to the beginning of the animation. Next, go to the Add-In tab, and find your add-in’s new Keyframe Tools Sample group, which should contain the animation playback controls, a combobox, and a button.

3. Press Play on the playback controls, which begins the fly-through animation. As you get to a location between your existing keyframes, pause the animation with the playback control. You will now create a new keyframe.

4. Add a numeric value for the degrees of roll into your add-in’s combobox (e.g., 45). A positive value will roll/tilt the camera to the right, and a negative value rolls to the left. Once you enter the value, press the button below it to create the keyframe. You should see the new keyframe created and added to the Timeline and Keyframe Gallery between your existing keyframes. Press Play again, and along the timeline create another new keyframe, this time with a negative roll value (e.g., -45)

5. Play through your animation again, and you should see your new keyframes applied with the camera roll property and visualization. You can also open the Animation Properties pane and view the camera properties as the change during playback.

What's Next?

Learn how to use additional ArcGIS Pro SDK for .NET features in these tutorials:

• Build your first configuration
• Manage add-in loading
• Edit attribute data