Change duration of sublayer.show() - cartodb

When using sublayer.show() is there any way to set how long the transition takes? https://carto.com/docs/carto-engine/carto-js/api-methods/#layershow
Manually stepping down the opacity seems not to work give that .setOpacity() is not available for sublayers.
Thanks!
EDIT: I guess I could try adding css animations directly to the .leaflet-tile dom objs as well.


You can add a setTimeout to the event. In relation to the opacity issue, you can use setCartoCSS and change the opacity property of your layer. For instance, if you have a points layer, you will need to change the marker-opacity property.

Related

How three.js dealing with scene graph when we directly change parent property?

I saw Three.js Object3D.parent property is just a plain property (not a getter setter);
So when I change the property like object.parent = anotherObject,
How did Three.js manage its bi-direction dependencies parent-child then?
Is it allowed for doing that?
If not then why typedef still allows me to do so?

Why object3D is required to expose the parent property?
The reason is very simple I just didn't realised.
Basically Scene and Object3D is the setter of the Object3D.parent property, So it need to be public.
Three.js user must acknowledge that they can't directly change this property.
The only solution to hide the property out from typescript is using an interface.
For example IObject3D, But would increase a lot of complexity so obviously not worth do it.

Does the react-virtualized Masonry component support setting the scrollTop or scrollToIndex values?

I've implemented a Masonry layout that adjusts dynamically to the window size and it all works very well. I calculate its height and width and reset the cell measurements when any outside dimensions change.
I just need to be able to programmatically slide into view a specific item while it is being edited as well as scroll back to top programatically. Is this possible? I've tried to set scrollTop or scrollToIndex but it has no effect (unlike List). I have the feeling that I'm missing something obvious.

Thank you!
Unfortunately, the Masonry component does not currently support a scrollTop prop (other than a partial support required to work with WindowScroller). I would be willing to review a PR adding this functionality, but whether it landed would depend on the complexity. :)

Polymer #keyframes leak out

I have a simple Polymer app consisting of two elements. The first, x-app, element has the second element, x-inner, inside its local dom.
Inside the x-inner element I define a keyframe animation that is called spin that I apply on the :host. Inside the x-app I also apply the same animation name, spin, but the keyframe animation is not defined. Although, the spin animation works on both elements. It seems to me that the #keyframe leaks out from the inner element.
Is this the behaviour that is expected? Or do I define the #keyframe animation incorrectly?
Please see my jsbin for an example: jsbin

It is because you are using "Shady" DOM, which doen't really isolate the components CSS styles, as a real Shadow DOM would do.
Try defining shadow instead of shady and it will work.
jsbin example

Three.js within web worker: Simulating animation without rendering to canvas

I have a hypothetical question:
Is it possible to simulate an animation of objects without rendering it to the canvas. I just want to capture objects' position using Vector.project(camera) and present it using CSS. And THREE.DeviceOrientationControls controls how the camera "view" the simulation.
I tried commenting THREE.WebGLRenderer, but it seems that THREE.PerpectiveCamera cannot update it's MatrixWorld property. Hence, the camera seems to not move and the Vector.project(camera) gives a static value. I do this because I need to put my three.js codes within a web worker.
Do I need still need to use THREE.WebGLRenderer to have a working simulation?
UPDATE:
I checked the following:
I digged deeper into ((three.scene.getObjectByName("one")).matrixWorld.getPosition()).project(three.camera);, I inspect the following values, having the above requirement (inside web worker, no renderer), using this example:
matrix: {"elements":{"0":3.2167603969573975,"1":0,"2":0,"3":0,"4":0,"5":2.1445069313049316,"6":0,"7":0,"8":0,"9":0,"10":-1.000100016593933,"11":-1,"12":5.4684929847717285,"13":2.1445069313049316,"14":-0.2000100016593933,"15":0}}
camera.projectionMatrix: {"elements":{"0":3.2167603969573975,"1":0,"2":0,"3":0,"4":0,"5":2.1445069313049316,"6":0,"7":0,"8":0,"9":0,"10":-1.000100016593933,"11":-1,"12":0,"13":0,"14":-0.2000100016593933,"15":0}}
camera.matrixWorld: {"elements":{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-1.7000000476837158,"13":-1,"14":0,"15":1}}
matrix.getInverse(camera.matrixWorld): {"elements":{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":1.7000000476837158,"13":1,"14":0,"15":1}}
matrix.multiplyMatrices(camera.projectionMatrix, matrix.getInverse(camera.matrixWorld)): {"elements":{"0":3.2167603969573975,"1":0,"2":0,"3":0,"4":0,"5":2.1445069313049316,"6":0,"7":0,"8":0,"9":0,"10":-1.000100016593933,"11":-1,"12":5.4684929847717285,"13":2.1445069313049316,"14":-0.2000100016593933,"15":0}}
But, when normal (no modification), I inspect the following:
matrix: {"elements":{"0":3.2167603969573975,"1":0,"2":0,"3":0,"4":0,"5":2.1445069313049316,"6":0,"7":0,"8":0,"9":0,"10":-1.000100016593933,"11":-1,"12":5.4684929847717285,"13":2.1445069313049316,"14":-0.2000100016593933,"15":0}}
camera.projectionMatrix: {"elements":{"0":3.2167603969573975,"1":0,"2":0,"3":0,"4":0,"5":2.1445069313049316,"6":0,"7":0,"8":0,"9":0,"10":-1.000100016593933,"11":-1,"12":0,"13":0,"14":-0.2000100016593933,"15":0}}
camera.matrixWorld: {"elements":{"0":1,"1":0,"2":0,"3":0,"4":0,"5":-2.220446049250313e-16,"6":-1,"7":0,"8":0,"9":1,"10":-2.220446049250313e-16,"11":0,"12":-1.7000000476837158,"13":-1,"14":0,"15":1}}
matrix.getInverse(camera.matrixWorld): {"elements":{"0":1,"1":0,"2":0,"3":0,"4":0,"5":-2.220446049250313e-16,"6":1,"7":0,"8":0,"9":-1,"10":-2.220446049250313e-16,"11":0,"12":1.7000000476837158,"13":-2.220446049250313e-16,"14":1,"15":1}}
matrix.multiplyMatrices(camera.projectionMatrix, matrix.getInverse(camera.matrixWorld)): {"elements":{"0":3.2167603969573975,"1":0,"2":0,"3":0,"4":0,"5":-4.761761943205948e-16,"6":-1.000100016593933,"7":-1,"8":0,"9":-2.1445069313049316,"10":2.2206681307011713e-16,"11":2.220446049250313e-16,"12":5.4684929847717285,"13":-4.761761943205948e-16,"14":-1.2001099586486816,"15":-1}}
I noticed that the camera.matrixWorld property has significant difference in both condition. I do not understand what makes the difference.

Apparently, the following lines from THREE.WebGLRenderer.render are still needed to update camera.matrixWorld property:
scene.updateMatrixWorld();
camera.updateMatrixWorld();
camera.matrixWorldInverse.getInverse(vs._3.camera.matrixWorld);

Is a keyframed transition possible in Core Animation?

I know that keyframed transitions are possible in Core Animation via setting the path property on the CAAnimation instance. However, CATransition does not seem to have this functionality. Does anyone know any other ways to control the transition apart from setting the timing function?

The answer seems to be no. If you want to do this sort of thing, you have to add the CAAnimation yourself rather than depending on transitions. The transitions probably depend on some deep workings of CoreAnimation, because they don't work the same way normal animations do (they don't move the object in question, they control how the new content of the object replaces the old).

Resources