Konva
Konva特點
面向?qū)ο蠓绞?/h4>
- 一切皆對象
- 如何定義對象 ①Object構(gòu)造函數(shù) ②直接量 {} ③自定義構(gòu)造函數(shù) 再new
- 構(gòu)造函數(shù) new一個構(gòu)造函數(shù)就可以得到對象（實例）
- this
- 原型 prototype / 原型鏈
konva概念
- 舞臺 stage
- 層 layer
- 組 group
- 圖形
基本操作
- 創(chuàng)建舞臺
new Konva.Stage({
width:
height
})
- 創(chuàng)建層
new Konval.Layer({})
stage.add(layer)
- 圖形或組添加到 層
- 圖形添加到組
- 繪制 layer.draw()
基本圖形
- Konva.Rect() 矩形
- Konva.Circle() 圓形
- Konva.Ellipse() 橢圓
- Konva.Text() 文字
- Konva.Image() 圖片
- Konva.Line() 劃線
- Konva.star() 星星
- ....
事件
new Konva.Stage({
width:
height
})
new Konval.Layer({})
stage.add(layer)
類似于jquery
動畫
- tween對象 指定動畫持續(xù)時間 指定變化的樣式 tween.play()
- 簡寫 圖形.to()
- Animation對象
動畫緩動效果實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>29 緩動效果演示</title>
<script src="bower_components/konva/konva.min.js"></script>
<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>
