Ослабление движения, научное название которого — Tween, является аббревиатурой движения буфера. Если вы хотите, чтобы содержимое страницы переключалось удобно, используйте эффекты затухания. Если вы хотите, чтобы элементы страницы перемещались естественно, используйте эффекты замедления. Смешение этих двух факторов может дать различные специальные эффекты. Спасибо разработчикам Flash, которые провели для нас столько предварительных исследований, мы просто достали его и установили в различные меню и фотоальбомы. Начнем с самого простого, ускорения и замедления.
Поскольку это облегчение, оно должно включать в себя следующие понятия: расстояние, время и скорость. Мы можем представить, что существует прямая L, а точки А и В являются начальной и конечной точками L. Существует точка С, движущаяся по прямой L от точки А к точке В. Требуемое время обычно неизвестно, но необходимо определить скорость. Посмотрите на картинку ниже, мы хотим, чтобы зеленый квадрат передвигался по легкой и тугой скользящей полосе. Верхний левый угол скользящей полосы эквивалентен точке A, верхний правый угол эквивалентен точке B, верхний левый угол квадрата эквивалентен точке C, а расстояние перемещения представляет собой разницу между шириной двух полос. . Поскольку объект, который мы перемещаем, имеет ширину, то есть точка C никогда не может совпадать с точкой B. Но точный пункт назначения (назовем его для удобства точкой D) необходим, и мы должны его вычислить. Потому что при ускоренном движении точка С может в любой момент превысить точку D. Когда точка превысит ее, мы должны прекратить движение и оттянуть точку С обратно в точку 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="Описание" CONTENT="">
</HEAD>
<ТЕЛО>
<STYLE type=text/css>#taxiway {
ФОН: #e8e8ff ШИРИНА: 800 пикселей ВЫСОТА: 100 пикселей;
}
#двигаться {
ФОН: #a9ea00 ШИРИНА: 100 пикселей ВЫСОТА: 100 пикселей;
}
</СТИЛЬ>
<DIV id=рулежная дорожка>
<DIV id=move onclick=move(this)></DIV></DIV>
<P class=notice display="text-align:center">Нажмите, чтобы переместить зеленый квадрат</P>
<Тип СКРИПТА=текст/Javascript>
вар getCoords = функция (эл) {
вар поле = el.getBoundingClientRect(),
документ = эл.владелецдокумента,
тело = док.тело,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop) — clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top': top, 'left': left };
};
вар getStyle = функция (эль, стиль) {
if(!+"v1"){
стиль = style.replace(/-(w)/g, function(all, Letter){
вернуть письмо.toUpperCase();
});
значение var = el.currentStyle[стиль];
(значение == "авто")&&(значение = "0px" );
возвращаемое значение;
}еще{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(стиль)
}
}
//Вспомогательная функция 3, эквивалентная $(), не использует символ $ для ее имени, поскольку парк блогов использует JQuery, что приведет к конфликтам имен.
//Мой метод запроса элементов нового поколения имеет возможности кэширования
вар кэш = []
вар _ = функция (идентификатор) {
вернуть кэш[id] || (кэш[id] = document.getElementById(id));
}
вар перемещение = функция (эл) {
el.style.position = "абсолютный";
вар начало = getCoords(el).left,
расстояние = parseFloat(getStyle(_("рулежная дорожка"),"ширина")) - parseFloat(getStyle(el,"width")),
конец = начало + расстояние,
скорость = 10, //Скорость первого движения в пикселях/мс, неявно умноженная на 1мс
дельта = 1,5,
изменение = правда;
el.onclick = функция(){
если (изменение) {
el.innerHTML = "Ускорение";
(функция(){
setTimeout(функция(){
el.style.left = getCoords(el).left + скорость + "px";//Переместить
скорость *= delta //Следующее расстояние перемещения
if(getCoords(el).left >= конец){
el.style.left = конец + «px»;
изменение = ложь;
дельта = 0,85,
скорость = 100;
}еще{
setTimeout(arguments.callee,25);//Остаемся на 25 миллисекунд при каждом движении
}
},25)
})()
}еще{
el.innerHTML = "Помедленнее";
(функция(){
setTimeout(функция(){
el.style.left = getCoords(el).left - скорость + "px";//Переместить
скорость = Math.ceil(скорость * дельта); //Следующее расстояние перемещения;
if(getCoords(el).left <= начало){
el.style.left = начало + «px»;
изменение = правда;
дельта = 1,5,
скорость = 10;
}еще{
setTimeout(arguments.callee,25);
}
},25)
})()
}
}
}
window.onload = функция(){
переместить(_("переместить"))
}
</СКРИПТ>
</BODY></HTML>
Чтобы получить их координаты и размеры на странице, снова вступают в действие методы getCoords() и getStyle(). Извините, мне очень не хочется хвастаться своими функциями. Более того, функция getStyle() была сильно урезана, и ее возможности уже не такие мощные, как раньше.
//Вспомогательная функция 1
вар getCoords = функция (эл) {
вар поле = el.getBoundingClientRect(),
документ = эл.владелецдокумента,
тело = док.тело,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop) — clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top': top, 'left': left };
};
//Вспомогательная функция 2
вар getStyle = функция (эль, стиль) {
if(!+"v1"){
стиль = style.replace(/-(w)/g, function(all, Letter){
вернуть письмо.toUpperCase();
});
значение var = el.currentStyle[стиль];
(значение == "авто")&&(значение = "0px" );
возвращаемое значение;
}еще{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(стиль)
}
}