2016 - 2024

感恩一路有你

用程序实现的天气效果之鹅毛大雪

浏览量:1948 时间:2024-06-23 18:40:35 作者:采采

天气效果是很多网页设计师必学必做的一个技能,其中雪花效果在实际作品中非常常见。如果使用时间轴动画来实现这个效果,会非常麻烦,因为随机性无法控制,而且每次都是一样的效果。但是,如果用编程来实现,就会简单得多。

首先,我们新建一个空白的文档,设置帧频为30fps。

导入背景图和绘制雪花

接下来,导入一张背景图,为了突出白色的雪花效果,选择与白色对比明显的颜色为佳。例如,我们可以选择一张红色喜庆的图像。

然后,我们需要手动绘制一个雪花的影片剪辑,之后的代码将根据这个影片剪辑复制生成多个不同大小形态的雪花在舞台上。绘制的方法主要是利用径向渐变,从白色到透明的白色,这样就会产生边缘模糊的效果。由于雪花在视觉上可能不是绝对的圆形,所以我们可以将它做成椭圆形。

编写代码实现雪花效果

在主时间轴上新建一个AS层,并添加以下代码:

var total:int  100; // 雪花总数
var max:int  1; // 最大尺寸
var min:Number  0.18; // 最小尺寸
var snowList:Array  []; // 雪花数组
var w:Number  ;
var h:Number  ;
// 创建雪花
createSnow();
startMoveSnow();
// 建立雪花
function createSnow():void {
   for (var i:int  0; i < total; i  ) {
      var snow_mc:SnowItem  new SnowItem();
      snow_mc.x  Math.floor(Math.random() * w);
      snow_mc.y  Math.floor(Math.random() * h);
      snow_  snow_  Math.random() * (max - min)   min;
      snow_  Math.random() * 0.8   0.2;
      snow_mc["yspeed"]  Math.floor(Math.random() * 2   6);
      snow_mc["xspeed"]  -0.036   Math.random() * 0.06;
      snow_mc["radian"]  0;
      snow_  Math.random() * 360;
      (snow_mc);
      snowList.push(snow_mc);
   }
}
// 控制雪花降落
function startMoveSnow():void {
   (Event.ENTER_FRAME, moveSonw);
}
function moveSonw(e:Event):void {
   for (var i:int  0; i < total; i  ) {
      var mSnow:SnowItem  snowList[i] as SnowItem;
      mSnow["radian"]  mSnow["xspeed"] * 2;
      mSnow.x  (mSnow["radian"]) * 2;
      mSnow.y  mSnow["yspeed"];
      if (mSnow.y > h || mSnow.x > w || mSnow.x < 0) {
         mSnow.y  -10;
         mSnow.x  -10   Math.floor(Math.random() * (w   10));
           Math.random() * 360;
      }
    }
}

运行代码,你就可以看到“鹅毛大雪”的效果啦!

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。