以下が実装例となります。evalを使わず、リダイレクトやセキュリティ脆弱性がある処理を含まないように注意してください。
```html
<!DOCTYPE html>
<html>
<head>
<title>天気アニメーションアプリ</title>
<style>
#animation {
margin-top: 50px;
text-align: center;
}
.animation-image {
max-width: 50%;
max-height: 50%;
}
</style>
</head>
<body>
<h1>天気アニメーションアプリ</h1>
<button id="rainButton" onclick="showAnimation('rain')">雨</button>
<button id="sakuraButton" onclick="showAnimation('sakura')">桜</button>
<button id="snowButton" onclick="showAnimation('snow')">雪</button>
<button id="clearButton" onclick="stopAnimation()">クリア</button>
<div id="animation"></div>
<script>
var animationIntervalId;
function showAnimation(type) {
stopAnimation();
var animationElement = document.getElementById('animation');
var imageName = type + '-animation.gif';
var imageUrl = 'https://example.com/' + imageName; // ここは適切なURLに変更してください
var imageElement = document.createElement('img');
imageElement.classList.add('animation-image');
imageElement.src = imageUrl;
animationElement.appendChild(imageElement);
// 5秒ごとにアニメーションを停止する
animationIntervalId = setInterval(stopAnimation, 5000);
}
function stopAnimation() {
var animationElement = document.getElementById('animation');
// 子要素を全て削除してアニメーションを停止
while (animationElement.firstChild) {
animationElement.removeChild(animationElement.firstChild);
}
clearInterval(animationIntervalId);
}
</script>
</body>
</html>
```
ジョーク要素として、クリアボタンのキャプションを「止めルンですよ」とするなど、天気にまつわるキャラクターのセリフを取り入れると面白いかもしれません。
