超初心者なのですが、ハムスターを愛でるためのWEBアプリケーションを作ろうとしています。お遊びアプリには動きがないとね！！！ということで、WEBページでのアニメーションに触れてみました。ネット上で仕入れたサンプルをベースにとりえあずハムスターを動かすにはどうするのか？これを確認しつつ、アプリケーションで必要となる「現在地」から目標地点までの距離を測る機能を実装します。
##出来上がったWEBアプリケーション
netlify上にアップしましたのでご覧ください
画面イメージショット （実際はグレーのハムスターが右から左に横切ります）
参考）開発予定のプロダクト（note記事に飛びます）
##確認したかった機能
- ハムスターの画像をアニメーションさせる
- @keyframes でアニメーションできることがわかった
- 以下のサイト様の解説を参考にさせていただきました
- 現在地から目標地点までの距離を計測する
- 2点間の距離を計測するライブラリ「Geolib」で簡単に計測できることがわかった
- 以下のサイト様の解説を参考にさせていただきました
##ユーザーレビュー
家族ども（嫁・子供）にみてもらいました。コメントは以下の通り
- ハムスターがかわいい
- 背景のタッチもかわいい
- ハムスターがもうちょっと細かく動くといいかも
- いままで何をやりたいのかわからなかったがモノを見て分かった
ハムちゃんの動きがすこし雑だよな、、とおもっていたところをやっぱり指摘されたのでここは要改善点。いろいろ調べて、もっとかわいらしく動くようにしたいと思う。
４点目は、やはりそうか、、という感じだが、人はモノを見せてもらうまでは、なかなか理解できないものだなと思った。引きつづき**「動くもの」を素早く作り**、フィードバックが得られるようになりたいと思う。
##ソースコード
HTML
index.html
<!DOCTYPE html>
<html lang="ja-jp">
<head>
<meta charset="UTF-8">
<title>ハム旅</title>
<link rel="stylesheet" href="css/style.css">
<script src="app.js" defer></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/geolib@3.3.1/lib/index.min.js"></script>
<div class="board">
<H1>はむ旅</H1>
<div class = "dist"><P><img width = "50" src = "grayham.png">グレハムちゃんちまで</P></div>
<H3><div id = "kyori"></div></H3>
</div>
</body>
</html>
CSS
style.css
body {
margin: 0;
}
.hamu {
position: absolute;
left: 110%;
bottom: 100px;
width: 200px;
height: 158px;
background-image: url(../hammask.png);
animation: hamuwalk 0.6s 0s infinite steps(9), hamuMove 15s 0s linear;
transform-origin: 50% 100%;
}
@keyframes hamuwalk {
100% {
background-position: -1800px 0;
}
}
@keyframes hamuMove {
0 {
left: 100px;
bottom: 100px;
}
100% {
left: -300px;
bottom: 100px;
}
}
.board {
height: 1000px;
position: relative;
overflow: hidden;
background: rgb(0, 0, 0);
background-image: url(../bg.jpg);
background-size: cover;
background-position: center bottom;
}
H1 {
text-align: center;
font-size: 80px;
color: rgb(1, 26, 250);
}
H3 {
text-align: center;
font-size: 50px;
color: rgb(0, 0, 0);
}
.dist {
text-align: center;
font-size: 40px;
}
Javascript
app.js
var board = document.querySelector(".board")
function start() {
var div = document.createElement("div");
div.classList.add("hamu");
div.style.transform = "scale(1.2)";
div.style.animationDuration = "5s";
board.appendChild(div);
div.addEventListener("animationend", function () {
this.parentElement.removeChild(this);
});
}
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
function successCallback(position) {
//geolibで距離を計測
let distance = geolib.getDistance(
{latitude: position.coords.latitude, longitude: position.coords.longitude}, //自分
{latitude: 35.6895014, longitude: 139.6917337} //都庁
);
console.log(distance);
document.getElementById( 'kyori' ).innerHTML = '約' + distance / 1000 + 'キロメートル';
}
function errorCallback(error) {
//エラー時
}
start();