Initializes a new instance of the Animation class.
Simulation that drives this animation.
HTML element that hosts this animation.
Object with parameters used to initialize the animation.
Gets or sets a value that determines whether entities should move towards the end or start of the destination queue.
The default value for this property is true, which causes entities to move towards the end of the destination queue.
Gets or sets a value that determines whether entities should move towards the end or start of the destination queue.
The default value for this property is true, which causes entities to move towards the end of the destination queue.
Gets or sets a value that determines whether the animation is currently disabled.
The default value for this property is false, which causes the animation to update whenever the simulation's current time advances.
Gets or sets a value that determines whether the animation is currently disabled.
The default value for this property is false, which causes the animation to update whenever the simulation's current time advances.
Gets or sets a function that returns the HTML to be used to create elements that represent the animated entity.
The function should take an Entity as a parameter and should return the innerHTML of the element used to represent the entity.
The innerHTML string format depends on the animation's host element.
For regular div hosts, the function will usually return a div or an img element.
For SVG hosts, the function will usually return a g element, which represents an SVG group, or an SVG primitive such as polygon or circle.
For A-Frame hosts, the function will usually return an a-entity element.
For X3D hosts, the function will usually return a transform element containing one of more shape elements.
Gets or sets a function that returns the HTML to be used to create elements that represent the animated entity.
The function should take an Entity as a parameter and should return the innerHTML of the element used to represent the entity.
The innerHTML string format depends on the animation's host element.
For regular div hosts, the function will usually return a div or an img element.
For SVG hosts, the function will usually return a g element, which represents an SVG group, or an SVG primitive such as polygon or circle.
For A-Frame hosts, the function will usually return an a-entity element.
For X3D hosts, the function will usually return a transform element containing one of more shape elements.
Gets a reference to the animation's host element.
Gets the tag name of the element's host element.
Gets a value that determines whether this animation is a 3D animation.
Gets or sets an array with queue animation information.
The items in the array should implement the IAnimatedQueue interface.
For example:
new Animation(sim, animationHost, {
getEntityHtml: e => {...},
queues: [
{ queue: sim.qPedArr, element: '.ss-queue.ped-arr' },
{ queue: sim.qPedXing, element: '.ss-queue.ped-xing', angle: -45, max: 8 },
{ queue: sim.qPedXed, element: '.ss-queue.ped-xed' },
{ queue: sim.qPedLeave, element: '.ss-queue.ped-leave' },
...
]
});
Gets or sets an array with queue animation information.
The items in the array should implement the IAnimatedQueue interface.
For example:
new Animation(sim, animationHost, {
getEntityHtml: e => {...},
queues: [
{ queue: sim.qPedArr, element: '.ss-queue.ped-arr' },
{ queue: sim.qPedXing, element: '.ss-queue.ped-xing', angle: -45, max: 8 },
{ queue: sim.qPedXed, element: '.ss-queue.ped-xed' },
{ queue: sim.qPedLeave, element: '.ss-queue.ped-leave' },
...
]
});
Gets or sets a value that determines whether entities should be rotated when in queues or in transit.
The default value for this property is false, which causes entities to be displayed without any rotation.
Gets or sets a value that determines whether entities should be rotated when in queues or in transit.
The default value for this property is false, which causes entities to be displayed without any rotation.
Gets a reference to the scene element.
In most cases, the scene element is the host element. If the host is an X3D element, the scene element is the host's SCENE child element.
Gets or sets a function that updates the element used to represent an entity.
The function should take two parameters: the Entity being animated and the {@link Element} used to represent it.
The function should update the {@link Element} to reflect the current state of the Entity.
For example, the code below shows how you could update the 'fill' attribute of an animated SVG element to reflect the 'color' property of the Entity it represents:
new Animation(simulation, animationHost, {
rotateEntities: true,
getEntityHtml: e => `<polygon
stroke='black' stroke-width='4' fill='${e.color || 'black'}' opacity='0.5'
points='0 0, 40 0, 50 10, 40 20, 0 20'/>`,
updateEntityElement: (e, element) => {
const polygon = element.querySelector('polygon');
if (polygon.fill != e.color) {
polygon.setAttribute('fill', e.color);
}
},
queues: [
{ queue: sim.q, element: 'svg .ss-queue' }
]
});
Updating animation elements using this function is usually
more efficient than relying on the <a href="animation.html#getentityhtml">getEntityHtml</a>
function, which re-creates the entire element rather than
updating it.
Gets or sets a function that updates the element used to represent an entity.
The function should take two parameters: the Entity being animated and the {@link Element} used to represent it.
The function should update the {@link Element} to reflect the current state of the Entity.
For example, the code below shows how you could update the 'fill' attribute of an animated SVG element to reflect the 'color' property of the Entity it represents:
new Animation(simulation, animationHost, {
rotateEntities: true,
getEntityHtml: e => `<polygon
stroke='black' stroke-width='4' fill='${e.color || 'black'}' opacity='0.5'
points='0 0, 40 0, 50 10, 40 20, 0 20'/>`,
updateEntityElement: (e, element) => {
const polygon = element.querySelector('polygon');
if (polygon.fill != e.color) {
polygon.setAttribute('fill', e.color);
}
},
queues: [
{ queue: sim.q, element: 'svg .ss-queue' }
]
});
Updating animation elements using this function is usually
more efficient than relying on the <a href="animation.html#getentityhtml">getEntityHtml</a>
function, which re-creates the entire element rather than
updating it.
Updates the animation display by showing all entities in animated queues or in transit between animated queues.
This method is called by the Animation class automatically when the simulation time advances.
Generated using TypeDoc
Class used to add animations to Simulation objects.
The Animation class adds animations to existing Simulation objects.
Animations are shown in a host element defined in the constructor.
Animations may be in 2D or 3D.
2D animations may be hosted in regular div elements. In this case, they use absolutely positioned elements (such as img) to represent entities.
2D animations may also be hosted in svg elements. In this case, they use SVG (often g) elements to represent entities. You can see a sample here: Animated Crosswalk (SVG).
3D animations may be hosted in A-Frame elements. A-Frame is a 3D/VR framework that makes it easy to create 3D/VR animations. You can see an example here: Animation Options (A-Frame).
3D animations may also be hosted in X3DOM elements. X3DOM is the latest W3C standard for 3D content. You can see examples here: Animated Crosswalk (X3DOM) and Animation Options (X3DOM).
Entities are shown while in animated queues (see the Entity.enterQueue method) and while in transit between animated queues (see the Entity.delay method).
Queue positions are defined by elements in the animation host element, as specified when you set the queues property.
Entity objects are represented by elements whose appearance is specified by the getEntityHtml function and optionally updated by the updateEntityElement function.