animate下雨动画制作教程,css下雨动画效果
简介
在codepen上看到一个Canvas做的雨效果动画，还是挺有意思的。我研究过，这里分享一下实现技巧。
效果截图：
Canvas动画基础
众所周知，画布其实只是一个画板。我们可以用canvas api在上面画各种图形。
画布2D的API:https://developer . Mozilla . org/en-us/docs/web/API/CanvasRenderingContext 2D
然后画布动画的步骤是：
画第一帧图形(用API画图)，清空画板(用clearRect()或fillRect())画下一帧动画。可以用什么来控制动画每一帧的绘制时间？你很容易想到window.setInterval()和window.setTimeout()。是的，你可以用这两个。另外，后来出现了新的方法：window.requestanimation frame(回调)。
RequestAnimationFrame会告诉浏览器你想画一个动画。让浏览器在想要重绘的时候调用你指定的方法(回调)来绘制你的动画。
用法如下：
function anim(){ CTX . fill style=clear color；ctx.fillRect(0，0，w，h)；for(var i in drops){ drops[i]。draw()；} requestAnimationFrame(anim)；}一般情况下，优先使用requestAnimationFrame来保持动画绘制的频率与浏览器重绘的频率一致。可惜requestAnimationFrame的兼容性不是很好。IE9以下和addroid 4.3以下好像不支持这个属性。不支持的浏览器应该与setInterval或setTimeout兼容。
雨滴下落效果
首先，我们来说说如何做出雨滴落下的效果。其实雨滴是长方形的，再加上后像。残影的绘制可以说是雨滴下落的关键。残像是在每一帧中正向绘制一个半透明的背景和一个矩形，然后叠加之前绘制的图形所产生的效果。因为前进方向的图形是最后画的，所以显得比较亮，后面的图形叠加的比较多，所以在视觉上被弱化了。看起来像是整件事背后的阴影。在这里，画一个透明的背景是关键，否则，叠加效果不会产生。
然后画一个雨滴。首先准备一个画板：
Html代码：
！doctype HTML HTML lang= en head meta charaset= UTF-8 title neon rain/title meta name= viewport content= width=device-width，initial-scale=1.0 style type= text/CSS 。bg {背景：# 000；溢出：隐藏；}/style/head body class= BG canvas id= canvas-club /canvas script type= text/JavaScript src= raindrop.js /script/body/html我在js文件(raindrop . js)中绘制动画，代码如下：
var c=document . getelementbyid( canvas-club )；var CTX=c . get context( 2d )；//Get canvas context var w=c . width=window . inner width；var h=c . height=window . inner height；//设置画布的宽度和高度var clear color= rgba (0，0，0，0.1)；//画板背景，注意最后透明度0.1。这是叠加效果函数random (min，max){ return math . random()*(max-min)min的基础；}函数雨滴(){}//雨滴对象这是雨滴动画的关键。prototype={ init:function(){ this . x=random(0，w)；//雨滴的位置x this . y=0；//雨滴的位置y this.color=hsl(180，100%，50%)；//雨滴颜色矩形的填充颜色this.vy=random(4，5)；//雨滴的下落速度this.hit=random(h * .8，h * . 9)；//下降this.size=2的最大值；//矩形宽度}，draw:function(){ if(this . ythis . hit){ CTX . fill style=this . color；ctx.fillRect(this.x，this.y，this.size，this . size * 5)；//画一个矩形，多次叠加矩形形成雨滴下落效果} this . update()；//更新位置}，update:function(){ if(this . ythis . hit){ this . y=this . vy；//如果没到底，增加雨滴Y坐标} else { this . init()；} }};function resize(){ w=c . width=window . inner width；h=c . height=window . inner height；}//初始化一个雨滴var r=新雨滴()；r . init()；function anim(){ CTX . fill style=clear color；//每一帧用背景色ctx.fillRect(0，0，w，h)填充；//填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致没有叠加效果r . draw()；//绘制雨滴请求动画帧(anim)；//控制动画帧} window . addevent listener( resize ，resize)；//启动动画anim()；涟漪效果
然后画出涟漪效应。类似于画雨滴的方式，也是将之前的图像叠加透明背景产生内阴影的效果。
代码如下(rippling.js):
var c=文档。getelementbyid( canvas-club )；var CTX=c .获取上下文( 2d )；//获取帆布上下文宽度=窗口。内部宽度；var h=c . height=窗口。内部高度；//设置帆布宽、高var clearColor=rgba(0，0，0，1);//画板背景，注意最后的透明度0.1 这是产生叠加效果的基础函数random(min，max){ return math。random()*(max-min)min；}函数ripping(){ }//涟漪对象这是涟漪动画的主要部分撕扯。prototype={ init:function(){ this。x=random(0，w)；//涟漪x坐标this.y=random(h * .8，h *。9);//涟漪y坐标这个。w=2；//椭圆形涟漪宽这个。h=1；//椭圆涟漪高这个。VW=3；//宽度增长速度这个。VH=1；//高度增长速度这个。a=1；//透明度this.va=.96//涟漪消失的渐变速度}，draw:function(){ CTX。begin path()；ctx.moveTo(this.x，this。这个。h/2)；//绘制右弧线CTX。beziercurveto(this.x this.w/2，this.y - this.h/2，this.x this。w/2，这个。y这个。h/2，这个。x，这个。你这个。h/2)；//绘制左弧线CTX。beziercurveto(this.x - this.w/2，this.y this.h/2，this.x - this。w/2，这个。y -这个。h/2，这个。x，这个。这个。h/2)；ctx.strokeStyle=hsla(180，100%，50%，这个。a))’；CTX。笔画()；CTX。关闭路径()；这个。update()；//更新坐标}、update:function(){ if(这个。a . 03){这个。w=这个。大众；//宽度增长这个。h=这个。VH；//高度增长如果(这个。w 100){这个。a *=这个。va；//当宽度超过100,涟漪逐渐变淡消失this.vw *=.98//宽度增长变缓慢this.vh *=.98//高度增长变缓慢} }其他{这个。init()；} }};函数resize(){ w=c . width=window。内部宽度；高度=窗户。内部高度；}//初始化一个涟漪var r=新荡漾();r . init()；函数anim(){ CTX。填充样式=清晰的颜色；ctx.fillRect(0，0，w，h)；r . draw()；requestAnimationFrame(anim)；}窗口。addevent侦听器( resize ，resize)；//启动动画anim()；总结
这样大家对整个下雨效果的制作方法，应该有一定的了解了帆布。用来绘制动画的效果确实能让人眼前一亮，让网的视觉效果提升一大截。发动自己的智慧，相信能做出更多奇妙的动画。这是我越来越喜欢网的原因之一吧O(_)O~~。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。