Search code examples
javajqueryeasing

Jquery Easing function


I was studying a jquery easing function to use in a java application and ended with this:

// t: current time, b: begInnIng value, c: change In value, d: duration
    float easeInOutQuad (float x, float t, float b, float c, float d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
    }

can someone teach me how do i plug this into my animated sphere movement?

EDIT: I wont put here unnecessary code describing my sphere movement. Imagine a sphere, with X position named X and it will go from 0 to 1000, using this easing function. How do i feed the function?


Solution

  • This is basically psuedo-java code, but I tested it and it works. I drew a small circle instead of using a sphere:

    Sphere sphere = new Sphere();
    
    // you might want these to be in the sphere class
    float begin;
    float change;
    float time;
    long start;
    float duration;
    float destX = 200;
    
    // setup, do this when you want to start the animation
    void init(){
      begin = sphere.x;
      change = destX - begin;
      time = 0;
      start = System.currentTimeMillis();
      duration = 1000;
    }
    
    // loop code, may also be where you render the sphere
    void loop(){
      if (time <= duration){
        sphere.x = easeInOutQuad(time, begin, change, duration);
      }else{
        // animation is over, stop the loop
      }
      time = System.currentTimeMillis() - start;
      sphere.render();
    }
    
    float easeInOutQuad (float t, float b, float c, float d) {
      if ((t/=d/2) < 1) return c/2*t*t + b;
      return -c/2 * ((--t)*(t-2) - 1) + b;
    }
    
    class Sphere{
      float x = 0;
      void render(){
        ellipse(x, 100, 10, 10);
      } 
    }
    

    You'll probably want to move things around depending on your set up, but this is how you can use this style of easing equation.