Animator 1.3 Sencha Docs

Keyframe Properties: Border and Corners


  1. Border
  2. Corners

This section of the Animator Reference describes Keyframe Border and Corners properties.

Keyframes in Animator define the start and end points of object transitions and transformations on the timeline. Once the object is selected, keyframes can be set in the following ways:

  • Double-clicking in the timeline
  • Clicking the diamond icon within an object after it is first added to the Stage. Only works for setting initial keyframe
  • Clicking the diamond icon in the Properties Panel
  • Enabling recording mode and moving the object on the Stage. Recording mode is enabled by default

Keyframes cannot be placed on top of each other. Keyframe properties can be accessed by selecting the object in the Object Tree or a keyframe in the Timeline. Use the forward and backward diamond buttons in the Properties Panel to move between keyframes. If the Properties Panel shows base object properties, click the Keyframe State toggle in the upper-right corner of the panel to view keyframe properties.

Note: Object Border and Corners properties are overridden by Keyframe Border and Corners properties.


Keyframe Border Properties

Set changes to object border properties at keyframe. Set all borders or open disclosure triangle to edit top, right, bottom, and left borders individually. Set the following:

  • Size, in pixels; default is 1 pixel
  • Color, using any hexadecimal HTML color codes. Default is black (#010e0d)
  • Style, including small dashes, large dashes, solid line, double line. Click disclosure arrow next to line to view style choices.

Using the Animator color picker

Color Picker

Click box to right of Color property name to open the Animator color picker, which provides multiple ways to set color:

  • Click palette and drag
  • Enter hex code
  • Enter numerical value for Red, Green, and Blue
  • Enter numerical value for Hue, Saturation, Value (intensity), and Alpha (transparency), or click and drag arrows along slider bars

Squares in upper right corner of color picker indicate color change: right-hand box shows original color, left-hand box shows new color. While choosing a new color, click the right-hand box to reset to the original color. Click Save when you finish selecting a new color; Animator saves the color and closes color picker.

CSS Border reference.


Keyframe Corner Properties

Round object corners at keyframe. Set all borders or open disclosure triangle to edit top left, top right, bottom right, and bottom left corners individually. Default is 4 pixels for all object types except circle. In the case of circle, the border roundness for each corner is equal to radius of the circle (1/2 of the width).

CSS3 Border reference. See border radius.