학명이 트윈(Tween)인 이징 모션(Easing Motion)은 버퍼 무브먼트(Buffer Movement)의 약자입니다. 페이지 내용을 편안하게 전환하려면 페이드 효과를 사용하세요. 페이지 요소가 자연스럽게 움직이도록 하려면 이징 효과를 사용하세요. 이 두 가지를 혼합하면 다양한 특수 효과를 얻을 수 있습니다. 저희를 위해 이렇게 많은 사전 조사를 해주신 플래시 개발자님들 덕분에 바로 꺼내서 각종 메뉴와 사진첩에 설치해보았습니다. 가장 간단한 것인 가속과 감속부터 시작해 보겠습니다.
완화되기 때문에 거리, 시간, 속도 등의 개념이 포함되어야 합니다. 직선 L이 있고 점 A와 B는 L의 시작점과 끝점이라고 가정할 수 있습니다. 점 A에서 점 B까지 직선 L 위를 이동하는 점 C가 있습니다. 필요한 시간은 일반적으로 알 수 없지만 속도는 결정해야 합니다. 아래 그림을 보세요. 녹색 사각형이 가볍고 단단한 슬라이딩 스트립 위에서 움직이기를 원합니다. 슬라이딩 스트립의 왼쪽 상단 모서리는 A 지점에 해당하고 오른쪽 상단 모서리는 B 지점에 해당하며 사각형의 왼쪽 상단 모서리는 C 지점에 해당하며 이동 거리는 두 너비의 차이입니다. . 우리가 움직이는 물체에는 폭이 있으므로, 즉 C점은 B점과 결코 일치할 수 없습니다. 하지만 정확한 목적지(편의상 D지점이라 부르겠습니다)가 필요하고 이를 계산해야 합니다. 가속 운동 중 C 지점은 언제든지 D 지점을 초과할 수 있으므로 이동을 종료하고 C 지점을 D 지점으로 다시 당겨야 합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<헤드>
<TITLE> 새 문서 </TITLE>
<META NAME="생성기" CONTENT="EditPlus">
<META NAME="저자" CONTENT="">
<META NAME="키워드" CONTENT="">
<META NAME="설명" 내용="">
</HEAD>
<본문>
<STYLE type=text/css>#taxiway {
배경: #e8e8ff; 너비: 800px;
}
#이동하다 {
배경: #a9ea00; 너비: 100px;
}
</STYLE>
<DIV ID=유도로>
<DIV id=move onclick=move(this)></DIV></DIV>
<P class=notice display="text-align:center">녹색 사각형을 이동하려면 클릭하세요</P>
<SCRIPT 유형=텍스트/자바스크립트>
var getCoords = 함수(el){
var 상자 = el.getBoundingClientRect(),
doc = el.ownerDocument,
본문 = doc.body,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop ||
clientLeft = html.clientLeft || body.clientLeft ||
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
왼쪽 = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { '상단': 상단, '왼쪽': 왼쪽 };
};
var getStyle = 함수(el, 스타일){
if(!+"v1"){
style = style.replace(/-(w)/g, function(all, letter){
return letter.toUpperCase();
});
var 값 = el.currentStyle[스타일];
(값 == "자동")&&(값 = "0px" );
반환값;
}또 다른{
document.defaultView.getCompulatedStyle(el, null).getPropertyValue(style) 반환
}
}
//$()에 해당하는 보조 함수 3은 $ 기호를 사용하여 이름을 지정하지 않습니다. 블로그 공원이 JQuery를 사용하므로 이름 지정 충돌이 발생하기 때문입니다.
//요소를 쿼리하는 차세대 방법에는 캐싱 기능이 있습니다.
var 캐시 = []
var _ = 함수(id){
return 캐시[id] || (cache[id] = document.getElementById(id));
}
var 이동 = 함수(el){
el.style.position = "절대";
var 시작 = getCoords(el).left,
distance = parsFloat(getStyle(_("유도로"),"너비")) -parseFloat(getStyle(el,"너비")),
끝 = 시작 + 거리,
speed = 10, //첫 번째 이동 속도(px/ms), 암시적으로 1ms를 곱함
델타 = 1.5,
변경 = 사실;
el.onclick = 함수(){
if(변경){
el.innerHTML = "가속";
(기능(){
setTimeout(함수(){
el.style.left = getCoords(el).left + 속도 + "px";//이동
속도 *= 델타; //다음 이동 거리
if(getCoords(el).left >= end){
el.style.left = 끝 + "px";
변경 = 거짓;
델타 = 0.85,
속도 = 100;
}또 다른{
setTimeout(arguments.callee,25);//이동할 때마다 25밀리초 동안 유지됩니다.
}
},25)
})()
}또 다른{
el.innerHTML = "천천히";
(기능(){
setTimeout(함수(){
el.style.left = getCoords(el).left - 속도 + "px";//이동
speed = Math.ceil(speed * delta); //다음 이동 거리
if(getCoords(el).left <= 시작 ){
el.style.left = 시작 + "px";
변경 = 사실;
델타 = 1.5,
속도 = 10;
}또 다른{
setTimeout(arguments.callee,25);
}
},25)
})()
}
}
}
window.onload = 함수(){
move(_("이동"))
}
</SCRIPT>
</BODY></HTML>
페이지에서 좌표와 크기를 얻기 위해 getCoords() 및 getStyle()이 다시 작동합니다. 죄송합니다. 저는 제 기능을 자랑하고 싶지 않습니다. 게다가 getStyle()이 많이 잘려져 그 위력도 예전만큼 강력하지 않습니다.
//보조 기능 1
var getCoords = 함수(el){
var 상자 = el.getBoundingClientRect(),
doc = el.ownerDocument,
본문 = doc.body,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop ||
clientLeft = html.clientLeft || body.clientLeft ||
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
왼쪽 = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { '상단': 상단, '왼쪽': 왼쪽 };
};
//보조 기능 2
var getStyle = function(el, 스타일){
if(!+"v1"){
style = style.replace(/-(w)/g, function(all, letter){
return letter.toUpperCase();
});
var 값 = el.currentStyle[스타일];
(값 == "자동")&&(값 = "0px" );
반환값;
}또 다른{
document.defaultView.getCompulatedStyle(el, null).getPropertyValue(style) 반환
}
}