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

来源：互联网发布：公安情报数据库编辑：程序博客网时间：2024/05/17 07:35

动画与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>