Canvasで渦巻きの切り替えアニメーション
以下のサイトのように、Canvasを使って画面の切り替えを行うサイトを見かけるときがあります。
https://recruit.relationsgroup.co.jp/
今回は、渦巻きで切り替わるアニメーションを作ってみましたので、
ご紹介いたします。
渦巻きのプログラムは以下のサイトを参考にさせていただきました。
「情報」授業用 プログラミング演習：図形描画プログラムを作ろう
↓作ってみた物
DEMO
コード
HTML
|
1 | <canvas id="cover_canvas"></canvas> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | html, body { width: 100%; height: 100%; overflow: hidden; } body{ background: url(images/image01.jpg); background-size: cover; color: #2c2c2c; letter-spacing: 0.025em; line-height: 1.5; } canvas { width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: 0.5s; position: absolute; left: 0; top: 0; z-index: 0; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | $(function() { var canvas = document.getElementById("cover_canvas"), ctx = canvas.getContext("2d"), dpRatio = window.devicePixelRatio; canvas.width = document.documentElement.clientWidth * dpRatio; //Canvasのwidthをウィンドウの幅に合わせる canvas.height = document.documentElement.clientHeight * dpRatio; var n = 52, // n 個の四角で1つのうずを書く m = 4, // m 回巻く xCenter = canvas.width / 2, yCenter = canvas.height / 2, x, y, prevX, prevY, lw = 0, rotate = 360 * m + 1, wm = 0.05; ctx.strokeStyle = "#f9dbe7"; //渦巻きの色 ctx.lineCap = "round"; //渦巻きで閉じるアニメーション function close() { ctx.clearRect(0, 0, canvas.width, canvas.height); rotate--; lw = 0; if(rotate == 0) rotate = 360 * m; wm = wm * 1.1; for(var h = 0; h < m; h = h + 1) { for(var i = 0; i < n; i = i + 1) { var theta = (i + rotate) * (2 * 3.14 / n), r = xCenter * 2 / (m * n) * i + xCenter * 2 / m * h; x = Math.cos(theta)*r + xCenter; y = Math.sin(theta)*r + yCenter; if(!(h == 0 && i == 0)) { lw++; ctx.lineWidth = lw * wm; ctx.beginPath(); ctx.moveTo(prevX, prevY); ctx.lineTo(x, y); ctx.stroke(); } prevX = x; prevY = y; } } if(wm < 8.5) window.requestAnimationFrame(close); else { //渦巻きを開くアニメーションスタート window.requestAnimationFrame(open); //背景変更 if($("body").css("background-image").indexOf("image01") > -1) $("body").css("background-image", "url(images/image02.jpg)"); else $("body").css("background-image", "url(images/image01.jpg)"); } } //渦巻きを開くアニメーション function open() { ctx.clearRect(0, 0, canvas.width, canvas.height); rotate--; lw = 0; if(rotate == 0) rotate = 360 * m; wm = wm / 1.1; for(var h = 0; h < m; h = h + 1) { for(var i = 0; i < n; i = i + 1) { var theta = (i + rotate) * (2 * 3.14 / n), r = xCenter * 2 / (m * n) * i + xCenter * 2 / m * h; x = Math.cos(theta)*r + xCenter; y = Math.sin(theta)*r + yCenter; if(!(h == 0 && i == 0)) { lw++; ctx.lineWidth = lw * wm; ctx.beginPath(); ctx.moveTo(prevX, prevY); ctx.lineTo(x, y); ctx.stroke(); } prevX = x; prevY = y; } } if(wm > 0.01) window.requestAnimationFrame(open); else canvas.style.visibility = "hidden"; if(wm < 0.05 && canvas.style.opacity == 1) canvas.style.opacity = 0; } //クリックしたらアニメーションスタート $(window).click(function() { window.requestAnimationFrame(close); canvas.style.visibility = "visible"; canvas.style.opacity = 1; }); }); |
Author Profile
SHARE
