Easing motion, whose scientific name is Tween, is the abbreviation of buffer movement. If you want page content to switch comfortably, use fade effects. If you want page elements to move naturally, use easing effects. Mixing these two can produce a variety of special effects. Thanks to the Flash developers who did so much preliminary research for us, we just took it out and installed it in various menus and photo albums. Let's start with the simplest things, acceleration and deceleration.
Since it is easing, it must involve the following concepts: distance, time and speed. We can imagine that there is a straight line L, and points A and B are the starting and ending points of L. There is a point C moving on the straight line L, from point A to point B. The time required is usually unknown, but the speed must be determined. Look at the picture below, we want the green square to move on the light and tight sliding strip. The upper left corner of the sliding strip is equivalent to point A, the upper right corner is equivalent to point B, the upper left corner of the square is equivalent to point C, and the moving distance is the difference between the widths of the two. Since the object we move has a width, that is to say, point C can never coincide with point B. But an accurate destination (for convenience, let's call it point D) is necessary, and we must calculate it. Because during accelerated motion, point C may exceed point D at any time. When the point exceeds it, we must terminate the movement and pull point C back to point D.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<STYLE type=text/css>#taxiway {
BACKGROUND: #e8e8ff; WIDTH: 800px; HEIGHT: 100px
}
#move {
BACKGROUND: #a9ea00; WIDTH: 100px; HEIGHT: 100px
}
</STYLE>
<DIV id=taxiway>
<DIV id=move onclick=move(this)></DIV></DIV>
<P class=notice display="text-align:center">Click to move the green square</P>
<SCRIPT type=text/javascript>
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
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 };
};
var getStyle = function(el, style){
if(!+"v1"){
style = style.replace(/-(w)/g, function(all, letter){
return letter.toUpperCase();
});
var value = el.currentStyle[style];
(value == "auto")&&(value = "0px" );
return value;
}else{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}
//Auxiliary function 3, equivalent to $(), does not use the $ symbol to name it because the blog park uses JQuery, which will cause naming conflicts.
//My new generation method of querying elements has caching capabilities
var cache = []
var _ = function(id){
return cache[id] || (cache[id] = document.getElementById(id));
}
var move = function(el){
el.style.position = "absolute";
var begin = getCoords(el).left,
distance = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),
end = begin + distance,
speed = 10, //The speed of the first movement, in px/ms, implicitly multiplied by 1ms
delta = 1.5,
change = true;
el.onclick = function(){
if(change){
el.innerHTML = "Acceleration";
(function(){
setTimeout(function(){
el.style.left = getCoords(el).left + speed + "px";//Move
speed *= delta; //Next moving distance
if(getCoords(el).left >= end){
el.style.left = end + "px";
change = false;
delta = 0.85,
speed = 100;
}else{
setTimeout(arguments.callee,25);//Stay for 25 milliseconds each time you move
}
},25)
})()
}else{
el.innerHTML = "Slow down";
(function(){
setTimeout(function(){
el.style.left = getCoords(el).left - speed + "px";//Move
speed = Math.ceil(speed * delta); //Next moving distance
if(getCoords(el).left <= begin ){
el.style.left = begin + "px";
change = true;
delta = 1.5,
speed = 10;
}else{
setTimeout(arguments.callee,25);
}
},25)
})()
}
}
}
window.onload = function(){
move(_("move"))
}
</SCRIPT>
</BODY></HTML>
In order to obtain their coordinates and sizes on the page, getCoords() and getStyle() come into play again. Sorry, I really don't want to show off my functions. What's more, getStyle() has been cut off a lot, and its power is not as powerful as before.
//Auxiliary function 1
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
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 };
};
//Auxiliary function 2
var getStyle = function(el, style){
if(!+"v1"){
style = style.replace(/-(w)/g, function(all, letter){
return letter.toUpperCase();
});
var value = el.currentStyle[style];
(value == "auto")&&(value = "0px" );
return value;
}else{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}