Jump to content
Search Community

obj chain ease ?

jonForum test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

hi it possible to use chaining function ease instead of property ?

What a read it that 

TweenLite.to(obj, 2, {pixi:{pivotX:x, pivotY:y},ease:Power2.easeOut});

 

but i look for a way to write the easing like this, with chaining ?  I took this habit on an old Easing library.

TweenLite.to(obj, 2, { pixi:{pivotX:x, pivotY:y} } ).ease(Power2.easeOut);

 

Existe a way to write ease more eyes friendly ? thank
Am new from some minute ago , so am studying this library:)

image.thumb.png.c1e5ac168d3887b39af25c6bdbd47953.png

 

Link to comment
Share on other sites

Hey @jonForum

 

Unfortunately no. You can chain certain methods but can't do something similar for easing. Your best way would be write your properties per line, far easy to read or comment out.

 

TweenLite.to(obj, 2, { 
  pixi: { 
    pivotX: x, 
    pivotY: y 
  }, 
  ease: Power2.easeOut 
});

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

thank a lot @Sahil

// ┌------------------------------------------------------------------------------┐
// GLOBAL $$cam CLASS: _camera_
//└------------------------------------------------------------------------------┘
class _camera_{
    constructor() {
        this.tiker = null; //pixi tiker if need
        this.tween = null; // tween stored each time scene reset
    };
};
$$cam = new _camera_();
console.log9('$$cam: ', $$cam);

// $$cam.initialise(); 
_camera_.prototype.initialise = function() {
    // initialise setup the tween each time scene reset (store the new tileMap)
    this.tween = new TweenLite(SceneManager._scene._spriteset._tilemap, 0, {
        pixi:{pivotX:0, pivotY:0},
        ease: Elastic.easeOut.config(1, 0.3),
    });
};

// $$cam.move(40,10,2);
_camera_.prototype.move = function(x,y, dur) {
    if(!this.tween){this.initialise()};
    this.tween.vars.pivotX = x;
    this.tween.vars.pivotY = y;
    this.tween._duration = dur;
    this.tween.play();
    console.log('this.tween: ', this.tween);
  

};

 

i have another noob question.
For performance reasons, I want to setup a new instance of tween each time the scene is created with the new target map.
In this example of how to initialize the tween, how can I set it up correctly?

So if i call 

$$cam.move(40,10,2);

the play() seem to do nothing, do i  have a mistake?
Do you have a recommended tutorial or thread based on this kind of use ?
 

    this.tween.vars.pivotX = x;
    this.tween.vars.pivotY = y;
    this.tween._duration = dur;
    this.tween.play();

this should do the jobs no ? 

Link to comment
Share on other sites

That's pretty unique approach I have seen for the first time. I don't see any issue with it except the play part. I will try to explain.

 

When you tween something GSAP records the start and end values to optimize performance plus that's what tween engines do I guess. So when you play the Tween GSAP will record the values and and if you play that tween again it will repeat the same animation. Which you can see in following example. If you click again on window you will see that GSAP is repeating same animation, instead of taking into account new value.

 

 

 

See the Pen RyLgJq?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

You will also notice that I am passing 0 as argument to the play method, if you remove that you will notice that after first run animation won't repeat. That's because playhead of animation is already at the end so there is nothing to play further.

 

So to get around it you will need to invalidate your tween which will cause GSAP to record new values and your animation can move to new location.

 

See the Pen gzGRdy?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

Though you will still need to pass the zero because even though you invalidated the tween the playhead is at the end. Does that help?

 

I am just getting started with PIXI but this seems like an interesting thread so feel free to ask any questions. @OSUblake will join the conversation once he gets online.

 

Also, most of the resources are targeted towards web developers so I don't think you will find a lot of useful tutorials for you. But if it helps you can visit the YouTube channel: https://www.youtube.com/user/GreenSockLearning

 

There is also learning page link at the top of menu but I doubt you will find a lot of help there, so feel free to post your questions.

  • Like 4
Link to comment
Share on other sites

@Sahil

hope you will fine with copy forking your codepen.
I have a question about merge or sequential animation.
Am not sure if it called like that.
I look for a way to compute a break direction for the path with easing.


example if you click on square ,(square in my context represent Camera)
And click again before the end of the path for change the square direction.


The camera changes direction too dry! (break hard )!
In fact I would like to simulate a little physics when I want to change the value of the path.
Do you have native way with easing , to compute the hold and new direction simulatinous. (physic based on value) ?

 

See the Pen vjeepx?editors=0010 by djmisterjon (@djmisterjon) on CodePen

In fact i have coded my how camera befor in pure js for my tool (pixi Editor)
dammit-me for not having found this super library, 4 months before!!!

In the context you can see in action here my camera.
Am re-code it with GSAP for now , and am look for a way to break direction with easing.
 

look at 0:04 sec

https://youtu.be/MpZD0E0_iKI

 

