JS 모션 관련 지식 포인트 요약(탄성 모션 예시 포함)_javascript 기술
- WBOY원래의
- 2016-05-16 15:21:131307검색
본 글은 JS스포츠 관련 지식 포인트를 정리한 것입니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
1. 다중 객체 모션 프레임의 모든 내용은 공유할 수 없습니다
2.document.title 출력 빈도는 너무 높아서는 안 됩니다
3. 컴퓨터 내부는 실제로 저장되는 것이 아니라 시뮬레이션된 것이므로 JS 작성 시 소수점을 쓰지 않도록 하세요
예: JS 연산에서 0.07*100은 7이 아닙니다
var a=3; var b=3.00000000000000000001; alert(a=b);
출력 결과가 참입니다
4. 프로그램을 작성할 때는 일반적인 내용을 먼저 생각한 다음 구체적인 내용을 작성하세요.
if(特殊1)
{}
else if(特殊2)
{}
else
{
一般
}
5. 배열의 경우 for 루프나 for..in 루프를 사용할 수 있습니다. for 루프가 더 제어하기 쉽기 때문에 for 루프를 사용하는 것이 좋습니다.
객체(json)의 경우 for..in 루프만 사용할 수 있습니다
6. CSS에서 *{margin:0;padding:0;} 쓰기 성능이 별로 좋지 않습니다
7. 레이아웃 변환, 먼저 각 요소에 대해 왼쪽 및 위쪽 값을 설정한 다음 각 요소 위치에 대해 절대값을 설정하고 여백을 지웁니다
8. IE7에서 UL을 사용하여 연습할 때 일시 정지가 발생합니다. 이때 DIV를 사용해 볼 수 있습니다
9. 마찰계수 iSpeed*0.95를 고려합니다(소수점의 크기는 마찰의 크기에 따라 다름)
10. 가속도, 목표에서 멀어질수록 가속도는 커지고, 목표에 가까울수록 작아집니다(iTarget-obj.offsetLeft)/50
11. 가속도와 마찰의 더 나은 조합은 5와 0.7입니다. 즉, iSpeed = (iTarget-obj.offsetLeft)/5;
12. 프로그램에 문제가 생겼을 때 왜 문제가 발생했는지 생각해 보세요
13. 스타일이 경계를 넘을 수 없는 경우에는 탄성 모션을 사용할 수 없습니다
14. 탄성 모션 정지 조건: 거리가 너무 가깝고 속도가 너무 작습니다
15. 스타일은 자동으로 소수점을 무시하므로 신중하게 분석해야 합니다. 따라서 누락된 소수점이 합산되는 것을 방지하려면 변수를 설정하여 저장한 다음 스타일에 할당할 수 있습니다. obj.style.left=왼쪽 "px";
첨부: JavaScript 탄력적 움직임 예시
운동 원리: 가속 운동, 감속 운동, 마찰 운동
코드는 다음과 같습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
iSpeed += (iTarget - obj.offsetLeft)/5;
iSpeed *= 0.7;
left += iSpeed;
if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
clearInterval(obj.timer);
obj.style.left = iTarget + 'px';
}else{
obj.style.left = obj.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; ">
</div>
</body>
</html>
JavaScript 모션 효과와 관련된 더 많은 콘텐츠를 보려면 이 사이트의 특별 주제인 " JavaScript 모션 효과 및 기술 요약"
을 참조하세요.이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.