フェードインの作成方法
canvasの2次元の描画用コンテキストには、globalAlphaというプロパティで透明度を設定することができる。
この透明度の値を0（透明）から1（不透明）に徐々に変えていくことでフェードインのアニメーションを作成することができます。
globalAlpha 0 で画像を描画する。
globalAlpha 0.1 で画像を描画する。
…中略
globalAlpha 1 で画像を描画する。
このglobalAlphaの値を０～１に変える時間がフェードインのアニメーションの時間になります。
globalAlphaの値が0の場合
alphaの値が0なので透明の状態です。
window.addEventListener( 'DOMContentLoaded', function( ) {
var canvas = document.querySelector( '#canvas-alpha0-255' );
var context2d = canvas.getContext( '2d' );
var x = 0;
var y = 0;
var width;
var height;
var alpha = 0;
var img = new Image();
img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
img.onload = function( ) {
width = Math.min( img.width, canvas.width );
height = Math.min( img.height, canvas.height );
draw();
};
function draw(){
context2d.clearRect(0, 0, canvas.width, canvas.height);
context2d.globalAlpha = alpha;
context2d.drawImage( img, x, y, width, height );
}
} );
CANVAS
globalAlphaの値が0.5の場合
alphaの値が0.5なので半分透明な状態です。
window.addEventListener( 'DOMContentLoaded', function( ) {
var canvas = document.querySelector( '#canvas-alpha50-255' );
var context2d = canvas.getContext( '2d' );
var x = 0;
var y = 0;
var width;
var height;
var alpha = 0.5;
var img = new Image();
img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
img.onload = function( ) {
width = Math.min( img.width, canvas.width );
height = Math.min( img.height, canvas.height );
draw();
};
function draw(){
context2d.clearRect(0, 0, canvas.width, canvas.height);
context2d.globalAlpha = alpha;
context2d.drawImage( img, x, y, width, height );
}
} );
CANVAS
globalAlphaの値が1の場合
alphaの値が1なので不透明な状態です。
window.addEventListener( 'DOMContentLoaded', function( ) {
var canvas = document.querySelector( '#canvas-alpha100-255' );
var context2d = canvas.getContext( '2d' );
var x = 0;
var y = 0;
var width;
var height;
var alpha = 1;
var img = new Image();
img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
img.onload = function( ) {
width = Math.min( img.width, canvas.width );
height = Math.min( img.height, canvas.height );
draw();
};
function draw(){
context2d.clearRect(0, 0, canvas.width, canvas.height);
context2d.globalAlpha = alpha;
context2d.drawImage( img, x, y, width, height );
}
} );
CANVAS
サンプル
画像をフェードインで表示するサンプルです。
下のバーを動かしてフェードインの時間を設定できます。
描画はrequestAnimationのタイミングで実行されるので、時間は目安程度になります。
大体requestAnimationだと1秒間に60回ほど描画されるそうです。
window.addEventListener( 'DOMContentLoaded', function( ) {
var canvas = document.querySelector( '#canvas-255' );
var context2d = canvas.getContext( '2d' );
var fadeinRange = document.querySelector( '#fadein-time-255' );
var fadeinLabel = document.querySelector( '#fadein-label-255' );
var retryBtn = document.querySelector( '#retry-255' );
var x = 0;
var y = 0;
var width;
var height;
var alpha = 0;
var time;
var img = new Image();
img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
img.onload = function( ) {
width = Math.min( img.width, canvas.width );
height = Math.min( img.height, canvas.height );
window.requestAnimationFrame( draw );
};
function draw(){
context2d.clearRect(0, 0, canvas.width, canvas.height);
context2d.globalAlpha = alpha;
context2d.drawImage( img, x, y, width, height );
alpha += ( 1 / 60 ) / time;
window.requestAnimationFrame( draw );
}
fadeinRange.addEventListener( 'change', setTime );
retryBtn.addEventListener( 'click', resetAlpha );
function setTime() {
time = fadeinRange.value / 10;
fadeinLabel.innerText = time;
resetAlpha();
}
setTime();
function resetAlpha() {
alpha = 0;
}
} );
CANVAS
フェードインの時間秒