Common Animation Mistakes

There are a few issues that authors often repeat when it comes to animating in qdex. These mistakes don't hinder functionality but can be irritating and/or confusing to users.

Below is a simple example, which includes some of these mistakes. This bit of code draws a house-shaped object on a plot. A slider is used to increase/decrease the size of the house.

<section>
<title>Animating in qdex</title>

<script>
  local d = 1

  local function drawShape()
    plot1.shape:Add(-1*d, -1*d)
    plot1.shape:Add(1*d, -1*d)
    plot1.shape:Add(1*d, 1*d)
    plot1.shape:Add(-1*d, 1*d)
    plot1.shape:Add(-1*d, -1*d)
    plot1.shape:Add(0, 0.5*d+d)
    plot1.shape:Add(1*d, 1*d)
  end

  drawShape()
</script>

<xyPlot name="plot1">
  <axis dim="x" auto="lockAspectRatio" />
  <axis dim="y" auto="growAndShrink" />
  <series name="shape" draw="segmentedFill" />
</xyPlot>

<slider min="1" max="10">
  <onValueChanged>
    plot1.shape:Clear()
    d = value
    drawShape()
  </onValueChanged>
</slider>

</section>

Copy the above code into a module as a top level section. Use the slider to change the house size.

You should notice a few things. The most obvious will probably be the flickering of the house shape on the plot. This is due to the constant erasing and drawing of the house when the slider moves; although points are being drawn in quick succession, the slider is moving (i.e. points be drawn/erased) so quickly that the user can detect the pause between points being added.

To mitigate this, you can change the series to manual. This ensures that points only appear on the plot when you call the Update() function, which works by plotting all added points at a single time.

For the above example, I need to alter my shape drawing function as well as toggle the series manual attribute to true.

local function drawShape()
  plot1.shape:Add(-1*d, -1*d)
  plot1.shape:Add(1*d, -1*d)
  plot1.shape:Add(1*d, 1*d)
  plot1.shape:Add(-1*d, 1*d)
  plot1.shape:Add(-1*d, -1*d)
  plot1.shape:Add(0, 0.5*d+d)
  plot1.shape:Add(1*d, 1*d)
  plot1.shape:Update()
end

and

<series name="shape" draw="segmentedFill" manual="true" />

Another error that you might notice is plot scaling. Although the house is changing in size, the relative size of the house is not. To give more perspective, I recommend fixing one of the axes and keeping the other on lockAspectRatio.

<axis dim="x" auto="lockAspectRatio" />
<axis dim="y" auto="fixed" min="-10" max="15" />

Alternatively, you could keep the y-axis on growAndShrink mode and create an invisible frame around your objects. This also helps keep perspective while the slider moves.

<series name="frame">
   <data>-10 -10; 10 -10; 10 15; -10 15</data>
   <colors>transparent; transparent; transparent; transparent</colors>
</series>