如何制作飘落的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 一般用正弦曲线或余弦曲线 来进行模拟.

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com