建一个非线性宽松与KineticJS之间,我们可以设置宽松属性设置为一个宽松函数。除了动力Easings。线性,另一个是动能Easings最为常见。EaseIn,动能Easings。EaseInOut,动能easeout Easings。
产品说明:鼠标悬停或touchstart二层箱子里用不同的宽松政策功能。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var greenBox = new Kinetic.Rect({
x: 100,
y: stage.getHeight() / 2,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25
}
});
var blueBox = new Kinetic.Rect({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
width: 100,
height: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25
}
});
var redBox = new Kinetic.Rect({
x: 478,
y: stage.getHeight() / 2,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25
}
});
layer.add(greenBox);
layer.add(blueBox);
layer.add(redBox);
stage.add(layer);
greenBox.tween = new Kinetic.Tween({
node: greenBox,
scaleX: 2,
scaleY: 1.5,
easing: Kinetic.Easings.EaseIn,
duration: 1
});
blueBox.tween = new Kinetic.Tween({
node: blueBox,
scaleX: 2,
scaleY: 1.5,
easing: Kinetic.Easings.EaseInOut,
duration: 1
});
redBox.tween = new Kinetic.Tween({
node: redBox,
scaleX: 2,
scaleY: 1.5,
easing: Kinetic.Easings.EaseOut,
duration: 1
});
// use event delegation
layer.on('mouseover touchstart', function(evt) {
evt.targetNode.tween.play();
});
layer.on('mouseout touchend', function(evt) {
evt.targetNode.tween.reverse();
});
</script>
</body>
</html>