Creating interpolation animation using the js canvas library konva: a clockwise circular rotation of a Pentagon as an example

1. Effect

2. Ideas

Mainly uses Tween objects in konva.Tween, in English, means Tweened Aniamation.What is a space animation?To put it plainly is to give you an initial state so that you can gradually change to another state.For example, specify the initial (0, 0) and end coordinates (100, 100), move from the start to the end, and how?Let the computer do its own calculations.Displacement animation, which is a kind of interprocess animation, occurs during the moving process.

  • Tween is the core object that controls the animation of Konva objects.
  • Tween can animate all numeric types of attributes, such as x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX, etc.

The animation in this case is one of the complementary animations: the rotation animation.Start angle 0 and end angle 360 degrees are given.The animation time is also given for 6 seconds, and to achieve a circular effect, after each animation is executed, the animation is reset (that is, back to 0 degrees) and executed again.

3. Code

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <meta charset="UTF-8">
    <title>Use js canvas library konva Create Interval Animation Chushi Rock July 19, 2018</title>
<div id="container"></div>
<script type="text/javascript" src="js/konva/konva2.1.7/konva.js"></script>

<script type="text/javascript">
    var stage = new Konva.Stage({
        container: "container",
        width: window.innerWidth,
        height: window.innerHeight
    var layer = new Konva.Layer();

    var star = new Konva.Star({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        numPoints: 5, // Set to Pentagon
        innerRadius: 40,  // Both innerRadius and outerRadius must be set
        outerRadius: 100,
        fill: 'red',

    var tween = new Konva.Tween({
        node: star,   // Components that require interpolation animation
        duration: 6,  // Duration
        draggable: true, // Settings can be dragged
        easing: Konva.Easings.Linear, // Linear velocity, i.e. uniform speed
        rotation: 360,  // Rotate 360 degrees in 6 seconds

        onFinish: function () {  // Callback function when animation is complete
            this.reset();// Reset Animation
  ; // Play the animation again
        /* You cannot replace code in onFinish with yoyoyo:true
           Because with yoyo yo, after a lap (360 degrees in 6 seconds), it rotates back to its original state.
           Then execute the next animation.This does not allow the Pentagon to rotate in one direction without stopping


Keywords: Javascript

Added by moffo on Sat, 08 Feb 2020 19:20:05 +0200