SpriteState

Type class

Defines a state for Sprite.

A "state" is a special object that has all the same properties as the Sprite of the same type, and which can be used to quickly apply a set of property values. (set state) When Sprite (or any object that extends Sprite) is created it creates a "default" state. You can modify the "default" state so that when the Sprite returns to default state certain properties are added.

Default state can be accessed using Sprite's defaultState getter.

sprite.defaultState.properties.fillOpacity = 0.5;
sprite.defaultState.properties.fillOpacity = 0.5;
{
  // ...
  "defaultState": {
    "properties": {
      "fillOpacity": 0.5
    }
  }
}

If Sprite is "hoverable", it automatically adds a "hover" state, which is applied when it has a cursor over it.

let hoverstate = sprite.states.create("hover");
hoverstate.properties.fillOpacity = 1;
var hoverstate = sprite.states.create("hover");
hoverstate.properties.fillOpacity = 1;
{
  // ...
  "states": {
    "hover": {
      "properties": {
        "fillOpacity": 0.5
      }
    }
  }
}

The above will automatically apply "hover" state when the Sprite is hovered, thus will set its fillOpacity property to 1, and will reset it to 0.5 when it's no longer hovered.

Every object that inherits from Sprite can and will add their own properties to the available list.

User can create their own states, and apply them as needed:

let myCustomState = sprite.states.create("mystate");
myCustomState.properties.fillOpacity = 0.5;
myCustomState.properties.strokeOpacity = 0.8;
sprite.setState("mystate");
var myCustomState = sprite.states.create("mystate");
myCustomState.properties.fillOpacity = 0.5;
myCustomState.properties.strokeOpacity = 0.8;
sprite.setState("mystate");

@see This link

Sources

SpriteState can be used (imported) via one of the following packages.

// SpriteState is available in all of the following modules.
// You only need to import one of them.

/**
 * --------------------------------------------------------
 * Import from: "core.ts"
 * Use like: am4core.SpriteState
 * --------------------------------------------------------
 */
import * as am4core from "@amcharts/amcharts4/core";

// SpriteState is available in all of the following modules.
// You only need to import one of them.

/**
 * --------------------------------------------------------
 * Include via: <script src="core.js"></script>
 * Access items like: am4core.SpriteState
 * --------------------------------------------------------
 */

Inheritance

SpriteState extends BaseObject.

SpriteState is not extended by any other symbol.

Properties

adapter
#

Type Adapter < this, A >

Default new Adapter<this,
A>(this)

Holds Adapter.

clonedFrom
#

Type $type.Optional < this >

Inherited from BaseObject

Reference to the original object this object was cloned from. We need to keep this so we can disassociate it from source object when this object is disposed.

config
#

Type object

Inherited from BaseObject

Use this property to set JSON-based config. When set, triggers processing routine, which will go through all properties, and try to apply values, create instances, etc.

Use this with caution, as it is a time-consuming process. It's used for initialchart setup only, not routine operations.

filters
#

Type List < Filter >

Default new List<Filter>()

A list of Filter elements to be applied to the relative Sprite when switching to this State.

@param

id
#

Type $type.Optional < string >

Inherited from BaseObject

Sets the user-defined id of the element.

isTemplate
#

Type boolean

Default false

Identifies if this object is a "template" and should not be treated as real object that is drawn or actually used in the chart.

name
#

Type string

Title of the state, i.e. "default", "hidden", etc.

properties
#

Type P

Default <P>{
  
}

Collection of properties and their values that should be applied to Sprite when switching to this State.

The property values set on a SpriteState will override the ones set directly on a Sprite.

propertyFields
#

Type object

A collection of key/value pairs that can be used to bind specific Sprite properties to DataItem.

For example: fill property can be bound to myCustomColor field in DataItem. The Sprite will automatically get the value for fill from its DataItem.

SpriteState-specific binding will override binding set directly on Sprite. I.e. you can make Sprite use different fill color on hover by adding a fill binding to a different DataItem key for Sprite's "hover" state object.

@see Sprite

sprite
#

Type $type.Optional < Sprite >

Reference to Sprite element this State is for.

transitionDuration
#

Type number

Default 0

Duration of the transition to this state. 0 means instantenous transition.

Any number means the Sprite will transit smoothly to this state, animating all animatable properties.

@default
@see This link for more info about animations

transitionEasing
#

Type ( value: number) => number

Default $ease.cubicOut

Easing function to use when transitioning to this state.

@default cubicOut
@see Ease
@see This link for more info about animations

uid
#

Type string

Inherited from BaseObject

Returns object's internal unique ID.

There are 4 inherited items currently hidden from this list.

Methods

constructor()

#

Returns SpriteState

Constructor

clone(

cloneId?: string

)

#

Returns this

Inherited from BaseObject

Makes a copy of this object and returns the clone. Try to avoid cloning complex objects like chart, create new instances if you need them.

copyFrom(

source: this

)

#

Returns void

Copies all property and style values from another SpriteState object.

dispose()

#

Returns void

Inherited from BaseObject

Destroys this object and all related data.

getCurrentThemes()

#

Returns ITheme[]

Inherited from BaseObject

Returns a list of themes that should be applied to this element. It could either be a list of themes set explicitly on this element, or system-wide.

getPropertyValue(

propertyName: Key

)

#

Returns P[Key]

Returns Sprite element's property value.

Will check if there are any bindings with DataItem and if there are any method callbacks set up for the specific property.

isDisposed()

#

Returns boolean

Inherited from BaseObject

Returns if this object has been already been disposed.

reset()

#

Returns void

Resets the State to initial state - no values or Filters applied.

There are 4 inherited items currently hidden from this list.

Events

SpriteState does not have any events.

Adapters

SpriteState does not have any adapters.