PDA

View Full Version : Ease in script



BarrMan
Mar 1st, 2007, 07:06 PM
Hey, I'd like to make an ease in script where the object starts with 200 miliseconds delay and moves forward and ends with 1 milisecond.

My first thought was to decrease the speed variable each time I call the function, however it won't be efficient if I'd like to have the speed variable on 1 at the end of the path.

How could I calculate such thing?

Thanks.

MikeFoster
Mar 1st, 2007, 08:04 PM
Hi BarrMan,

I'm not just trying to get you to use my code - but it might be helpful for you to compare our implementations.

I have several different animation demos (http://cross-browser.com/toys/index.php#animation_demos). Most of them are based on the same time-based animation technique. You give it a target co-ordinate and a time and it then animates to the target in that time. The rate at which it changes position (acceleration) can be linear, sine or cosine.

For sources and docs see the animation section at the X Index (http://cross-browser.com/x/lib/view.php).

This one: xSlideTo (http://cross-browser.com/x/lib/view.php?sym=xSlideTo), might be a good one to look at first.

BarrMan
Mar 1st, 2007, 08:08 PM
Hey Mike. Thanks for your reply.
The reason I've started this project is this site you've mentioned.
You posted the link couple of times before and I've looked at it and took a look at the scrips, however, the scripts parameters are very unclear as for 2 letters parameters and so on, that's why I had troubles figuring out how to make that script.
If you could maybe explain to me how this thing works that would be great.

Thanks!

MikeFoster
Mar 1st, 2007, 10:29 PM
My internet service is on and off right now because of thunderstorms (http://radar.weather.gov/radar.php?rid=bmx&product=NCR&overlay=11101111&loop=no). I'll get back later.

vwphillips
Mar 2nd, 2007, 06:10 AM
Hi Mike

looked at your script and got me thinking.

I asked last time I did this and you did not mind so hope its the same this time.

BTW glad to see your active:)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Change Left, Top, Width, Height, Opacity</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta http-equiv="imagetoolbar" content="no">


<script language="JavaScript" type="text/javascript">
<!--
// Change Left, Top, Width, Height, Opacity (02-March-2007)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height, Opacity style
// of an element over a specified period of time.

// **** Application Notes

// **** The HTML Code
//
// The inline style position of the element should be assigned as 'position:relative;' or 'position:absolute;'
// If not assigned the inline style position of the element will be assigned as 'position:relative;' by the script.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcChangeLTWHO('left','tst1',[20,260],2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height' or 'opacity' dependent on the required effect. (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = an array specifying the start and finish position of the effect. (array)
// The array fields would normally be specified in digits but may be an element ID name.
// parameter 3 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds))
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 2.2K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



// **** Functional Code - NO NEED to Change

var zxcOOPCnt=0;


function zxcChangeLTWHO(zxcmde,zxcobj,zxccng,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||!zxccng) return;
var zxcoop=new zxcCngLTWHOOOP(zxcmde,zxcobj,[zxccng[0],zxccng[1],2000]);
}

function zxcCngLTWHOOOP(zxcmde,zxcmobj,zxcpos,zxctime){
for (var zxc0=0;zxc0<zxcpos.length;zxc0++){
var zxcobj=document.getElementById(zxcpos[zxc0]);
zxcpos[zxc0]=(!zxcobj)?zxcpos[zxc0]:zxcobj['offset'+zxcmde.toUpperCase().charAt(0)+zxcmde.substring(1)];
}
if (zxcpos[0]==zxcpos[1]) return;
zxcmobj.style.position=zxcmobj.style.position||'relative';
this.to=null;
this.ref='zxcmove'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcmobj;
this.time=zxctime||2000;
var zxcsrt=Math.min(zxcpos[0],zxcpos[1]);
var zxcfin=Math.max(zxcpos[0],zxcpos[1]);
if (this.mde!='opacity'&&(zxcsrt<0||this.fin>100)) return;
this.neg=(zxcpos[0]>zxcpos[1]);
this.srt=zxcsrt;
this.fin=zxcfin-zxcsrt;
this.ltwho=-zxcfin+zxcsrt;
this.lsttime=new Date().getTime();
this.mde=zxcmde;
this.cngltwho();
}

zxcCngLTWHOOOP.prototype.cngltwho=function(){
this.inc=Math.PI/(2*this.time);
this.now=this.ltwho;
this.oltwho=this.nltwho
this.ltwho=Math.round(this.fin*Math.sin(this.inc*(new Date().getTime()-this.lsttime))-this.fin);
this.nltwho=(!this.neg)?(this.ltwho+this.fin+this.srt):(this.fin+this.srt-(this.ltwho+this.fin));
if ((!this.neg&&this.nltwho-this.oltwho>0)||(this.neg&&this.oltwho-this.nltwho>0)){
if (this.mde!='opacity') this.obj.style[this.mde]=this.nltwho+'px';
else this.opacity(this.nltwho);
}
if (this.now<0) this.setTimeOut('cngltwho();',10);
}

zxcCngLTWHOOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

zxcCngLTWHOOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}



//-->
</script>
<script type="text/javascript">
<!--

function InitScripts(){
zxcChangeLTWHO('left','tst1',[20,260],2000);
zxcChangeLTWHO('top','tst1',[20,260],2000);
zxcChangeLTWHO('width','tst1',[200,20],2000);
zxcChangeLTWHO('height','tst1',[20,200],2000);
zxcChangeLTWHO('opacity','tst1',[80,20],2000);
}

//-->
</script>


</head>

<body bgColor="#f8cd76" onload="InitScripts()" >


</div>
<div id="tst1" style="position:relative;overflow:hidden;left:0px;top:0px;width:100px;height:100px;background-color:#663300;border:solid #663300 1px;text-align:center;" >
</div>

<br>
<br>
<br>
<br>
<br>
</center>
</body>

</html>

BarrMan
Mar 2nd, 2007, 10:24 AM
Hey, Thanks for the code philip!
It works great but I just asked for an explanation of how to calculate it so I could do it on my own.
If you could explain to me how you calculated the ease in that would be great!
Thanks.

vwphillips
Mar 2nd, 2007, 10:32 AM
cant think of a better explanation than


// parameter 2 = an array specifying the start and finish position of the effect. (array)
// The array fields would normally be specified in digits but may be an element ID name.
// parameter 3 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds))
//




had another think but thats as good as I can do

apart than you can call the functiion again with adifferent set of parameters (time period or start/finish) whenever you want, say from an onclick event.

BarrMan
Mar 2nd, 2007, 10:44 AM
Well, I tried to look at your code and figure out what's going on there but all the zxc and the variables were so unclear I couldn't know which one does what.
It's all so messy when you have the same letter opening on each variable.

If you could just make the variables clearer so I could see what they do and remove all the other unrelated stuff as for the opacity and shape changes that would be nice.

Thanks again!

vwphillips
Mar 2nd, 2007, 12:22 PM
It's all so messy when you have the same letter opening on each variable.

Another one looking a gift horse in the mouth.
I cant be doing with it, so wont bother posting bugfixes and enhancements.

ps

try reading the application notes



// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//

BarrMan
Mar 2nd, 2007, 01:16 PM
Another one looking a gift horse in the mouth.
What's that?

If I knew what every variable you had there did, I would probably try that.
I see you don't feel like helping me figure out how to make this script so if anyone else could help me that would be great!

Thanks!

vwphillips
Mar 2nd, 2007, 01:28 PM
Another one looking a gift horse in the mouth.

the condition of a horses teeth is a crude indication of the horses heath and age.

If you were given a horse it would be insulting to look at its teeth before accepting the gift given freely and in good faith.

tonyp12
Mar 2nd, 2007, 02:10 PM
First you need to visualise what you want.

You want to move a image block 640 pixels to the right
starting from space 0, but you want it accelarate.

The right way is NOT to play with the time delay between each anim,
but instead the posision.

Solution1:
var x=1

place obj at horizonal pos x-1
x=x*2
delay 50ms,
repeat until x=>641
place obj at horizonal pos 640

x=1, x=2 , x=4, x=8, x=16, x=32, x=64......................

You could use: x = (x => 64) ? x=x+32 : x=x*2
if you don't want forever doubling in speed.

one problem with this solution is you don't get end position exact

BarrMan
Mar 2nd, 2007, 02:10 PM
I'm sorry if I insulted you, I had no intention to do that.
I just commented that it's not what I asked for as I've seen this kind of code with the Math.pie and I had no idea why you need to use pie and more calculations for the ease in script.

That's all I've asked for, as I said many times thanks that means I appreciate everything you're doing.

MikeFoster
Mar 2nd, 2007, 10:15 PM
I see yall have been having fun while I was gone ;)

Sorry for the delay. Here's a little something that I hope is helpful. Any feedback will be most appreciated.

Animation Techniques (http://cross-browser.com/x/examples/animation_tech.html)

BarrMan
Mar 3rd, 2007, 11:06 AM
Wow, Thanks alot Mike!
I looked at it and it seemed great!
I'll take a look at it more deeply in a bit and then I'll give you a feedback (most likely a great one).
Thanks alot for helping me. ;)

BarrMan
Mar 3rd, 2007, 01:55 PM
Here's your feedback. :)
Great article! Very clear and goes from the start to the very end(I know you said it's not completed but that's all I needed, though I'd be happy to read the continuance of it).

Is there any way to comment on your article or get further help on it?
Thanks again! Much appreciated.

MikeFoster
Mar 3rd, 2007, 09:46 PM
Thanks! :)

I've made alot of updates to it today. Check it out.

We can discuss it here at CF :) ask anything you want

BarrMan
Mar 3rd, 2007, 09:52 PM
I know we can but it would be off-topic if I do.
Do you have an email/msn/aim?
Thanks!

MikeFoster
Mar 3rd, 2007, 11:16 PM
I've started another thread (http://www.codingforums.com/showthread.php?t=108913) about the article :)