10.1 複合アニメーション
複雑なアニメーションはUIを大幅に改良し、よりインタラクティブで魅力的なものにすることができるよ。 こうしたアニメーションを作るには、CSSとJavaScriptの組み合わせがよく使われる。ここでは、 より高度なアニメーションテクニックを見ていくね。複雑なシナリオやインタラクティブ性を含むアニメーションがテーマだよ。
複数のアニメーションを組み合わせることで、CSSで凝ったエフェクトを作ることができる。一例として、 要素が同時にサイズを変えたり、回転したり、移動したりする場合を考えよう。
例: 複合アニメーション
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複合アニメーション</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: combined 4s infinite alternate;
}
@keyframes combined {
0% {
transform: scale(1) rotate(0deg) translateX(0);
}
50% {
transform: scale(1.5) rotate(45deg) translateX(100px);
}
100% {
transform: scale(1) rotate(0deg) translateX(0);
}
}
</style>
</head>
<body>
<div style="min-height: 250px; padding: 20px 0;">
<div class="box"></div>
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複合アニメーション</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: combined 4s infinite alternate;
}
@keyframes combined {
0% {
transform: scale(1) rotate(0deg) translateX(0);
}
50% {
transform: scale(1.5) rotate(45deg) translateX(100px);
}
100% {
transform: scale(1) rotate(0deg) translateX(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
コード解説:
.box: 複合アニメーションが適用される要素@keyframes combined: 要素のスケール、回転、位置を変更するアニメーション
10.2 JavaScriptアニメーション
requestAnimationFrame 関数を使うと、高パフォーマンスでスムーズなアニメーションを作れる。
この関数は画面のリフレッシュレートに同期してアニメーションを動かすから、動きが自然になるよ。
例: requestAnimationFrameを使った移動アニメーション
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>requestAnimationFrameでアニメーション</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// クラス "ball" の要素を選択して変数 ball に保存
const ball = document.querySelector('.ball');
// アニメーションの開始時間を記録する変数
let start = null;
// アニメーションの関数
function animate(time) {
// 初回呼び出し時に現在の時間を記録
if (!start) start = time;
// アニメーション開始からの経過時間を計算
let progress = time - start;
// 経過時間に応じてボールの位置を更新 (最大移動距離200px)
ball.style.left = Math.min(progress / 10, 200) + 'px';
// アニメーションが2秒以内なら続ける
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// アニメーションを開始
requestAnimationFrame(animate);
</script>
</body>
</html>
コード解説:
requestAnimationFrame: アニメーションフレームを実行するためにanimateを呼び出す関数animate: 要素.ballを2秒間で200px右に移動させる関数
10.3 JavaScriptでCSSアニメーションを制御
JavaScriptを使って、要素のクラスやスタイルを変更することでCSSアニメーションを制御できるよ。
例: ボタンをクリックしてCSSアニメーションを開始
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ボタンクリックでアニメーション開始</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
position: relative;
}
.box.animate {
animation: moveAndRotate 3s forwards;
}
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(200px) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<button id="startButton">アニメーション開始</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
コード解説:
.box.animate: 要素.boxにアニメーション moveAndRotate を適用するクラス-
JavaScript: ボタン
#startButtonのclickイベントが、クラスanimateを 要素#boxに追加または削除し、アニメーションを開始または停止する
10.4 アニメーションイベントとの連動
animationstart, animationend, animationiteration などのイベントを使うと、
アニメーションを追跡したり、制御したりできるよ。
例: アニメーションイベントの追跡
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アニメーションイベントの追跡</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
animation: scaleUp 2s infinite;
}
@keyframes scaleUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
const box = document.getElementById('box');
box.addEventListener('animationstart', () => {
console.log('アニメーション開始');
});
box.addEventListener('animationend', () => {
console.log('アニメーション終了');
});
box.addEventListener('animationiteration', () => {
console.log('アニメーション繰り返し');
});
</script>
</body>
</html>
コード解説:
animationstart: アニメーションが開始するときに発火するイベントanimationend: アニメーションが終了するときに発火するイベントanimationiteration: アニメーションが繰り返されるたびに発火するイベント
GO TO FULL VERSION