Comments (6)
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
- don't animate it, pull the value from state or props for instance
const { flag } = this.state
return <path d={`${animatedValue} ... ${flag}`} />
- 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}`)} />
- or, use immediate:
<Spring to={{ animatedValue: 1, flag: 1, ... }} immediate={['flag']}>
from react-spring.
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.
from react-spring.
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.
from react-spring.
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
from react-spring.
@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.
from react-spring.
gotcha, thank you for taking a look.
from react-spring.
Related Issues (20)
- [bug]: Swipe card on X axis will cause window to scroll when Youtube iframe is playing HOT 3
- [bug]: createInterpolate deprecation warning results in app crash with IE11 HOT 1
- [bug]: Event Handlers not getting called in StrictMode HOT 1
- [bug]: Immediate does not work when to is an array
- [bug]: Promise returned by Controller.start is not resolved consistently
- [bug]: When included in a module, react-spring resolves to the string "/static/media/react-spring_web.development.34d7028f586cc8ee5e8e.cjs" HOT 2
- why require('react-spring') returns string instead of object HOT 1
- [bug]: @react-spring/konva + typescript HOT 3
- [bug]: Noise demo page - CodeSandbox still using 9.5.5 version
- [feat]: Integration of Tailwind CSS with React Spring for Declarative and Styled Animations
- [bug]: Wrong source-maps
- [bug]: ./node_modules/@react-spring/shared/dist/react-spring_shared.legacy-esm.js 1023:7 HOT 3
- [bug]: update transform
- [bug]: react-spring Identifier 'React' has already been declared HOT 3
- [bug]: Incorrect tooltips in useTransition docs HOT 1
- [bug]: React-Spring.dev main website down HOT 1
- [bug]: useResize is jumpy
- [bug]: The leave option in config object behaves inconsistently when using useTransition HOT 1
- [bug]: Website with docs not working in chrome (120.0.6099.72) HOT 3
- [bug]: Documentation website is broken after the first visit on most desktop browser HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spring.