idledaylight
04-20-2006, 12:42 AM
Hi,
This is actually a JavaScript animation question, however I am using Robert Penner's equations and I think that my question relates to ActionScript as well. Here are my two functions:
// Grows element to natural height
function growElement(element) {
// Define variables
element.begin = parseInt(element.style.height);
element.finish = element.scrollHeight;
element.duration = 10;
element.change = element.finish - element.begin;
element.time = 0;
animateGrowth(element);
}
function animateGrowth(element) {
// Clear timeout if necessary
if (element.timeout) {
clearTimeout(element.timeout);
}
var position = easeInOut(element.time++,element.begin,element.cha nge,element.duration);
element.style.height = position + "px";
if (position < element.finish) {
// Recursion
var repeat = function() {
animateGrowth(element);
}
element.timeout = setTimeout(repeat,40);
}
}
And Robert Penner's Quadratic Ease In-Out function:
function easeInOut(t,b,c,d) {
if (t < d/2) return 2*c*t*t/(d*d) + b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;
}
This works great, and makes my element grow exactly how I want it to. However, my question is this: how can I make the element shrink back to it's original height? In other words, this collection of functions successfully increases my elements height, but how can I adapt the functions to make it decrease it's height.
Any help is appreciated!
This is actually a JavaScript animation question, however I am using Robert Penner's equations and I think that my question relates to ActionScript as well. Here are my two functions:
// Grows element to natural height
function growElement(element) {
// Define variables
element.begin = parseInt(element.style.height);
element.finish = element.scrollHeight;
element.duration = 10;
element.change = element.finish - element.begin;
element.time = 0;
animateGrowth(element);
}
function animateGrowth(element) {
// Clear timeout if necessary
if (element.timeout) {
clearTimeout(element.timeout);
}
var position = easeInOut(element.time++,element.begin,element.cha nge,element.duration);
element.style.height = position + "px";
if (position < element.finish) {
// Recursion
var repeat = function() {
animateGrowth(element);
}
element.timeout = setTimeout(repeat,40);
}
}
And Robert Penner's Quadratic Ease In-Out function:
function easeInOut(t,b,c,d) {
if (t < d/2) return 2*c*t*t/(d*d) + b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;
}
This works great, and makes my element grow exactly how I want it to. However, my question is this: how can I make the element shrink back to it's original height? In other words, this collection of functions successfully increases my elements height, but how can I adapt the functions to make it decrease it's height.
Any help is appreciated!