Comments (8)
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.
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.
Can you give me a use case where you would need to work with a matrix?
from tram.
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.
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.
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.
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.
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)
- Bad selectors throw a fatal error HOT 2
- Support SVG dash offset
- Add failsafe for rAF bug in iOS Chrome HOT 1
- Getting an undefined on `wait()` HOT 3
- Make it possible to chain tram onto jquery HOT 2
- Allow set() to apply "auto" HOT 6
- Support chaining with wait() HOT 3
- GPU layering approach info? HOT 2
- Git rid of Makefile?
- jQuery Collections Ignore 'Then' HOT 1
- Warning: No active transition timer HOT 5
- Call then() after something has had stop() called HOT 6
- Support for IE HOT 2
- The transform example did not work on Chrome Version 34.0.1847.137 m HOT 4
- Project still maintained? HOT 1
- Feature idea: specify time using number only HOT 2
- Support CSS filters
- Test `display: none` + set() + start()
- Fix unit tracking in transform properties
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tram.