HTML5里面的东西:Canvas KineticJS规模动画教程!
2013-10-24 20:28
585 查看
动画与KineticJS形状的规模,我们可以创建一个新的动画与动力。动画,并定义一个函数,修改形状的规模与每个动画帧。
在本教程中,我们将扩展x和y组件的一个蓝色的六角,y组件的一个黄色六角,x组件的一个红色的六角轴心位置右侧的形状。
产品说明:拖拽这个六边形作为他们鼓舞。
在本教程中,我们将扩展x和y组件的一个蓝色的六角,y组件的一个黄色六角,x组件的一个红色的六角轴心位置右侧的形状。
产品说明:拖拽这个六边形作为他们鼓舞。
<!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(); /* * leave center point positioned * at the default which is at the center * of the hexagon */ var blueHex = new Kinetic.RegularPolygon({ x: 100, y: stage.getHeight() / 2, sides: 6, radius: 70, fill: '#00D2FF', stroke: 'black', strokeWidth: 4, draggable: true }); var yellowHex = new Kinetic.RegularPolygon({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, sides: 6, radius: 70, fill: 'yellow', stroke: 'black', strokeWidth: 4, draggable: true }); /* * move center point to right side * of hexagon */ var redHex = new Kinetic.RegularPolygon({ x: 470, y: stage.getHeight() / 2, sides: 6, radius: 70, fill: 'red', stroke: 'black', strokeWidth: 4, offset: { x: 70, y: 0 }, draggable: true }); layer.add(blueHex); layer.add(yellowHex); layer.add(redHex); stage.add(layer); var period = 2000; var anim = new Kinetic.Animation(function(frame) { var scale = Math.sin(frame.time * 2 * Math.PI / period) + 0.001; // scale x and y blueHex.setScale(scale); // scale only y yellowHex.setScale(1, scale); // scale only x redHex.setScale(scale, 1); }, layer); anim.start(); </script> </body> </html>
相关文章推荐
- HTML5的一些知识:Canvas KineticJS旋转动画教程
- HTML5新的东西:Canvas里面KineticJS补间动画教程!
- [js高手之路]html5 canvas动画教程 - 下雪效果
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
- [js高手之路]html5 canvas动画教程 - 边界判断与反弹
- [js高手之路] html5 canvas动画教程 - 匀速运动
- [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
- [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件
- HTML5那些故事:Canvas的KineticJS图片教程!
- HTML5又一个点:Canvas KineticJS文本教程!
- [js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动
- 推荐的html5知识:Canvas KineticJS图片教程!
- html5 canvas动画教程 - 下雪效果
- [js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格
- HTML5画布kineticjs BLOB教程
- HTML5里面,关于Canvas的KineticJS圆教程!
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)