416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
Dashboard v5.5

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Animator Control - Dashboard Add-on

Hide navigation
RSS
Modified on Wed, 02 Dec 2015 02:54 PM
Click to return to: Documentation | Dundas Dashboard Add-ons


Go to the Dundas Dashboard Add-ons page for instructions on downloading and installing this add-on.

Overview

This control lets you define a dashboard animation which can dynamically adjust a property value of a target control, such as a chart or an ellipse. For example, you can use the animator control to set up an animation that causes your chart to “fade in” when the dashboard is viewed. This is done by animating the chart's Opacity property.

Usage

Getting started

To use this add-on, install it on the Dundas Dashboard server and restart IIS. Once installed, the Animator item will appear in the Dashboard Designer toolbox. Simply drag and drop this item onto the dashboard canvas like you would with any other control.

Animator lets you create and manage animation (&ie; timeline) objects at design-time. It does not appear visually when previewing or viewing your dashboard.

The Toolbox showing the Animator control.

The Toolbox showing the Animator control.


Using a DoubleAnimation

A DashboardDoubleAnimation object lets you animate a property of a dashboard control that is of type double.

The example below shows how to set up a chart to “fade-in” when the dashboard is previewed or viewed:

  1. Select the chart control (BarChart1), go to its properties window, then set its advanced property, Opacity, to 0.2.
  2. Drag an animator control to the canvas and position it next to the chart.
  3. Select the animator control and go to its properties window. Locate the Children property and click its ellipsis button.
    Children property.
  4. The Children properties dialog is displayed. No animation objects appear initially so click the Add button below the list on the left in order to add a DashboardDoubleAnimation instance. The properties of the animation appear on the right.
    Children property dialog.
  5. Set the properties of the animation as follows:
    • Set the Duration to 00:00:05 (which represents 5 seconds).
    • Set the End Value to 1.0 (which represents the final opacity value).
    • Set the Increment By to 0.8 (which represents the overall increase in opacity value).
    • Set the Start Value to 0.2 (which represents the initial opacity value).
    • Set the Target Name to BarChart1 (which represents the name of the control that will be animated).
    • Set the Target Property Name to Opacity (which represents the property that will be animated).
      DoubleAnimation properties.
  6. The Name property is given a default value (⪚ “DoubleAnimation1”) but you can choose a more meaningful (and unique) name that describes the animation, such as “FadeIn” or “FadeOut”.

The animation object is now configured but nothing will happen until the animation is started via a single line of script. You can invoke this line of script from any interaction, such as a button click. For this example, the animation will be started when the dashboard is viewed (&ie; loaded):

  1. Select the dashboard (canvas) and go to its properties window.
  2. Locate the On Load Interactions property and click its ellipsis button.
  3. In the On Load Interactions property dialog, click the Add button below the list on the left. A DundasScript interaction is added.
  4. Locate the Script property and click its ellipsis button.
    Adding an On Load Interactions script.
  5. In the Script Editor window, add the following line of code, then click Save.

Animator1.Begin("DoubleAnimation1");

You can now save and preview your dashboard. Observe that the bar chart “fades-in” over the duration of 5 seconds which we specified.

Besides Opacity, other double properties which can be animated include: Height, HoverDelay, Left, MaxHeight, MaxWidth, MinHeight, MinWidth, RotationAngle, Top, and Width.

Reusing animations

If you've already defined an animation, you can reuse it with another target control and/or target property simply by calling a different version of the animator control's Begin method.

As an example, suppose you have defined an animation named, DoubleAnimation1, which animates the Height property of Rectangle1. To start the animation, simply call this script:

Animator1.Begin("DoubleAnimation1");

Or, use the following script to apply the same animation to a different target control which also has a Height property.

Animator1.Begin("DoubleAnimation1", Ellipse1);

Use the following script to apply the same animation to a different target control and a different target property, which is also of type double.

Animator1.Begin("DoubleAnimation1", Ellipse1, "Width");

Using a Storyboard

A DashboardStoryboard object lets you create a composite animation which is comprised of child DashboardDoubleAnimation and/or child DashboardStoryboard instances.

To create a storyboard animation:

  1. Select the animator control and go to its properties window. Locate the Children property and click its ellipsis button.
  2. In the Children properties dialog, click the dropdown menu attached to the Add button. From the menu, choose Storyboard.
    Adding a Storyboard.
  3. A storyboard animation is added to the list on the left and its properties are displayed on the right.
    Storyboard properties.
  4. Use the storyboard's Children property to define one or more double animations and/or storyboards as child instances.
  5. The Name property is given a default value (⪚ “Storyboard1”) but you can choose a more meaningful (and unique) name that describes the overall animation.

Tip: For a storyboard animation, the Duration property is usually set to Automatic because the total time for the animation is determined by its children.

Interactions

DashboardTimeline objects such as double animations and storyboards have the following advanced interaction properties:

  • Begin Interactions - These are scripts which are executed before the animation begins.
  • Completed Interactions - These are scripts which are executed after the animation completes.

An example usage is as follows:

  • Suppose you have defined a “FadeIn” animation that increases the opacity of a target control, but the control is not visible initially. In this case, you can add a begin interaction to ensure that the target control is visible before the fade-in animation starts.
  • Suppose you have defined a “FadeOut” animation that decreases the opacity of a target control. In this case, you can add a completed interaction to ensure that the target control's visibility is collapsed (&ie; hidden) after the fade-out animation has completed.

Repeating an animation

Use the Repeat Behavior advanced property of a double animation or storyboard if you want the animation to repeat itself a fixed number of times, or if you want it to repeat forever.

Repeating an animation 3 times.

Repeating an animation 3 times.


Easing functions

By default, a double animation uses linear interpolation between start and end values to determine the target property value as the timeline progresses.

Use the Easing Function property to apply different mathematical formulas to the animation in order to achieve more realistic, physical effects. For descriptions of the various formulas, see the Silverlight documentation on easing functions.

Easing functions for a DoubleAnimation.

Easing functions for a DoubleAnimation.


Properties

This design-time properties of the Animator control are listed below.

ImageImageProperty Name [Script Name]TypeDescription
ImageChildren [Children]ObservableCollection<DashboardTimeline>The collection of child DashboardTimeline objects the animator manages.
Height [Height]doubleThe height of the control.
Left [Left]doubleThe left is how far from the left side the control resides.
Name [Name]stringThe name of the control which can be used to reference it with scripting.
Top [Top]doubleThe top is how far from the top the control resides.
Width [Width]doubleThe width of the control.

Methods

The figure below shows the methods of the Animator control which are accessible via scripting.

Animator methods listed in the Script Editor.

Animator methods listed in the Script Editor.


Release history

This add-on was first released with Dundas Dashboard 2.5.1.

Related topics




Click to return to: Documentation | Dundas Dashboard Add-ons

About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2016 Dundas Data Visualization, Inc.