动画教程"/>
HTML5的一些知识：Canvas KineticJS旋转动画教程
动画与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=".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 secondsvar 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>更多推荐
HTML5的一些知识：Canvas KineticJS旋转动画教程
发布评论