[本]278-20日目JavaScriptコードフォーミュラ
7979 ワード
三角関数を用いた実験ウォンのアニメーション を作成
実習
index.html
実習
index.html
<div class="container-character">
<div class="character"></div>
</div>
style.css .container-character {
width: 500px;
height: 500px;
display: inline-block;
border: 1px solid #000;
position: relative;
}
.character {
background-image: url('../../image/character.png');
background-size: 100px 100px;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
script.js window.onload = function () {
const character = document.querySelector('.character');
// 각도
let degree = 0;
loop();
function loop() {
const rotation = (degree * Math.PI) / 180; // 결과 0
const targetX = window.pageXOffset / 2 + 150 * Math.cos(rotation) + 200;
const targetY = window.pageYOffset / 2 + 150 * Math.sin(rotation) + 200;
character.style.left = `${targetX}px`;
character.style.top = `${targetY}px`;
degree = degree + 1;
requestAnimationFrame(loop);
}
}
Reference
この問題について([本]278-20日目JavaScriptコードフォーミュラ), 我々は、より多くの情報をここで見つけました https://velog.io/@kodok/책-자바스크립트-코드-레시피-278-20일차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol