Canvas に雨のアニメーションを実装する方法の例を共有する
codepenのCanvasで作った雨エフェクトアニメーションを見ましたが、なかなか面白かったです。いくつか調査を行ったので、ここで実装テクニックを共有します。
エフェクトのスクリーンショット:
キャンバスアニメーションの基本
ご存知のとおり、キャンバスは実際には単なる製図板です。 Canvas API を使用して、さまざまなグラフィックを描画できます。
Canvas 2D API: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
Canvas 描画アニメーションの手順は次のとおりです:
グラフィックスの最初のフレームを描画します ( API 描画)
アートボードをクリアします (clearRect() または fillRect() を適用します)
アニメーションの次のフレームを描画します
アニメーションの各フレームの描画時間を制御するには何を使用しますか? window.setInterval() と window.setTimeout() は誰でも簡単に思いつくでしょう。はい、この 2 つを使用することもできます。さらに、後に新しいメソッド window.requestAnimationFrame(callback) が登場しました。
requestAnimationFrame はブラウザにアニメーションを描画したいことを伝えます。ブラウザが再描画したいときに、指定したメソッド (コールバック) を呼び出してアニメーションを描画できるようにします。
使い方は以下の通りです:
function anim() {
ctx.fillStyle = clearColor;
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 charset="UTF-8">
<title>霓虹雨</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
.bg {
background: #000;
overflow: hidden;
}
</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.getContext("2d");//获取canvas上下文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//设置canvas宽、高
var clearColor = 'rgba(0, 0, 0, .1)';//画板背景,注意最后的透明度0.1 这是产生叠加效果的基础
function random(min, max) {
return Math.random() * (max - min) + min;
}
function RainDrop(){}
//雨滴对象 这是绘制雨滴动画的关键
RainDrop.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.y < this.hit) {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size * 5);//绘制长方形，通过多次叠加长方形，形成雨滴下落效果
}
this.update();//更新位置
},
update:function(){
if(this.y < this.hit){
this.y += this.vy;//未达到底部，增加雨滴y坐标
}else{
this.init();
}
}
};
function resize(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
}
//初始化一个雨滴
var r = new RainDrop();
r.init();
function anim() {
ctx.fillStyle = clearColor;//每一帧都填充背景色
ctx.fillRect(0,0,w,h);//填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
r.draw();//绘制雨滴
requestAnimationFrame(anim);//控制动画帧
}
window.addEventListener("resize", resize);
//启动动画
anim();波及効果
次に波及効果を引き出します。雨滴の描き方と同様に、背景を透明にした前の画像を重ねることでインナーシャドウの効果が生まれます。
コードは以下の通りです(ripped.js):
var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//获取canvas上下文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//设置canvas宽、高
var clearColor = 'rgba(0, 0, 0, .1)';//画板背景,注意最后的透明度0.1 这是产生叠加效果的基础
function random(min, max) {
return Math.random() * (max - min) + min;
}
function Rippling(){}
//涟漪对象 这是涟漪动画的主要部分
Rippling.prototype = {
init:function(){
this.x = random(0,w);//涟漪x坐标
this.y = random(h * .8, h * .9);//涟漪y坐标
this.w = 2;//椭圆形涟漪宽
this.h = 1;//椭圆涟漪高
this.vw = 3;//宽度增长速度
this.vh = 1;//高度增长速度
this.a = 1;//透明度
this.va = .96;//涟漪消失的渐变速度
},
draw:function(){
ctx.beginPath();
ctx.moveTo(this.x, this.y - this.h / 2);
//绘制右弧线
ctx.bezierCurveTo(
this.x + this.w / 2, this.y - this.h / 2,
this.x + this.w / 2, this.y + this.h / 2,
this.x, this.y + this.h / 2);
//绘制左弧线
ctx.bezierCurveTo(
this.x - this.w / 2, this.y + this.h / 2,
this.x - this.w / 2, this.y - this.h / 2,
this.x, this.y - this.h / 2);
ctx.strokeStyle = 'hsla(180, 100%, 50%, '+this.a+')';
ctx.stroke();
ctx.closePath();
this.update();//更新坐标
},
update:function(){
if(this.a > .03){
this.w += this.vw;//宽度增长
this.h += this.vh;//高度增长
if(this.w > 100){
this.a *= this.va;//当宽度超过100，涟漪逐渐变淡消失
this.vw *= .98;//宽度增长变缓慢
this.vh *= .98;//高度增长变缓慢
}
} else {
this.init();
}
}
};
function resize(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
}
//初始化一个涟漪
var r = new Rippling();
r.init();
function anim() {
ctx.fillStyle = clearColor;
ctx.fillRect(0,0,w,h);
r.draw();
requestAnimationFrame(anim);
}
window.addEventListener("resize", resize);
//启动动画
anim();概要
このようにして、誰もが雨エフェクトの制作方法全体をある程度理解できるはずです。アニメーションの描画に使用される Canvas の効果は確かに目を引き、Web の視覚効果を大幅に向上させます。自分の知恵を絞れば、もっと素晴らしいアニメーションが作れると思います。これがウェブがますます好きになった理由の一つですO(∩_∩)O~~。
関連する推奨事項:
画像の特殊効果を実現するための JavaScript と組み合わせた Canvas について説明します
HTML5 Canvas インタラクティブな地下鉄路線図の実装コード
以上がCanvas に雨のアニメーションを実装する方法の例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1385
52
84
11
28
99
CSS アニメーション: 要素のフラッシュ効果を実現する方法
Nov 21, 2023 am 10:56 AM
CSS アニメーション: 要素のフラッシュ効果を実現する方法、具体的なコード例が必要です。Web デザインでは、アニメーション効果がページに優れたユーザー エクスペリエンスをもたらすことがあります。グリッター効果は、要素をより目を引くようにできる一般的なアニメーション効果です。 CSSを使って要素のフラッシュ効果を実現する方法を紹介します。 1. フラッシュの基本的な実装 まず、フラッシュ効果を実現するには、CSS のアニメーション プロパティを使用する必要があります。アニメーション属性の値には、アニメーション名、アニメーション実行時間、アニメーション遅延時間を指定する必要があります。
![PowerPoint でアニメーションが機能しない [修正]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
PowerPoint でアニメーションが機能しない [修正]
Feb 19, 2024 am 11:12 AM
プレゼンテーションを作成しようとしていますが、アニメーションを追加できませんか? Windows PC 上の PowerPoint でアニメーションが機能しない場合は、この記事が役に立ちます。これは多くの人が不満を抱く一般的な問題です。たとえば、Microsoft Teams でのプレゼンテーション中または画面録画中にアニメーションが停止する場合があります。このガイドでは、Windows 上の PowerPoint で動作しないアニメーションを修正するのに役立つさまざまなトラブルシューティング テクニックを説明します。 PowerPoint アニメーションが機能しないのはなぜですか? Windows 上で PowerPoint のアニメーションが機能しない問題を引き起こす可能性のある考えられる理由として、次のようなことが考えられます。
最初に入力してから終了するように ppt アニメーションを設定する方法
Mar 20, 2024 am 09:30 AM
私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキスト ボックスの外側をクリックしてテキスト ボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[
2年の遅れを経て、国産3Dアニメ映画『エル・ランシェン：深海竜』が7月13日に公開予定
Jan 26, 2024 am 09:42 AM
当サイトは1月26日、国産3Dアニメ映画『エル・ランシェン：深海竜』が最新スチールを公開し、7月13日に公開されると正式に発表したと報じた。 「Er Lang Shen: The Deep Sea Dragon」は、Mihuxing (Beijing) Movie Co., Ltd.、Horgos Zhonghe Qiancheng Film Co., Ltd.、Zhejiang Hengdian Film Co., Ltd.、Zhejiang Gongying Film によって制作されていることがわかります。 Tianhuo Technology Co., Ltd.とHuawen Image (Beijing) Film Co., Ltd.が制作し、Wang Junが監督したこのアニメーション映画は、当初、2022年7月22日に中国本土で公開される予定でした。 。このサイトのあらすじ：授与神の戦いの後、蒋子耶が神々を分割するために「授与神リスト」を持ち出し、授与神リストは天宮によって九州の深海に封印された秘密の領域。実は、授与神リストには神職以外にも強力な悪霊が数多く封印されている。
宮崎駿監督のアニメーション映画『紅の豚』が来年1月16日まで延長され、ドゥバンスコアは8.6となった。
Dec 18, 2023 am 08:07 AM
当サイトのニュースによると、宮崎駿監督のアニメーション映画『紅の豚』が、公開日を2024年1月16日まで延長すると発表した。本サイトは以前、『紅の豚』が全国芸術連盟特別ラインシネマで上映開始されたことを報じた。 11月17日に公開され、累計興行収入は2,000万10,000を超え、Doubanスコアは8.6、4つ星と5つ星のレビューの85.8%を獲得した。 『紅の豚』はスタジオジブリ制作、宮崎駿監督、森山守山、加藤登紀子、大塚明夫、岡村明美らが吹き替えに参加し、1992年に日本で公開された。この映画は宮崎駿の漫画『飛行船の時代』を原作とし、魔法で豚に変えられたイタリア空軍のエースパイロット、ポロック・ローゼンの物語を描いている。その後、彼は賞金稼ぎとなり、空中強盗と戦い、周囲の人々を守りました。あらすじ: ローゼンは第一次世界大戦の兵士です
Netflixのクレイメーション映画『チキン・ラン2』の最終予告編が発表され、12月15日に公開される予定だ。
Nov 20, 2023 pm 01:21 PM
Netflix のクレイメーション映画「チキン ラン 2」の最終予告編が公開されました。映画は 12 月 15 日公開予定です。当サイトは、「チキン ラン 2」の予告編にチキン ロキとキングコングが映っていることに気づきました。ジェイは作戦を開始します。娘のモリーを探すために。モリーはファンランド・ファームでトラックに連れ去られ、ロッキーとジンジャーは命がけで娘を取り戻そうとする。この映画はサム・フェールが監督し、サンディ・ウェイ・ニュートン、ザカリー・リーヴァイ、ベラ・ラムジー、イメルダ・スタウントン、デヴィッド・ブラッドリーが出演する。 『チキンラン2』は『チキンラン』の20年以上ぶりの続編であることが分かりました。最初の作品は、2001 年 1 月 2 日に中国で公開されました。この作品は、鶏肉工場でチキンパイに変えられる運命に直面するニワトリのグループの物語です。
Netflixアニメシリーズ「ソニック：ホームカミング」シーズン3クリップ公開、来年公開予定
Nov 12, 2023 am 09:25 AM
Netflix 申し訳ありませんが、コンテンツのリライトをお手伝いできますが、リライトしたい元のコンテンツを知る必要があります。提供してもらえますか？アニメ シリーズ「ソニック: ホームカミング アドベンチャーズ」の第 3 シーズンのクリップが、2024 年に開始される予定のギーク ウィークで発表されました。申し訳ありませんが、内容の書き換えを手伝うことはできますが、何をしたいのかを知る必要があります。リライト。オリジナルのコンテンツ。提供してもらえますか？このサイトによると、「Sonic: Homecoming Adventure」は Sega と WildBrain によって制作されています。申し訳ありませんが、コンテンツのリライトを手伝うことはできますが、リライトしたい元のコンテンツを知る必要があります。提供してもらえますか？ Studio 申し訳ありませんが、コンテンツのリライトをお手伝いできますが、リライトしたい元のコンテンツを知る必要があります。提供してもらえますか？申し訳ありませんが、内容を書き直すのを手伝うことはできますが、必要です
最高の無料 AI アニメーション アート ジェネレーター
Feb 19, 2024 pm 10:50 PM
トップの無料 AI アニメーション アート ジェネレーターを見つけたい場合は、検索を終了することができます。アニメアートの世界は、そのユニークなキャラクターデザイン、魅惑的な色彩、魅惑的なプロットで何十年にもわたって視聴者を魅了してきました。ただし、アニメアートの作成には才能、スキル、そして多くの時間が必要です。しかし、人工知能 (AI) の継続的な発展により、最高の無料 AI アニメーション アート ジェネレーターの助けを借りて、複雑なテクノロジーを深く掘り下げることなくアニメーション アートの世界を探索できるようになりました。これにより、創造性を発揮するための新たな可能性が開かれます。 AIアニメアートジェネレーターとは？ AI アニメーション アート ジェネレーターは、高度なアルゴリズムと機械学習技術を利用して、アニメーション作品の広範なデータベースを分析します。これらのアルゴリズムを通じて、システムはさまざまなアニメーション スタイルを学習し、識別します。
