I have a scene with an isometric room with a table near the door. When the animation starts, if I click on the table, it nicely moves by the window. If I click again, it returns to the original position near the door. The following functions do the work:
function getPosition(elementName) {
** var computedStyle = getComputedStyle(elementName.dom, null);**
** return computedStyle;** }
onMouseClick event:
function moveTable(doc, e) {
** var table = doc.getElement(“table”);**
** var pos = getPosition(table);**
I would like the table could rotate 90deg on the right (horizontally mirrored) when it is positioned by the window. To get the rotation, I was thinking to apply xScale = -100%. However, I don’t know how it can be implemented in javascript inside the above moveTable function. I followed code instruction found here and there on the Internet, but none of them worked. Is there anyone that can help me, please?
To set Scale X, you can use table.setProperty('scaleX', -100);
However, it’s more simple to use an additional timeline to move the table from the door to the window and mirror it.
You just need to add script to check if the table is near the window or the door to run the timeline in the suitable direction.
function onTableClicked(doc, e) {
// init initial state (near the door)
if (this.nearDoor === undefined) {
this.nearDoor = true;
}
var timeline = doc.getTimeline('Timeline_1');
// if near door: run timeline forward to the window
// if near window: run timeline backward to the door
timeline.start(1 /*speed*/, !this.nearDoor /*direction: true backward, false forward*/);
// update position
this.nearDoor = !this.nearDoor;
}
I learned so much from your explanation. It was really illuminating.
Both solutions work well. However, the advantage of the second solution you suggested is certainly simpler, and it is not just the alternation of two fixed states (“table near the door” / “table near the window”), but it is a real animation of the table moving from one position to the other, with a better visual effect.
In the meanwhile, I had discovered an even more easy solution with two table objects fixed in their respective positions that show or hide themselves whenever you click on them. However, also in that case it was not an animation but the simple alternation of two fixed states.