Class: Tween

Konva. Tween

Tween constructor. Tweens enable you to animate a node between the current state and a new state.
You can play, pause, reverse, seek, reset, and finish tweens. By default, tweens are animated using
a linear easing. For more tweening options, check out Konva.Easings

new Tween()

Source:
konva.js
Example
// instantiate new tween which fully rotates a node in 1 second
var tween = new Konva.Tween({
  // list of tween specific properties
  node: node,
  duration: 1,
  easing: Konva.Easings.EaseInOut,
  onUpdate: () => console.log('node attrs updated')
  onFinish: () => console.log('finished'),
  // set new values for any attributes of a passed node
  rotation: 360,
  fill: 'red'
});

// play tween
tween.play();

// pause tween
tween.pause();

Methods

destroy()

destroy

Source:
konva.js

finish()

finish

Source:
konva.js
Returns:
Type
Tween

pause()

pause

Source:
konva.js
Returns:
Type
Tween

play()

play

Source:
konva.js
Returns:
Type
Tween

reset()

reset

Source:
konva.js
Returns:
Type
Tween

reverse()

reverse

Source:
konva.js
Returns:
Type
Tween

seek((t)

seek

Parameters:
Name Type Description
t Integer

time in seconds between 0 and the duration
Source:
konva.js
Returns:
Type
Tween