Altering Arc Animation Errors

[legodps]

In animating a change of path that involved an arc, it appears that the arc changing the large-arc flag from 0 to 1 or vice versa causes problems as the browser attempts to render decimal values:

Is there a way I can tell it to just flip from 0 to 1 at the halfway mark? Once it reaches 1 or 0 it renders fine, its just the transition.

react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…98 A 160 160 0 0.002050046856617…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…93 A 160 160 0 0.001723949084852…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…33 A 160 160 0 0.001479574213010…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…31 A 160 160 0 0.001231605338725…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…05 A 160 160 0 0.001046304425757…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…08 A 160 160 0 0.000879870421927…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…47 A 160 160 0 0.000628588289482…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…06 A 160 160 0 0.000534014347596…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…44 A 160 160 0 0.000377636839004…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…18 A 160 160 0 0.000317566739405…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…14 A 160 160 0 0.000264344238383…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…22 A 160 160 0 0.000222295428390…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…45 A 160 160 0 0.000192738596108…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…06 A 160 160 0 0.000160436614413…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…79 A 160 160 0 0.000134916217643…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…65 A 160 160 0 0.000114617426763…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…18 A 160 160 0 0.000094440800089…".

[drcmda]

Do i understand you right, you have a flag that toggles between 0 and 1 and you want to set it on something that animates, but without tweening?

If that's so ... either

1. don't animate it, pull the value from state or props for instance

const { flag } = this.state
return <path d={`${animatedValue} ... ${flag}`} />

2. or, interpolate

return <path d={`${animatedValue} ... ${flag > 0 ? 1 : 0}`} />

with native flag

import { Spring, animated, interpolate } from 'react-spring'
...
<Spring native to={{ animatedValue: 1, flag: 1, ... }} immediate={['flag']}>
    {({ animatedValue, flag }) =>
        <animated.path d={interpolate([animatedValue, flag],
            (animatedValue, flag) => `${animatedValue} ${flag > 0 ? 1 : 0}`)} />

3. or, use immediate:

<Spring to={{ animatedValue: 1, flag: 1, ... }} immediate={['flag']}>

[legodps]

the value itself is part of a path variable. It contains an arc segment. In arc segments, there are some values that are binary 0 or 1 flags. I need to include this in the definition of the path and by default it appears that the spring attempts to change from 0 to 1 by small percents.

[drcmda]

could you paste the line of code in which you're feeding the path and how the path comes to be, that would help me understand what's going on.

[legodps]

function getPathActive(origin, radius, start, end, arc= 0, mod, hoverStr) { const M = `M ${origin.x - (mod.x * (1 + hoverStr))} ${origin.y - (mod.y * (1 + hoverStr))}`; const L1 = `L ${start.x - (mod.x * hoverStr)} ${start.y - (mod.y * hoverStr)}`; const A = `A ${radius} ${radius} 0 ${arc} 1 ${end.x - (mod.x * hoverStr)} ${end.y - (mod.y * hoverStr)}`; const L2 = `L ${origin.x - (mod.x * (1 + hoverStr))} ${origin.y - (mod.y * (1 + hoverStr))}`; return `${M} ${L1} ${A} ${L2}`; }

This code generates the path string. The context is that I'm making a piechart generator to dynamically create slices based off of data I feed into the react component. The "origin" variable is the center of the circle, the "radius" variable is the radius of the pie chart, the "start" variable is the beginning point of the actual arc, the "end" variable is the end of the arc segment. The "arc" flag is for whether or not the arc is greater than 180 degrees or not. That's the meat of the problem, the "mod" variable is a small adjustment to the points that I use for visual purposes to move the slice out from the circle origin, and the "hoverStr" variable is a scalar for how much I want to move the slice out.

The issue comes in when I generate a new group of data to pass into the pie chart without redoing the keys, react-spring attempts to incrementally increment or decrement the "arc" variable, but since that is a flag in the path, decimal values aren't accepted, causing the arc to disappear until the animation ends if that arc flag changes. By contrast, if the data doesn't change such that this "arc" variable remains at 1 or 0, no animation issues occur.

Does that make sense? Let me know if you need any clarification

[drcmda]

@legodps If you build the path like this and pass it to the spring as a full string, then it won't be able to know if anything in it is supposed to be binary. It doesn't know what a SVG is, it just interpolates a pattern in which it detects numbers. You might have better luck with an actual svg interpolator like flubber or d3-interpolate. Here's an example: https://codesandbox.io/embed/lwpkp46om

Or, you provide the spring with all the moving pieces up front, then you can decide if variables animate or simply flip:

<Spring to={{ M, L1, A, L2 }} immediate={['A']}>
    {({ M, L1, A, L2}) => <path d={`${M} ${L1} ${A} ${L2}`} />}
</Spring>

Basically, just return an object in your getPathActive instead of a string and pass it into your spring.

[legodps]

gotcha, thank you for taking a look.