Simple animation, like css transition

wizzardo · May 4, 2018, 11:42am

Hey, I’ve tried to google but didn’t really find any simple example for basic animation like moving object from A to B with easing. Is there any way to do it with jme?

ia97lies · May 4, 2018, 12:10pm

Unfortunately the wiki currently is responding with 404 not found, but I think you are looking for Cinematics jmonkeyengine/Cinematic.java at master · jMonkeyEngine/jmonkeyengine · GitHub

jayfella · May 4, 2018, 12:23pm

There’s a scenegraph for dummies link in the header, too. Excuse the name, it’s just a quick recite of the scene graph.

wizzardo · May 4, 2018, 12:23pm

I saw somebody also referred to Cinematics, but I cannot find any method to set custom easing function, for example one from https://easings.net/

jayfella · May 4, 2018, 12:25pm

Using lemur for quite a few things may help here. It is technically a GUI library, but it’s actually more of an engine extension tbh.

I have linked you to animation tweens.

wizzardo · May 4, 2018, 12:45pm

Thanks, I will take a look

pspeed · May 4, 2018, 2:04pm

Here was a thread on Lemur animation when I first put it in… it works for 2D and 3D stuff.

I guess I never made an actual demo for it but I should:

wizzardo · May 5, 2018, 6:01pm

Ok, I didn’t find what i wanted, so I spent some time and prepared this small library, maybe someone will find it useful GitHub - wizzardo/jme-transition: Small library for smooth transitions in jME
any contribution is welcome =)

example

pspeed · May 5, 2018, 9:18pm

Weird… because Lemur’s animation system would have done exactly this.

wizzardo · May 5, 2018, 10:02pm

I don’t see a way to set custom easing curve in Lemur’s animations, and it looks not so easy to extend

pspeed · May 5, 2018, 10:24pm

Built in easy:

github.com

jMonkeyEngine-Contributions/Lemur/blob/master/src/main/java/com/simsilica/lemur/anim/Tweens.java#L114


    }
    return new Curve(sequence(delegates), SINE);           
}

/**
 *  Creates a tween that uses a hermite function to smooth step the time value 
 *  for the specified delegate tween or tweens.  This is similar to GLSL's
 *  smoothstep().  These 'curved' wrappers can be used to smooth the interpolation 
 *  of another tween.  
 */   
public static Tween smoothStep( Tween... delegates ) {
    if( delegates.length == 1 ) {
        return new Curve(delegates[0], SMOOTH);
    }
    return new Curve(sequence(delegates), SMOOTH);
}
 
/**
 *  Creates a Tween that will call the specified method and optional arguments
 *  whenever supplied a time value greater than or equal to 0.  This creates
 *  an "instant" tween of length 0.

Or you can just implement the Tween interface to provide your own.

github.com

jMonkeyEngine-Contributions/Lemur/blob/master/src/main/java/com/simsilica/lemur/anim/Tween.java#L47


package com.simsilica.lemur.anim;


/**
 *  Represents some action that interpolates across input between 0
 *  and some length value.  (For example, movement, rotation, fading.)
 *  It's also possible to have zero length 'instant' tweens. 
 *
 *  @author    Paul Speed
 */
public interface Tween {

    /**
     *  Returns the length of the tween.  If 't' represents time in
     *  seconds then this is the notional time in seconds that the tween
     *  will run.  Note: all of the caveats are because tweens may be 
     *  externally scaled in such a way that 't' no longer represents
     *  actual time.
     */
    public double getLength();

And you can even look at the existing ones to see how they work, starting here:

github.com

jMonkeyEngine-Contributions/Lemur/blob/master/src/main/java/com/simsilica/lemur/anim/Tweens.java#L160


private static interface CurveFunction {
    public double curve( double input );
}
 
/**
 *  Curve function for Hermite interpolation ala GLSL smoothstep().
 */   
private static class SmoothStep implements CurveFunction {

    @Override
    public double curve( double t ) {
        if( t < 0 ) {
            return 0;               
        } else if( t > 1 ) {
            return 1;
        }
        return t * t * (3 - 2 * t);
    }
}

private static class Sine implements CurveFunction {

…though if I used smooth step it would look very much like what you have.

wizzardo · May 5, 2018, 11:07pm

Two built-in ease functions are not enough, I implemented all the curves from https://easings.net and it’s very easy to add more. Tween interface is too high-level, and If I use it I will need to implement interpolation and easing

pspeed · May 6, 2018, 1:06am

Yes, well it’s easy to write more.

It seems like your easing function is the same as the CurveFunction I referenced earlier… so I don’t really know what you are talking about:
public interface EasingFunction {
float ease(float progress);

==
private static interface CurveFunction {
public double curve( double input );

Cutting and pasting the private Curve tween was all that was needed (and it’s only an oversight on my part that it’s not already public).

But I’m glad you got your custom approach working. It seems more limited in its application as compared to Lemur but you probably didn’t need to easy “everything” like Lemur is able to do.