이 이름을 듣 자마자이 프레임 워크의 효과가 기본적으로 온라인으로 달성 될 수 있음을 알게 될 것입니다. 실제로, 이전 모션 프레임 워크에는 여전히 한계가있었습니다. 즉, 몇 가지 값을 함께 이동할 수 없습니다.
그렇다면이 문제를 해결하는 방법은 무엇입니까? 이전 스포츠 프레임 워크를 살펴 보겠습니다
함수 getStyle (obj, name) {if (obj.currentStyle) {return obj.currentStyle [name]; } else {return getComputedStyle (obj, null) [이름]; }} 함수 startMove (obj, attr, itarget) {clearInterVal (obj.time); obj.time = setInterval (function () {var cur = 0; if (att (CUR = ITARGET) {OBJ.Time} else {att == 'alpha (obj.style). 30);}수정하는 방법? 실제로 매우 간단합니다. 과거 프레임 워크에서는 한 번에 하나의 스타일과 하나의 값만 전달할 수 있습니다. 이제 이것을 JSON 객체로 변경하십시오. 나는 모두가 이해할 것이라고 믿는다.
우리가 그것을 호출 할 때, startMove (odiv, {너비 : 200, 높이 : 200}); 필요한 경우 콜백 기능을 추가하십시오. 코드가 어떻게 수정되는지 살펴 보겠습니다.
함수 startMove (OBJ, JSON, FNEND) {var max = 18; // 모든 타이머가 호출되면 하나의 타이머가 작동합니다 (이동이 시작될 때 기존 타이머가 꺼집니다) // 현재 객체의 타이머가 닫히거나 켜집니다. 이는 페이지의 다른 타이머와 충돌을 방지하여 각 타이머가 서로 clearinterval (obj.timer)을 방해하지 않도록합니다. obj.timer = setInterval (function () {var bstop = true; // 가정 : 모든 값이 (JSON의 var name)에 도달했습니다. Round var cur = round (parsefloat (obj, name)*100; if (math.abs (speed)> max? // 특정 값은 (cur! = itarget) {bstop = false}}이면 대상 지점과 같지 않습니다. if (fnend) //이 함수 만 전달됩니다. {fnend (); }}}}, 20);}BSTOP에 대한 가정이있는 이유는 무엇입니까?
실제로 STARTMOVE를 호출하면 (Odiv, {width : 101, 높이 : 200}); 너비는 101이되고, 움직임이 완료되었고, 높이에 도달하지 않았지만 현재 타이머를 끄었을 수 있습니다. 운동이 끝나고 특별한 상황에서 버그가 발생합니다. 설명하자 :
실제로, 끝에 도달하기 전에 타이머를 끄는 데 모든 움직임이 필요합니다. 반대로, 불가능한 것이 없다면 끄십시오. 프로그래밍 방식으로 부울 값을 정의합니다. 부울 값은 처음에 사실입니다.
모든 값이 도착했습니다. 대상 지점과 같지 않은 값이 있으면 BSTOP은 False입니다. 전체주기가 끝나면 BSTOP이 Ture에 있습니다. 즉, 모든 움직임이 완료되었고 현재 타이머가 꺼져 있음을 의미합니다.
그런 다음이 모션 프레임 워크가 기본적으로 완료되었으며 CSS2는 CSS3에 적용 할 수 없습니다.
요약 :
모션 프레임 워크의 진화
STARTMOVE (ITARGET) 모션 프레임
STARTMOVE (OBJ, ITARGET) 다중 객체
STARTMOVE (OBJ, ATT, ITARGET) 모든 값
STARTMOVE (OBJ, ATT, ITARGET, FN) 체인 모션
StartMove (OBJ, JSON, FN) 완벽한 스포츠
o (∩_∩) o 감사합니다 ~