您的位置：首页 > Web前端 > JavaScript

HTML5的一些知识：Canvas KineticJS旋转动画教程

2013-10-25 20:43 579 查看

动画与KineticJS形状的自转,我们可以创建一个新的动画与动力。动画,并定义一个函数修改形状的旋转与每个动画帧。
在本教程中,我们将旋转蓝色矩形的左上角,一个黄色的长方形对其中心,和一个红色的矩形关于外部点。

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</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">
window.onload = function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();

/*
* leave center point positioned
* at the default which is the top left
* corner of the rectangle
*/
var blueRect = new Kinetic.Rect({
x: 50,
y: 75,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4
});

/*
* move center point to the center
* of the rectangle with offset
*/
var yellowRect = new Kinetic.Rect({
x: 220,
y: 75,
width: 100,
height: 50,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: [50, 25]
});

/*
* move center point outside of the rectangle
* with offset
*/
var redRect = new Kinetic.Rect({
x: 400,
y: 75,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
offset: [-100, 0]
});

layer.add(blueRect);
layer.add(yellowRect);
layer.add(redRect);
stage.add(layer);

// one revolution per 4 seconds
var angularSpeed = Math.PI / 2;
var anim = new Kinetic.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
blueRect.rotate(angleDiff);
yellowRect.rotate(angleDiff);
redRect.rotate(angleDiff);
}, layer);

anim.start();
};
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： KineticJS旋转动画教程

相关文章推荐

新的分享

章节导航