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">
<head>
<meta charset="UTF-8">
<title>Use js canvas library konva Create Interval Animation Chushi Rock July 19, 2018</title>
</head>
<body>
<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',
});
layer.add(star);
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
this.play(); // 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
*/
});
tween.play();
stage.add(layer);
</script>
</body>
</html>