Coder Social home page Coder Social logo

Matrix transform support? about tram HOT 8 CLOSED

bkwld avatar bkwld commented on July 3, 2024
Matrix transform support?

from tram.

Comments (8)

danro avatar danro commented on July 3, 2024

I could be mistaken, but reversing + correctly parsing a transformation matrix seems like the opposite of trivial.. and would require a bunch of extra code.

In regards to the .get() method, I was thinking it would return the current internal transform property like get('x') or y, scale, etc- since tram tracks these values internally.

from tram.

FossPrime avatar FossPrime commented on July 3, 2024

How would Tram's internal values help when the animation is stopped midframe?

getting point values is quite trivial... the main issue would be the design...tram(el).addMatrix(...)?

matrixTo3dPoints = function(matrix) {
    var result = {
                x   : matrix[12],
                y   : matrix[13],
                z   : matrix[15],
                sx  : matrix[0],
                sy  : matrix[5],
                sz  : matrix[10]
            };

    return result;
}

to parse I use

parseMatrixStr = function(matrix_str){
    var m;

    if (matrix_str == "none") {
        return  [   1,  0,  0,  0,
                    0,  1,  0,  0,
                    0,  0,  1,  0,
                    0,  0,  0,  1   ];
    } else if ( matrix_str.indexOf( "matrix(" ) == 0 ) {
        m = matrix_str.replace(/^\w+\(/,"[").replace(/\)$/,"]");
        m = JSON.parse(m);
        m = [   m[0],   m[1],   0   ,   0   ,
                m[2],   m[3],   0   ,   0   ,
                0   ,   0   ,   1   ,   0   ,
                m[4],   m[5],   0   ,   1   ];
        return m;
    } else if ( matrix_str.indexOf( "matrix3d(" ) == 0 ) {
        m = matrix_str.replace(/^\w+\(/,"[").replace(/\)$/,"]");
        m = JSON.parse(m);
        return m;
    } else {
        throw "FATAL error, unknow matrix format.";
    }
};

Granted, I have intentionally avoided skews.

from tram.

danro avatar danro commented on July 3, 2024

Can you give me a use case where you would need to work with a matrix?

from tram.

FossPrime avatar FossPrime commented on July 3, 2024

I can't make a fiddle currently... so here goes nothing:

Say you are animating a popup menu, you want the menu to swoop open and closed. You want the user to be able to drag it back and forth. You want the user to be able to stop it in the middle of a swoop with their finger.

That would require getting the value of the current X and Z translate at every point when the user stops the animation. The browsers all return matrixes... the way to do it is to get the matrix and modify it. It could be simplified if the tram().get(x) and get(z) used the matrix from the browser, but setting a dual value animation on the same transform property is not trivial/impossible with the current system... Not so if we could apply a matrix to animate to.

from tram.

danro avatar danro commented on July 3, 2024

I think I see what you mean. However, tram is primarily focused on transition-based animations. Transitions are great for animations that have a clearly defined start and finish, but not so much for animations with constantly changing values. I wouldn't recommend using a CSS transition to animate something on mousemove or touchmove.

Instead, it sounds like you might be better off building a custom frame-based animation. Here's an example of how you could use tram.frame to calculate an eased value and apply it on each frame.

http://jsbin.com/AXuHiqEH/34/edit?js,output

from tram.

FossPrime avatar FossPrime commented on July 3, 2024

While I agree that running tram.set() on renderAnimationFrame is not efficient, once the finger is of the screen and the close/open state is animated to, it would seem unorthodox to have to change the modus operandi needlessly.

I am looking at my options.

P.S. Found transit... they implement get('transform') as a matrix, making it an all in one solution to my woes. They shy away from parsing however, that's still up to me.

from tram.

danro avatar danro commented on July 3, 2024

Yea, I've intentionally steered clear of parsing the transform matrix because of the difficulty (or even feasibility) of correctly unrolling the values in the reverse order. If you come up with any brilliant solutions for this though, I'd love to see it!

from tram.

FossPrime avatar FossPrime commented on July 3, 2024

I think it's possible to make an tram.add() that uses matrix transforms... it would be relatively challenging. On the other hand, I don't see why we cant tram.add a matrix, for those of us who can. P.S. congrats on the awesome library... it is truly unchallenged, but has room for improvement.

from tram.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.