c# - Manual slide-in animation using delta time -

i'm creating simple slide-in animation game. box shown @ bottom character dialog.

the animation supposed follows:

a square slides in left, waits bit, expands full width.

the box made using unity's gui box. timing extended debugging purposes (i need able see animation). works way want to, except when animates square rectangle, appears "jump" instead of transitioning relatively smoothly rest of animation.

am doing improperly? know isn't coded spectacularly (i wrote in 5 minutes in first way occurred me), i'm pretty sure logic correct. maybe timer causing problems?

private string boxstring = "hello, world! sample character dialog.";  private float elapsedtime = 0.0f;  private float initialslideinduration = 1.333f; private float waitbetweenslideandexpand = 0.666f; private float expansionduration;  private float boxheightpercentage = 0.10f; private float boxwidthpercentage = 0.95f; private float positionfromleft; private float positionfrombottom; private float boxwidth; private float boxheight;  // instantiate variables before frames drawn void start () {     expansionduration = initialslideinduration + waitbetweenslideandexpand + 3.333f;     boxwidth = screen.width*boxwidthpercentage;     boxheight = screen.height*boxheightpercentage;     positionfromleft = (screen.width - (screen.width * boxwidthpercentage)) / 2;     positionfrombottom = screen.height - (positionfromleft + boxheight); }  // called once per frame void update () {     elapsedtime += time.deltatime;   }  // render , handle gui events void ongui() {     // slide in square     if (elapsedtime <= initialslideinduration) {         float initialleftpadding = -positionfromleft - boxheight;         float finalleftpadding = positionfromleft;         float movementdistance = (2 * positionfromleft) + boxheight;         float progress = elapsedtime / initialslideinduration;          gui.box (new rect ((progress * movementdistance) + initialleftpadding, positionfrombottom, boxheight, boxheight), boxstring);     }      // if square ready , have waited, animate rectangle     else if (elapsedtime > initialslideinduration+waitbetweenslideandexpand && elapsedtime <= expansionduration) {         float initialwidth = boxheight;         float finalwidth = boxwidth;         float growth = finalwidth - initialwidth;         float progress = elapsedtime / expansionduration;          gui.box(new rect(positionfromleft, positionfrombottom, (progress * growth) + initialwidth, boxheight), boxstring);     }     // stay full width rectangle     else if(elapsedtime > expansionduration){         gui.box (new rect (positionfromleft, positionfrombottom, boxwidth, boxheight), boxstring);     }     // waiting, display square left padding     else {         gui.box (new rect (positionfromleft, positionfrombottom, boxheight, boxheight), boxstring);     } }    

if want frame-rate independent should use coroutine that's how i'd :

float startwidth = 1f; float endwidth = 10f; float startposition = 1f; float endposition = 10f; float positionx, widthx;  ienumerator slideinanimation(float slidetime = 0.3f, float expandtime = 1f) {     float t = slidetime;     while (t>0) {         positionx = mathf.lerp(startposition,endposition,1-(t/slidetime));         t-=time.deltatime;         yield return null; //wait end of frame (almost)     }     positionx = endposition;      t = expandtime;     while (t>0) {         widthx = mathf.lerp(startwidth,endwidth,1-(t/expandtime));         t-=time.deltatime;         yield return null; //wait end of frame (almost)     }     widthx = endwidth; }  void ongui() {     gui.box (new rect (positionx , positionfrombottom, widthx , boxheight), boxstring); } 

and run way :

ienumerator start() {     positionx = startposition;     widthx = startwidth;      yield return startcoroutine(slideinanimation());     //all stuff happening after line run when animation finishes } 

here happened here :

i got rid of ongui, because want happens on time , delta time of gui calls unpredictable. thing handling animation here , not logic need stuff happen once per frame, (no need move stuff twice before render).

good solution create coroutine handle that