Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a transition animation when new data is passed into H3Hexagon layer #3665

Closed
DaveMitten opened this issue Sep 20, 2019 · 1 comment
Closed
Labels

Comments

@DaveMitten
Copy link

First time creating an issue, so bare with me and edits/questions to help reduce this to a refined question and let's get a result :)

Heres the layer rendering function:

	_layerRendering = () => {
		const newobj =
			this.state.locationData &&
			this.state.locationData.map(i => {
				return {
					longitude: i.longitude,
					latitude: i.latitude,
					price: i.year[this.state.year]
				};
			});
		return [
			new H3HexagonLayer({
				id: "h3-hexagon-layer",
				data: this.state.locationData && newobj,
				pickable: true,
				opacity: 0.15,
				wireframe: true,
				filled: true,
				extruded: true,
				elevationScale: this.state.elevationScale,
				coverage: 50,
				getHexagon: d => {
					let local = geoToH3(d.latitude, d.longitude, 12);
					return local;
				},
				getFillColor: [223, 25, 149], // fluorescent pink
				getElevation: d => this.state.locationData && Number(d.price / 500),
				//transitions: {
				//	getElevation: {
				//		duration: 3000,
				//		/easing: easeCubicInOut,
				//		enter: value => [value[0], value[1], value[2], 0]
				//	}
				//}
			})
		];
	};

It renders fine, it follows quite closely the example:
https://github.com/uber/deck.gl/blob/7.2-release/examples/website/3d-heatmap/app.js

Now you can see above, where I have tried to put a transition in. I don't understand enter. It's a brief explanation and has left me struggling to understand how to implement an animation.

My intended outcome is to have the current top of each hexagon to rise to the new data being set by the state. Then from here have a transition or animation that would use an easing to show an animation of the mark rising to the new top.

I hope that makes sense. I have seen it being done, but no access to the codebases or githubs to check out how to do it. I have a hacky way of doing it now, but i would like to follow deck gl as closely as i can get to the transitions.

With the link to the 3d-heatmap above, I have used the _animate from that code example to create an animation when the data layer is initially rendered. Then I reuse this code. It's hacky at best.

Any ideas?

@Pessimistress
Copy link
Collaborator

Closing for inactivity. enter will only receive a 1-dimensional value since it's for getElevation, see https://deck.gl/docs/api-reference/core/layer#transitions

Right now deck does not support key-based object matching when performing transitions. You can track this feature request in #2570

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants