全部缓动函数

获取Konva最新的信息

本篇教程将演示Konva内置的各种缓动函数的效果,包括Linear, Ease, Back, Elastic, Bounce, 和 Strong

查看更多教程 Easings Documentation.

说明:点击 “Play” 运行动画。

More Easing Functions Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva All Easings Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#buttons {
position: absolute;
top: 10px;
left: 10px;
}
#buttons > input {
padding: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<input type="button" id="play" value="Play" />
<input type="button" id="pause" value="Pause" />
<input type="button" id="reverse" value="Reverse" />
</div>
<script>
var width = window.innerWidth;
var height = 707;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});

var layer = new Konva.Layer();

var easings = [
{ name: 'Linear', color: 'blue' },
{ name: 'EaseIn', color: 'green' },
{ name: 'EaseOut', color: 'green' },
{ name: 'EaseInOut', color: 'green' },
{ name: 'BackEaseIn', color: 'blue' },
{ name: 'BackEaseOut', color: 'blue' },
{ name: 'BackEaseInOut', color: 'blue' },
{ name: 'ElasticEaseIn', color: 'green' },
{ name: 'ElasticEaseOut', color: 'green' },
{ name: 'ElasticEaseInOut', color: 'green' },
{ name: 'BounceEaseIn', color: 'blue' },
{ name: 'BounceEaseOut', color: 'blue' },
{ name: 'BounceEaseInOut', color: 'blue' },
{ name: 'StrongEaseIn', color: 'green' },
{ name: 'StrongEaseOut', color: 'green' },
{ name: 'StrongEaseInOut', color: 'green' }
];

var tweens = [];

for (var n = 0; n < easings.length; n++) {
var num = n + 1;
var ease = easings[n];
var text = new Konva.Text({
x: 10,
y: 60 + (n * 400) / easings.length,
padding: 4,
text: num + ') ' + ease.name,
fontSize: 18,
fontFamily: 'Calibri',
fill: ease.color
});

layer.add(text);

// the tween has to be created after the node has been added to the layer
var tween = new Konva.Tween({
node: text,
x: 280,
easing: Konva.Easings[ease.name],
duration: 2
});

// add tween to tweens array
tweens.push(tween);
}

stage.add(layer);

// play
document.getElementById('play').addEventListener(
'click',
function() {
for (var n = 0; n < tweens.length; n++) {
tweens[n].play();
}
},
false
);

// pause
document.getElementById('pause').addEventListener(
'click',
function() {
for (var n = 0; n < tweens.length; n++) {
tweens[n].pause();
}
},
false
);

// reverse
document.getElementById('reverse').addEventListener(
'click',
function() {
for (var n = 0; n < tweens.length; n++) {
tweens[n].reverse();
}
},
false
);
</script>
</body>
</html>