it giving something like this

let ScrollX = 0, ScrollY = 0; // scroll increase Ease
let ScrollF = 0.1; // _displayXY power for scroll map
let scrollSpeed = 20; // speed for map scrool

    const editorTiker = new PIXI.ticker.Ticker().add((delta) => {
        if(scrollAllowed){
            let scrolled = false;
            (mX<10 && (ScrollX-=ScrollF) || mX>Scene_W-10 && (ScrollX+=ScrollF)) && (scrolled=true);
            (mY<15 && (ScrollY-=ScrollF) || mY>Scene_H-15 && (ScrollY+=ScrollF)) && (scrolled=true);
            scrolled && (ScrollF+=0.4) || (ScrollF=0.1) ;
        }
        TilesMap.pivot.x+=(ScrollX-TilesMap.pivot.x)/scrollSpeed;
        TilesMap.pivot.y+=(ScrollY-TilesMap.pivot.y)/scrollSpeed;
    });

 

Hope you understand my sad english :)
tell me if you not understand.

Link to comment
Share on other sites

I had a difficult time understanding your post, but you might want to look into ThrowPropsPlugin: 

https://greensock.com/docs/Plugins/ThrowPropsPlugin

 

It allows you to track the moment-to-moment velocity of ANY property and seamlessly transition to another value. We use it in Draggable for momentum-based physics, but it can be used for almost any property. 

 

Good luck with the project. 

  • Like 1
Link to comment
Share on other sites

@jonForum No problem at all.

 

I gave it a try using ThrowPropsPlugin, see if it helps.

 

See the Pen JvrZyd?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

I also tried to ease it in a way where object will slow down before animating reverse but I doubt that will be possible, maybe Blake can suggest something.

 

Also, try avoiding easeIn and easeInOut because they behave very unexpectedly.  @GreenSock can explain why that happens.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

18 hours ago, Sahil said:

Also, try avoiding easeIn and easeInOut because they behave very unexpectedly.  @GreenSock can explain why that happens.

 

Yep, the docs say "always use some sort of easeOut" because that's the only kind that makes any logical sense in this context. It'd probably help if I explain [roughly] how ThrowProps does its magic for matching the initial velocity and getting natural momentum-continuation...

 

Let's say you've got something moving at 100 pixels per second and you release it. The very first part of the resulting tween (the one that's going to continue the movement) must match that momentum, so it figures out where the value would be when the tween is about 5% into its progress. If you released when x is 200px, it'd mean that x should be at 205px 5% into the tween in order to match the momentum (roughly). If you use an easeIn ease, that starts out very slowly, and then speeds up (which is totally counter-intuitive in a momentum-continuation context), thus it would be forced to make that values HUGE to compensate. Like, if 5% into the tween it should be at 205px, it'd have to make the end value a crazy high value (maybe over 10,000px) just to get things to match up on that initial velocity. 

 

See the problem? 

 

easeIn's don't make any intuitive sense for momentum continuation. Humans expect momentum to slow down after release, not speed up really fast and then slow down. 

 

Hopefully my explanation made at least a little bit of sense despite me being sleep-deprived ;) Let me know if it's still fuzzy and I'll give it another shot. 

 

 

  • Like 3
Link to comment
Share on other sites

19 hours ago, Sahil said:

@jonForum No problem at all.

 

I gave it a try using ThrowPropsPlugin, see if it helps.

I also tried to ease it in a way where object will slow down before animating reverse but I doubt that will be possible, maybe Blake can suggest something.

 

Also, try avoiding easeIn and easeInOut because they behave very unexpectedly.  @GreenSock can explain why that happens.

 

There is so much great demo everywhere!, I think I ask my question too early.
I will take some days to study all your API and experimente.
I discovered through your demo and other interesting diferente techniques.
I will come back to you when I will have a better knowledge base.

Also thank a lot for the demo it help me a lot to understand, and ya easing inOut not work very good , it not same result from AE and spine2d.
I think the real solution are inside basic math algorithms in interpretation.

Also a another question:
Am the only one? that shocks!!! that everybody use the method TweenMax.to

If we take a look in the source code , this call and create a new huge constructor 'class' each time.
Also people use it inside updates, loop and listener!!!


Is it not ? more logical for the performances to initiate one time only this class ?, and then modify these parameters with a scope.
He does not mention it at all in the docs, and seems to propose this way only.
It not very performance friendly ? no.

 

image.thumb.png.e5748f6cb11d829b2b444274a4ac283c.png

 

I understand for webDesigner, maybe ..

 

thanks

Link to comment
Share on other sites

Quote

Am the only one? that shocks!!! that everybody use the method TweenMax.to

 

You can use TweenLite PixiPlugin as you don't really need all other plugins bundled within TweenMax. TweenMax also has some additional methods like stagger tweens, killAll, pauseAll, globalTimeScale etc so if you don't need them you can use TweenLite only. . There is of course less code to execute in TweenLite but you probably will never notice any difference.

 

 

