Page History
...
The attributes of this class are also available for all other animation handlers and provide generic features.
| Attribute | Domain | Description |
|---|---|---|
| recursive | Boolean | Applies the animation to this element as well as all child elements recursively. This might be useful, e.g., to set the opacity of an element and also in its children and their children. |
Color Animation
It is used to change the appearance of elements. The fill color, stroke color and with as well as opacity can be changed.
...
This animation changes the position of an SVG element relative to its original position.
| Attribute | Domain | Description |
|---|---|---|
| x | Float | The x coordinate relative to the original position |
| y | Float | The y coordinate relative to the original position |
| absolute | Boolean | Determines if the given position is absolute or relative to the element's original position |
Rotate Animation
...
| Attribute | Domain | Description |
|---|---|---|
| name | String | The id of the path in the SVG image |
| start | Float | The start position of the path. When the position value is the same as the value of this attribute, the object will be position at the beginning of the path. |
| end | Float | The end position of the path. When the position value is the same as the value of this, the object will be position at the end of the path. |
| length | Float | The length of the path. Can be used instead the absolute end position. In this case the end position is calculated as |
| position | Float | Used to set a fixed position on the path. Normally the position is taken from a variable in the simulation data pool, but it can also be set to a fixed value with this attribute. The value should be between start and end of the path |
| autoOrientation | Boolean, true / false | Determines if the object should also align its rotation to the path |
| angleOffset | Integer | When autoOrientation is true, this offset in degrees is added to the calculated rotation on the path. For example if the element is facing with in the wrong direction when it is walking the path, an offset of 180 can be used to turn it. |
| angle | see rotate animation | see rotate animation |
| anchorX | see rotate animation | see rotate animation |
| anchorY | see rotate animation | see rotate animation |
Attribute Values
Attributes can be set to a single constant value, a single variable in the simulation or using a more complex mapping from variable values to attribute values as shown in the example below.
| Code Block |
|---|
image: "Lights.svg"
animate theRect {
apply color using showLight {
stroke-color: 0 is "green", 1 is "blue", 2 is "orange" // The attribute is set depending on the value of the variable in the using declaration
stroke-opacity: 0-2 is 1-20 // The attribute is set depending on the value of the variable in the using declaration and mapped linearly to the target domain
stroke-width: showLight // The attribute is set to the value of a variable in the pool
fillColor: "red" // The attribute is set to a constant value
} if showLight >= 1
} |
There are two keywords for mapping variable values to target values: others is used to match all other variable values that are not specified and define a target value for these. value refers to the current value of the variable in the using declaration.
| Code Block |
|---|
image: "Lights.svg"
animate theRect {
apply color using showLight {
stroke-width: value // Set the attribute to the current value of the variable
stroke-color: 0 is "red", others is "orange" // Define a target value for all other cases
opacity: 0-1 is value, others is 0.5 // More complex example that uses both keywords
}
} |
Interaction with the Simulation
...
| Code Block | ||
|---|---|---|
| ||
image: "Lights.svg"
animate theRect {
apply color using showLight {
fillColor: 0 is "red", 1 is "yellow", 2 is "green"
} whenif showLight >= 1
}
perform on click from theRect {
showLight = 1
step simulation
} whenif showLight != 1 |
This illustrates that animations and interactions can be used with the same SVG element, which is theRect in this case.
The interaction that is setup in this example is a click listener for theRect. If the element with this id is clicked, the variable showLight will be set to 1 and the simulation will perform a macro tick. However this is only done when the condition holds. Thus the simulation will not be stepped, if the showLight variable already has a value of 1.
Color Functions
There are also pre-defined functions to interact with the visualization environment. In the following example the variables color, a, r, g and b are set to the corresponding color values of the pixel on position x and y in the svg image. The pixel position is determined by the document size of the svg, which can be defined for example in Inkscape (File > Document Properties).
| Code Block |
|---|
image: "image.svg"
// Get the color of the pixel at position (x, y)
perform {
color = getColor(x, y)
a = getAlpha(x, y)
r = getRed(x, y)
g = getGreen(x, y)
b = getBlue(x, y)
}
// Illustrate the position by moving an svg element there
animate theDot {
apply move {
x: x
y: y
absolute: true
}
} |
Example Model
Create an empty SCChart and fill it with the following content:
...
Overview
Content Tools