js 모션 애니메이션_자바스크립트 스킬 8가지 지식 포인트

오늘은 간단하게 js 모션 애니메이션을 배우고, 경험을 기록해서 모두와 공유했습니다.

제가 정리한 결과는 다음과 같습니다.

지식 1: 스피드 애니메이션.

1. 첫 번째 단계는 스피드 모션 애니메이션을 구현하고 함수를 캡슐화하는 것입니다. 사용된 지식은 setInterval(function(){

입니다.

코드 복사 코드는 다음과 같습니다.

　　oDiv.style.left=oDiv.offsetLeft 10 "px";
},30).

여기서 offsetLeft를 사용한 이유에 대해 구체적으로 검색해 본 결과 유용한 정보는 다음과 같습니다.

a.offsetLeft와 left의 유사점은 상위 노드를 기준으로 하위 노드의 왼쪽 위치를 나타낸다는 것입니다.
b. 그러나 left는 읽고 쓸 수 있지만 offsetLeft는 읽기 전용입니다. c.그리고 offsetLeft에는 단위가 없으며 하위 노드의 위치를 ​​얻을 때 그 뒤에 px가 없습니다.

이 블로거

http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/님 덕분에 몇 가지 추가 지식을 얻었습니다.

2. 이동 노드를 중지합니다. 여기서는 if 문을 사용하여 확인합니다. offsetLeft==0,clearInterval(타이머)인 경우 여기의 타이머는 미리 초기화된 다음 이전 모션 애니메이션을 할당해야 합니다. 그것에.

3. 여기에 문제가 있습니다. 동작이 끝나기 전에 다시 동작이 시작되면 동작 전체가 시작되기 전에 ClearInterval(타이머)을 사용하는 한 동작 속도가 누적됩니다. 괜찮을 거예요.

4. 이동 및 제거 효과를 설정하고, 이동에 대한 매개변수를 설정합니다. 하나는 속도이고 다른 하나는 목표 위치 iTarget의 위치로도 속도를 판단할 수 있음을 발견했습니다. 따라서 하나의 매개변수만 필요합니다.

지식 2: 투명도 변화

1. 실제로 ITarget의 값이 투명성이라는 점과 프로세스가 여전히 타이머를 지운 다음 타이머를 열어 판단하는 등의 점을 제외하면 이전과 거의 동일합니다.

2. 매개변수 알파 = 투명도를 정의합니다. 타이머는 다음과 같이 작성되어야 합니다.

코드 복사 코드는 다음과 같습니다.

​알파 =속도;
oDiv.style.filter='alpha(opacity:' alpha ')'; //매우 중요한 메소드이므로 이렇게 작성하고 있으니 참고해주세요
oDiv.style.opacity=alpha/100; //100으로 나누는 것을 잊지 않도록 주의하세요

　3. 위는 모두 인라인 스타일입니다.

지식 3: 버퍼링 동작

1. 버퍼링 모션은 거리가 멀수록 속도가 빨라지고, 거리가 가까울수록 속도가 작아지는 것을 의미합니다. 즉, 속도는 거리와 관련이 있습니다.

2. 위의 설명에 따라 속도를 처음에는 0으로 재정의했지만 지금은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var speed=iTarget-oDiv.offsetLeft;

타이머 재정의:

코드 복사 코드는 다음과 같습니다.

oDiv.style.left=oDiv.offset왼쪽 속도 'px';

이 시점에서 속도가 너무 빠르다는 것을 알았습니다. 다음과 같이 할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var 속도=(iTarget-oDiv.offsetLeft)/10;

3. 이때 심각한 문제가 발생합니다. 화면의 최소 단위가 px이기 때문에 최종 왼쪽 값이 타겟이 아닌 소수인 iTarget이 있을 것입니다. 이는 수학적으로 해결될 수 있습니다. 여기서는 반올림하는 Floor()와 반올림하는 Math.ceil()을 소개합니다. 속도를 정의한 후 다음과 같이 작성합니다.

코드 복사 코드는 다음과 같습니다.

속도=속도>0?Math.ceil(속도):Math.floor(속도);

이러한 방식으로 속도가 모두 정수이고 임계값에서 모두 0임을 완전히 보장합니다.

지식 4: 다중 객체 모션　

1. 먼저 모든 객체를 가져와서 배열을 만든 다음 for 루프를 사용하여 수행하고(이 방법은 얼마나 고전적인지!) for 루프에 노드 이벤트를 추가한 다음 이를 사용하여 함수, 예: startMove(this, iTarget), startMove(obj, iTarget) 함수를 정의할 때.

