How to use tween x,y while maintaining degree of rotation?

124 views Asked by At

I have 2 cards which are both rotated at 23 degrees and I want to split them both side by side as illustrated in the image below. Currently I am using the following code to tween them according by their X axis but this doesn't work well if cards are in 23 or 90 degrees. How do I align them side by side using Tween engine?

Tween.to( card1, CardAccessor.POS_XY, 3f)
                .target( card1.getX()-75, card1.getY() )
                .ease(TweenEquations.easeInOutQuad)
                .start( tweenManager );

Tween.to( card2, CardAccessor.POS_XY, 3f)
                .target( card2.getX()+75, card2.getY() )
                .ease(TweenEquations.easeInOutQuad)
                .start( tweenManager );

My CardAccessor class is currently only capable of setting and getting XY pos like so:

public class CardAccessor implements TweenAccessor<Card> {

public static final int POS_XY = 1;

@Override
public int getValues( Card target, int tweenType, float[] returnValues) {
    switch (tweenType) {
        case POS_XY:
            returnValues[0] = target.getX();
            returnValues[1] = target.getY();
            return 2;
    }
}

@Override
public void setValues( Card target, int tweenType, float[] newValues) {
    switch (tweenType) {
        case POS_XY:
            target.setPosition(newValues[0], newValues[1]);
            break;
    }
}

enter image description here

1

There are 1 answers

4
Tom Young On
xr = x * sin(23);
yr = x * cos(23);