如何制作飘落的FLASH动画

发布网友

共3个回答

懂视网

这次给大家带来JS实现雪花飘落动画步骤详解，JS实现雪花飘落动画的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>JS下雪动画</title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
 .masthead {
 background-color:#333;
 display:block;
 width:100%;
 height:400px;
 }
</style>
<body>
<p class="masthead"></p>
<script>
 (function () {
 var COUNT = 300;
 var masthead = document.querySelector('.masthead');
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
 var width = masthead.clientWidth;
 var height = masthead.clientHeight;
 var i = 0;
 var active = false;
 function onResize() {
 width = masthead.clientWidth;
 height = masthead.clientHeight;
 canvas.width = width;
 canvas.height = height;
 ctx.fillStyle = '#FFF';
 var wasActive = active;
 active = width > 600;
 if (!wasActive && active)
 requestAnimFrame(update);
 }
 var Snowflake = function () {
 this.x = 0;
 this.y = 0;
 this.vy = 0;
 this.vx = 0;
 this.r = 0;
 this.reset();
 };
 Snowflake.prototype.reset = function() {
 this.x = Math.random() * width;
 this.y = Math.random() * -height;
 this.vy = 1 + Math.random() * 3;
 this.vx = 0.5 - Math.random();
 this.r = 1 + Math.random() * 2;
 this.o = 0.5 + Math.random() * 0.5;
 };
 canvas.style.position = 'absolute';
 canvas.style.left = canvas.style.top = '0';
 var snowflakes = [], snowflake;
 for (i = 0; i < COUNT; i++) {
 snowflake = new Snowflake();
 snowflakes.push(snowflake);
 }
 function update() {
 ctx.clearRect(0, 0, width, height);
 if (!active)
 return;
 for (i = 0; i < COUNT; i++) {
 snowflake = snowflakes[i];
 snowflake.y += snowflake.vy;
 snowflake.x += snowflake.vx;
 ctx.globalAlpha = snowflake.o;
 ctx.beginPath();
 ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
 ctx.closePath();
 ctx.fill();
 if (snowflake.y > height) {
  snowflake.reset();
 }
 }
 requestAnimFrame(update);
 }
 // shim layer with setTimeout fallback
 window.requestAnimFrame = (function(){
 return window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  function( callback ){
  window.setTimeout(callback, 1000 / 60);
  };
 })();
 onResize();
 window.addEventListener('resize', onResize, false);
 masthead.appendChild(canvas);
 })();
</script></body></html>

使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

jquery如何判断元素内容为空

Vue.js双向绑定项目实战分析

热心网友

1楼说的AS实现起来相对简单
楼主想用引导层可以看我下面的做法。
1，先分析一下，大雪纷飞的基本元素--雪花，我们可以将一个雪花的飘落过程制作出来，然后通过在场景中复制--翻转来实现雪花飘落及变化。
2，制作--新建1雪花元件，命名为雪花（可根绝自己喜好，将雪花制作的美观）。再新建一MC（影片剪辑）命名为雪花飘落，将雪花元件拖入雪花飘落MC内，新建一引导层，用钢笔或铅笔画出雪花飘落的曲线路径，
关键地方----打开贴近至对象按钮（就是那个小磁铁）将，雪花元件拿到路径的顶端，将引导层插入20帧处插入普通帧，将雪花所在图层的第20帧插入关键帧，移动到路径的尾端，创建补间动画，完成一个雪花飘落过程，
需要注意的是，雪花元件一定要吸附在引导路径上否则无法引导
制作出一个雪花后面的就简单了，在场景中将先前制作的雪花飘落元件拖到场景上，需要多大的雪，就拖多少个雪花飘落MC，为了总监变化，可以将雪花飘落MC翻转，缩小还可以在不同的时间段放入雪花。这样一个大学飘落的场景就出来了。
楼主还不明白可以加我，我给你一个源文件，学习交流。

热心网友

不是用引导层的,用AS 一般用正弦曲线或余弦曲线来进行模拟.

全部栏目

如何制作飘落的FLASH动画