search

zcanter / aframe-gradient-sky

A-Frame gradient sky component
MIT License
25 stars 4 forks source link

animation #3

Closed brodavi closed 7 years ago

brodavi commented 7 years ago

I have tried using <a-animation> as well as https://www.npmjs.com/package/aframe-animation-component to animate the topColor and bottomColor attributes, without success. The attribute gets set by the from attribute in the animation element/component, but doesn't change.

zcanter commented 7 years ago

Yeah I am ultimately a designer who codes what he can, but I'll take a look at it. I have to update the documentation, but in order to change the color after the element is build you need to add this:

material="shader: gradient; topColor: x x x; bottomColor: x x x"

Like I said though I am really not very experienced with Node or NPM but I appreciate you letting me know these issues. I will work on them tonight. Feel free to give it a shot and give me a pull request if you figure it out.

zcanter commented 7 years ago

Okay so upon further research and testing it appears this issue is due to the <a-animation> component. The A-Frame team is considering deprecating it all together: https://github.com/aframevr/aframe/issues/1927.

I will work on a color animation fix. I also invite anyone who has any ideas on this to give it a go!

zcanter commented 7 years ago

Okay solved it:

You do need to use aframe-animation-component.

The code to animate could then look something like this:

<a-gradient-sky material="shader: gradient; topColor: 255 0 0; bottomColor: 0 121 255;" animation="property: material.topColor; dur: 1000; to: 0 244 0"";></a-gradient-sky>

brodavi commented 7 years ago

Awesome thanks! :)