bodymovin / lottie-api

A library to edit lottie-web animations dynamically
MIT License
180 stars 38 forks source link

addValueCallback to a 'slider value' on a NullObject. #6

Closed ReneBrainstud closed 5 years ago

ReneBrainstud commented 5 years ago

Hi there,

Just discovered the web-API and it works fine on all the transformation properties of a layer. But i can't seem to get it to work with Slider Effects on a NullObject. What im trying to achieve is a dynamic animation, where a slider value controls the length of a bar-graph and text representing the value. All the animations are done (and linked to the slider) in AE, and all i need to change is the value of the slider to control the animation. But is can't seem to get it to work on any other property outside transform.

I found documentation about dynamic properties on Android: https://airbnb.io/lottie/android/dynamic.html And assuming its the same for web, it doesn't say other variables are supported. (in my case the null object containing a slider control)

Are there any plans on upgrading the API so more properties are supported? Or am i missing something and can i achieve my goal in any other way with the API that i don't know of.

I've been trying the old way of directly changing the value without the API, but i can't seem to get that working anymore :( anim.animationData.layers[0].ef[0].ef[0].v.k[0].s[0]

Are there any great minds out there who can push me in the right direction? Thanks in advance!

bodymovin commented 5 years ago

Hi, how are you creating the path to the effect property? perhaps this can help as a reference: https://codepen.io/airnan/pen/43303c12e643556da82e89d07491df2c check line 47 for example.

ReneBrainstud commented 5 years ago

Your respond time is insanely fast! haha I checked your reference and im on the right track. the way i create my path is as follows:

var scaleProperty = animationAPI.getKeyPath('red_solid,Transform,Scale'); animationAPI.addValueCallback(scaleProperty, function(currentValue) { return [100,monthlyNewUsers]; });

So this works because it's on the scale property. But in the following example i try to link to my slider control. Where ''dataInput'' is the name of my AE layer, and "gebruikersTotaal" is the name of my slider.

var sliderValue = animationAPI.getKeyPath('dataInput,Effects,gebruikersTotaal'); animationAPI.addValueCallback(sliderValue, function(currentValue) { return monthlyNewUsers; });

This doesn't seem to work, but seems to be the same as in your reference on line 47.

bodymovin commented 5 years ago

do you have a link I can check? if not, can you share the .aep?

ReneBrainstud commented 5 years ago

I got it working when i was tidying things up for you! Turned out i needed to add the index of the slider after the name of the slider in the path reference.

var sliderProperty = animationAPI.getKeyPath('dataInput,Effects,gebruikersTotaal,0'); animationAPI.addValueCallback(sliderProperty, function(currentValue) { return monthlyNewUsers; });

Thanks for your help and fast responses.

bodymovin commented 5 years ago

great. Glad it works.