大学时候，有一段时间对flash比较感兴趣。去图书馆借了一本很厚很厚的falsh书籍。
翻了几页之后，就再没有往后看过。印象比较深的是作者说他用flash完成了一个龙卷风效果。
一直到现在我也没有看到那个效果。
我也曾经想过实现一下。但是大学时候的技术水平，也支撑不起这个想法。慢慢就忘记了。
偶尔间我看到了离心运动。突然就想到一个写法。
演示地址如下：
http://suohb.com/work/wind2.htm
最终效果图如下：
龙卷风，我们可以看做一个向上旋转的气流。
风本身是不可见的，我们就用某个质点的移动轨迹画出来，表示风。
从上向下俯视，就是这样，一个质点做离心运动的路径。
从侧面看，是这样在，一个质点绕Y轴左右摇摆，摆动越来越大的的运动的路径。
我们就用这个来做为侧视图的效果，来做一个2D的龙卷风。
那么开始代码设计：
我们定义一个点，这个点Y轴上恒定速率运动，X轴上，向这中线方向有一个向心力G。一旦点运动超过这条中线，向心力倒转为-G。
这样就会画出上面侧视图的效果。
然后每个周期都新增一些这样的点，画出轨迹。如图；
基本上这样就已经完成了，我们不需要画出完整的路径，只要画出最新的一段就可以。
当到达一定高度之后，就将这条线慢慢移除出去。就得到最终效果
代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Pragma" content="no-cache" /> 5 <meta http-equiv="Cache-Control" content="no-cache" /> 6 <meta http-equiv="Expires" content="0" /> 7 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 8 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> 9 <style type="text/css"> 10 html{ 11 height: 100%; 12 } 13 html,body,ul,li,canvas{ 14 margin: 0; 15 padding: 0; 16 } 17 </style> 18 </head> 19 <body bgcolor="#000000"> 20 <canvas id="knife"></canvas> 21 </body> 22 <script> 23 var canvas = document.getElementById("knife"); 24 canvas.style.position = "absolute" ; 25 canvas.style.top = 0 ; 26 var w = window.innerWidth ; 27 var h = window.innerHeight ; 28 canvas.width = w ; 29 canvas.height = h ; 30 var cxt = canvas.getContext("2d"); 31 cxt.strokeStyle = "#FFF" ; 32 var list = []; 33 var G = 0.4 ;//向心加速度 34 var SPEED_Y = -1 ;//向上速度 35 var centerLine = w/2 ;//龙卷风中线 36 function addLine(){ 37 var LEN = 2 ; 38 for(var i = 0 ;i < LEN ; i ++){ 39 list.push({ 40 x:w/2, 41 y:h/1.3, 42 g:G, 43 c:centerLine+2*Math.random(), 44 sx:(Math.random()-0.5)*4, 45 sy:SPEED_Y+0.5*(Math.random()-0.5), 46 len:Math.round(Math.random()*10+5), 47 list:[{x:w/2,y:h/1.3}] 48 }); 49 } 50 } 51 function step(){ 52 cxt.clearRect(0,0,w,h); 53 addLine(); 54 var obj ; 55 for(var i = 0 ; i < list.length; i ++){ 56 obj = list[i] ; 57 if(obj.y < h/2.5){//如果超过这个高度，就删除一个点 58 obj.len -- ; 59 if(obj.len == 0){ 60 list.splice(i,1); 61 i -- ; 62 continue ; 63 } 64 } 65 obj.x += obj.sx ; 66 obj.y += obj.sy ; 67 obj.sx += obj.g ; 68 obj.g = obj.x > obj.c ? -G : G ; 69 obj.list.unshift({x:obj.x,y:obj.y});//记录下质点运动轨迹 70 obj.list = obj.list.slice(0,obj.len);//仅仅画出其中一段线就好 71 //画出所有点的连线 72 cxt.beginPath(); 73 cxt.moveTo(obj.list[0].x,obj.list[0].y); 74 for(var j = 1 ; j < obj.list.length; j ++){ 75 cxt.lineTo(obj.list[j].x,obj.list[j].y); 76 77 } 78 cxt.stroke(); 79 } 80 requestAnimationFrame(step); 81 } 82 requestAnimationFrame(step); 83 </script> 84 </html>
更多特效请关注公众号：
