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

이러한 방식으로 속도가 모두 정수이고 임계값에서 모두 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)를 사용하는 것이다. 링크 스타일:

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 모션 애니메이션을 배우는 모든 분들에게 도움이 되기를 바랍니다.