Quote

Is it not ? more logical for the performances to initiate one time only this class ?, and then modify these parameters with a scope.

 

You mean initilize TweenMax just once? Performance has always been main focus of GSAP so I doubt @GreenSock will miss something obvious.

  • Like 1
Link to comment
Share on other sites

Quote

 

I have a question about merge or sequential animation.
Am not sure if it called like that.
I look for a way to compute a break direction for the path with easing.


example if you click on square ,(square in my context represent Camera)
And click again before the end of the path for change the square direction.


The camera changes direction too dry! (break hard )!
In fact I would like to simulate a little physics when I want to change the value of the path.

 

 

I'm not sure I'm understanding all this completely, but it seems like you are referring to blended or additive animation.

Check out the demo from @OSUblake below

 

 

 

See the Pen GpmPGy by osublake (@osublake) on CodePen

 

If you want to learn more about what he is doing there, and can afford to go down a rabbit hole for a few hours, check out the post below.

I'd recommend packing a light lunch  :-D

 

As for your performance concerns earlier, I can assure you that TweenMax.to() is not nearly as troublesome as you suspect. In fact everything is extremely optimized. I suspect GreenSock will provide some more specifics.

  • Like 5
Link to comment
Share on other sites

On 5/5/2018 at 5:22 PM, jonForum said:

The camera changes direction too dry! (break hard )!
In fact I would like to simulate a little physics when I want to change the value of the path.

 

A lot of camera animations are interpolated on every frame, similar to what I show in this thread for mouse movement.

 

 

 

See the Pen PEVyPv by osublake (@osublake) on CodePen

 

  • Like 3
Link to comment
Share on other sites

thank you, I think that for the moment I reached my objective, I still have some detail, but I am very close to what I want for the camera engine.

All your answers helped me a lot.

It still have to optimize, but I keep this for more later to avoid losing too much time on this module.

But it works as I wish now.

 

class _camera_{
    constructor() {
        this.position = null; // the map pivot
        this.scale  = null; // the map scale Zoom
        this.target = null; // player or event or point XY
        this.targetH = null; // need size of target because anchor are objsprite 0.5,1
        this.tweenP = null; // tween position
        this.tweenZ = null; // tween Zoom
        this._tmpZoom = 1; // store the targeted zoom 
        this._userZoom = 0; // when user use wheell for custom zoom
    };
    // get the sceen center from resolution TODO: Dynamic resolution from user options
    get cX() { return 1600/2/this._tmpZoom };
    get cY() { return 900/2/this._tmpZoom };
     // comput reel target position (center Screen target)
    get targetX() { return this.target._x-this.cX };
    get targetY() { return this.target._y-this.cY-this.targetH };
};
$$cam = new _camera_();


// when mouse was move check camera interaction
_camera_.prototype.onMouseMove = function(x,y){
    const ra = $$gamePlayer._zoneLimit; // player data allowed for zone limit
    const raX = x>1600 && ra || x<0 && -ra || NaN;
    const raY = y>900 && ra || y<0 && -ra || NaN;
    // player actived the limit
    const camX = this.tweenP.vars.x - this.targetX;
    const camY = this.tweenP.vars.y - this.targetY;
    const backH = 1600/3; // back value for horizon 
    const backV = 900/3; // back value for horizon 
    if(camX!==0){
        if(camX>0&&!raX&&x<(1600/2)-backH){
            return this.moveFromTarget( 0, NaN, !this.tweenZ._active && 6*this._tmpZoom || 3*this._tmpZoom );
        }else
        if(camX<0&&!raX&&x>(1600/2)+backH){
            return this.moveFromTarget( 0, NaN, !this.tweenZ._active && 6*this._tmpZoom || 3*this._tmpZoom );
        }
    };
    if(camY!==0){
        if(camY>0&&!raY&&y<(900/2)-backV){
            return this.moveFromTarget( NaN, 0, !this.tweenZ._active && 6*this._tmpZoom || 3*this._tmpZoom );
        }else
        if(camY<0&&!raY&&y>(900/2)+backV){
            return this.moveFromTarget( NaN, 0, !this.tweenZ._active && 6*this._tmpZoom || 3*this._tmpZoom );
        }
    };
    (raX || raY) && this.moveFromTarget( raX, raY, !this.tweenZ._active && 6*this._tmpZoom || 3*this._tmpZoom );
};



// $$cam.moveFromTarget(10,10,4); Move from target to new XY
_camera_.prototype.moveFromTarget = function(x,y,speed,ease) {
    isFinite(x) && (this.tweenP.vars.x = this.targetX+x);
    isFinite(y) && (this.tweenP.vars.y = this.targetY+y);
    speed && (this.tweenP._duration = speed);
    this.tweenP.invalidate();
    this.tweenP.play(0);
};

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...