发布网友
共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 一般用正弦曲线或余弦曲线 来进行模拟.