2. 현재 너비 offsetWidth를 가져올 때 obj 값을 사용해야 합니다.

3. 마우스가 매우 빠르게 움직이면 노드의 너비가 원래 상태로 복원되지 않습니다. 이는 타이머가 모든 사람에게 공통된 타이머이기 때문입니다. 이전 노드가 반환되기 전에 다음 노드가 타이머를 지웠습니다. 해결책은 각 노드에 인덱스를 추가하는 것입니다. 이는 위의 for 루프에 aDiv[i].timer=null;을 추가한 다음 정의된 함수에서 타이머를 obj.timer로 바꾸는 것입니다. 그러므로 공유 타이머에 어떤 일이 일어날 수 있다는 사실에 주의해야 합니다.

4. 투명도의 움직임에서는 알파가 속도를 대체하지만 타이머를 공유하지 않더라도 여러 개체의 움직임에 문제가 발생합니다. 이는 알파가 공유되어 각 개체가 서로 찢어지기 때문입니다. 해결책은 타이머와 같은 for 루프의 각 노드에 알파 할당과 같이 사용하는 것입니다.

요약: 충돌을 해결하려면 초기화하거나 개인화하세요.

지식 5. 스타일 얻기

1. 노드의 너비를 변경하는 타이머(이전용은 크게, 제거용은 작게)에서 노드에 테두리를 추가하면 입주할 때는 대상 노드보다 작아지고, 노드보다 커집니다. 이사할 때 대상 노드. 너비 패딩 스크롤 막대(스크롤 막대) 테두리에 주의하세요. 그 이유는 각 오프셋이 테두리*2를 증가시키기 때문입니다(타이머에서 값이 매번 감소함).

　2. 위의 문제를 해결하는 방법은 width를 line으로 작성하고 offsetLeft 대신에parseInt(oDiv.style.width)를 사용하는 것이다. 링크 스타일:

코드 복사 코드는 다음과 같습니다.

함수 getStyle(obj,attr){
　　if(obj.currentStyle){
return obj.currentStyle[attr] //즉, 브라우저
　　}
　　그밖에{
return getComputerStyle(obj,false)[attr] //다른 브라우저
　　}
}

3. 글꼴 크기의 경우 js에서 글꼴 크기를 쓰는 방법은 한 가지뿐입니다.

지식 6: 모든 속성 값

1. 모든 오프셋 유형에는 작은 버그가 있습니다. getStyle 함수를 사용해야 합니다. 이 함수는 주로 parsInt()와 함께 사용되며 일반적으로 변수에 저장됩니다.

2. style.width 작성시 style['width']도 작성할 수 있습니다. ​

3. 여러 객체의 속성 값을 조정하기 위해 스타일을 매개변수로 캡슐화하여 다중 객체 속성 함수에 세 가지 속성 값(obj, attr, iTarget)이 포함되도록 할 수 있습니다.

4. 위의 모션 프레임은 투명도가 소수이기 때문에 투명도 변경에 적합하지 않습니다. 두 가지 이유 때문에 첫 번째는parseInt이고 두 번째는 attr=...px입니다. 여기서는 If 해석을 사용하여 처리할 수 있습니다. 투명도를 별도로 설정하고,parseInt를parseFloat로 바꾸고, px를 제거하세요.

5. 컴퓨터 자체에 버그가 있어서 0.07*100이 7이 아니어서 반올림된 값인 Math.round()라는 함수를 소개합니다.

지식 7: 체인 모션

　1. move.js 프레임워크를 소개합니다.

2. 콜백 함수 fn()을 전달하고 if를 사용하여 fn()이 있는지 판단한 다음 fn()을 실행합니다.

지식 8: 동시 이동

1. 동시 모션을 제어하기 위해 두 개의 모션 함수를 작성하면 기능 커버리지가 발생합니다.

　2. json의 지식 포인트를 사용합니다. json의 루프는 for(i in json)를 사용하며 모션 함수의 매개변수는 obj, json, fn입니다.

3. 더 이상 iTarget 값이 없으며 json[attr]로 대체됩니다.

이 글을 마치며 모두 마음에 드셨으면 좋겠습니다. 또한 JS 모션 애니메이션을 배우는 모든 분들에게 도움이 되기를 바랍니다.