오늘 저는 JS 스포츠 애니메이션을 간단히 배웠고 내 경험을 녹음하고 모든 사람과 공유했습니다.
다음은 내가 정리 한 결과입니다.
지식 1 : 속도 애니메이션.
첫 번째 단계는 속도 모션 애니메이션을 구현하고 함수를 캡슐화하는 것입니다. 사용 된 지식은 setInterval (function () {입니다.
코드 사본은 다음과 같습니다.
odiv.style.left = odiv.offsetleft+10+"px";
}, 30).
여기에서 오프셋 레프트가 사용되는 이유에 대해서는 특별히 바이두어이며, 내가 얻은 유용한 정보는 다음과 같습니다.
A.OffSetLeft 및 왼쪽은 상위 노드에 대한 하위 노드의 왼쪽 위치를 나타내는 것과 동일합니다.
비. 그러나 왼쪽은 읽을 수 있고 쓰기가 가능하지만 OffsetLeft는 읽기 전용입니다.
기음. 오프셋 레프트에는 장치가 없으며 하위 노드 위치를 얻을 때 PX를 포함하지 않습니다.
나는 여기서 다른 지식을 확장하고 있습니다. 이 블로거, http://blog.163.com/hongshaooguoguo@126/blog/static/1804698120137285729561/에 감사드립니다.
2. 움직이는 노드를 멈추게하십시오. 여기서 우리는 if 문을 사용하여 확인합니다. OffSetLeft == 0이면 ClearInterVal (타이머) 인 경우 여기의 타이머는 미리 = NULL을 초기화 한 다음 이전 모션 애니메이션을 할당해야합니다.
3. 여기에는 문제가 있습니다. 움직임이 끝나기 전에 운동이 다시 트리거되면 운동 속도가 축적됩니다. 여기서 전체 움직임이 시작되는 한 Clearinterval (타이머)이 충분합니다.
4. 움직임 및 제거 효과를 설정하고 모션에 대한 매개 변수를 설정하십시오. 하나는 속도 속도이고 다른 하나는 대상 위치 Itarget입니다. 우리는 속도가 Itarget의 위치에 의해 판단 될 수 있으므로 하나의 매개 변수 만 필요합니다.
지식 2 : 투명성 구배
1. 실제로, 그것은 Itarget의 값이 투명하다는 점을 제외하고는 지금과 유사하며, 프로세스는 타이머를 지우고 다른 타이머를 켜서 판단 등을 작성하는 것입니다.
2. 매개 변수 알파 = 투명성을 정의하고 타이머는 다음과 같이 작성해야합니다.
코드 사본은 다음과 같습니다.
알파+= 속도;
odiv.style.filter = 'Alpha (불투명도 :'+alpha+'); // 이것은 매우 중요한 방법입니다.
odiv.style.opacity = alpha/100; // 100으로 나누는 것을 잊지 않도록주의하십시오
3. 위는 모두 인라인 스타일입니다.
지식 포인트 3 : 버퍼링 움직임
1. 버퍼링 모션은 거리가 클수록 속도가 클수록 거리가 클수록 속도가 작고, 즉 속도가 거리와 관련이 있음을 의미합니다.
2. 위의 진술에 따르면 속도는 재정의됩니다. 속도는 처음에 0이고 지금은 다음과 같습니다.
코드 사본은 다음과 같습니다.
var Speed = itarget-odiv.offSetLeft;
타이머를 재정의하십시오.
코드 사본은 다음과 같습니다.
odiv.style.left = odiv.offsetleft+속도+'px';
현재, 우리는 속도가 너무 높다는 것을 알았으므로 다음과 같이 할 수 있습니다.
코드 사본은 다음과 같습니다.
var speed = (itarget-odiv.offsetleft)/10;
3. 현재 심각한 문제가있을 것입니다. 화면의 최소 단위는 PX이기 때문에 최종 왼쪽 값은 소수점으로 나타나고 ITARGET은 대상이되지 않습니다. 판단에 의해 해결 될 수 있습니다. Math.floor ()는 여기에 소개되어야하며, 이는 반올림이되며 Math.ceil ()도 나타납니다. 속도를 정의한 후에는 다음을 작성합니다.
코드 사본은 다음과 같습니다.
속도 = 속도> 0? math.ceil (속도) : Math.floor (속도);
이것은 속도가 정수이고 임계 값에서 0임을 보장합니다.
지식 4 : 다중 객체 모션
1. 먼저 모든 객체를 가져오고 배열을 형성 한 다음 For Loop을 사용하여 (이 방법을 클래식 한 방법!) For Loop에서 노드 이벤트를 추가하고 기능의 현재 노드를 대체하는 데 사용합니다.
2. 현재 너비 오프셋 폭을 취할 때는 OBJ의 값을 사용해야합니다.
3. 마우스가 매우 빠르게 움직이면 노드의 너비를 원래 상태로 복원 할 수 없습니다. 타이머는 모든 사람이 사용하는 타이머이기 때문입니다. 다음 노드는 이전 노드가 원래 상태로 돌아 오기 전에 타이머를 지 웠습니다. 솔루션은 각 노드에 인덱스를 추가하는 것입니다. 각 노드는 adiv [i] .timer = null을 루프에 추가하는 것입니다. 그런 다음 타이머를 OBJ.Timer로 바꾸는 기능을 정의하십시오. 따라서 타이머를 공유 할 때 무언가가 발생한다는 사실에주의를 기울여야합니다.
4. 투명성 움직임에서 Alpha는 속도를 대체하지만 타이머가 공유되지 않더라도 여러 객체의 움직임은 문제가됩니다. 알파가 일반적이기 때문에 각 물체가 서로 찢어지기 때문입니다. 솔루션은 타이머처럼 FOR 루프의 각 노드에 알파를 할당하는 것입니다.
요약 : 충돌 문제 해결, 초기화 또는 개인화.
지식 5. 스타일을 얻습니다
1. 노드의 너비를 변경하는 타이머 (크게 이동하고 작은 제거), 노드에 테두리를 추가하면 대상 노드가 이동할 때 대상 노드보다 크게 작습니다. Width+Padding+Scrollbar (Scrollbar)+테두리에주의하십시오. 따라서 모든 오프셋이 테두리*2- (타이머의 각 감소 값)를 증가시키기 때문입니다.
2. 위의 문제에 대한 해결책은 라인에 너비를 쓰고 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 기능을 사용하십시오. 이 기능은 종종 parseint ()와 함께 사용되며 일반적으로 변수로 저장됩니다.
2. Style.width를 작성할 때는 스타일 [ '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 ()을 통과하고 판단 할 경우 사용하십시오. fn ()이 있으면 fn ()을 실행하십시오.
지식 8 : 동시 운동
1. 동시 모션을 제어하기 위해 두 개의 모션 함수가 작성되면 기능 덮어 쓰기가 발생합니다.
2. JSON을 지식으로 사용하십시오. JSON 루프는 (JSON에서 I)를 사용하고 동작 기능의 매개 변수는 OBJ, JSON 및 FN입니다.
3. Itarget의 가치가 없으며 JSON [attr]로 대체됩니다.
이것을 작성한 후에는 완전히 끝났습니다. 모두가 좋아할 수 있기를 바랍니다. 또한 JS 스포츠 애니메이션을 배우는 것이 모두 도움이되기를 바랍니다.