Thanks for the great component!
I’m trying to implement some animation with my SVGs. I can’t get the built in library to work. I’ve been playing with react-motion and that kind of works, but the looping is messy and I don’t only want to do springs.
Any ideas?
Hey, no worries. I got it working by doing this:
Hello @DUBERT,
What is AnimatedImplementation?
Thanks!
No @Druux , I’m following the React Native animated syntax. Here is an example from my app:
(I pulled out a lot of excess code that isn’t related to the animation)
Disclaimer: I’m sure this isn’t the best way to do this. But it worked for me.
I set up my own interpolate function so that I could pass the two values into the render. I also used IDs because I had 20 different animations going.
Good luck. Don’t know if this will help you.
By setting a listener on the animation that calculates a new path and calls
this.pathComponent.setNativeProps({ d });
, some semblance of an animation can be had. ThePath
component does not need to be wrapped inAnimated
.@edo1493, I figured out how to make animations work. The process of generating the intermediate paths is called tweening and there is actually a library that lets you do it given two paths: art (https://www.npmjs.com/package/art).
I adapted the code from this demo: https://medium.com/the-react-native-log/animated-charts-in-react-native-using-d3-and-art-21cd9ccf6c58
See: http://ix.io/tgW/javascript
Hey All, I just wanted to follow up from my comment before.
I did a bit more tinkering and found a very workable solution using
addListener
andsetNativeProps
. A little messy but works none-the-less and is quite performant.Here’s a simplified version of the solution:
And the resulting animation:
And this is being rendered on a very complex component where using
setState
isn’t fluid at all.Hey guys, I managed to figure out how to animate almost every component and their props with setNativeProps. The key is to format the value correctly and I had to look at the code in https://github.com/react-native-community/react-native-svg/tree/master/lib/extract to get it right. All of the transform props had to be converted into a matrix for example. For path data, I used D3 to create paths and interpolate paths. You can see it in action at https://exp.host/@ethantran2/react-native-examples and find the messy but good enough code at https://github.com/ethantran/react-native-examples