Hi again! Cam me somebody answer bout group object in WADE.
Let's digress.I quite often done web sites and modal windows "ate a dog".
Modal is very simple in DOM - some <div/> with some class(or id or another attribte as how somebody want)
Smooth effect of modal is simple:
.modal {
top: 50%;
margin: 0 auto;
opacity:0;
transform: translateY(-50%) translateX(0px) scaleX(0) scaleY(0);
transition: all .3s ease-out;
}
.modal.open {
opacity:1;
transform: translateY(-50%) translateX(0px) scaleX(1) scaleY(1);
}
In example - modal expanding from center, and delete class .open give an opposite effect.
Ok. try this in WADE. I want do a modal . It contain 2 sprites thing - modal ant close "button".
I create a oblect (whitch be a container). In container i add a "button". As write here http://clockworkchilli.com/snippets/multiple_sprites.html
Then i recreate all transform in a path:
- like easing expand with gain opacity from 0 to 1.
- translate in css i change on x and y
BUT how create Path for "scale"? is there an analogue for the group of sprites?
CSS transform applies to all elements in modal div,
BUT how i see PATH transforms every element in multiplesprite separately. And i see how separately gain button and gain container
Then - how create a smotth animation? Only creating new PATH?
I see only rotateTo and moveTo methods for SceneObjects - how i can in example do scale, skew and more transforms? In PATH - too only x,y,opacity
And if we add a textsprite to object - it create a error!
Uncaught TypeError: sceneObject.getSprite(...).setSize is not a function
in path.js here:
var size = this._evaluateProperty('size', interpolationFunction, timeFraction, nodeA, nodeB);
for (var j=0; j<sceneObject.getSpriteCount(); j++)
{
sceneObject.getSprite(j).setSize(size.x, size.y);
}
}
How group 2 or more objects for group transforms?
i try as:
var modal = wade.getSceneObject('modal');
obj = modal.getSprite();
modal.setPath("Path_0",0,1);//for opacity
var key = .05;
setTimeout(function run() {
key+=.05;
wade.setLayerTransform(12,1-key,0);
if (key<1){
setTimeout(run, 10);
}
}, 10);
It work as desired when only if wade.getCameraPosition().z has big values..
I totally dont understand how transform groups