Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Need to smooth the animation for path Svg #1398

Closed
jawwad22 opened this issue Jun 15, 2020 · 3 comments
Closed

Need to smooth the animation for path Svg #1398

jawwad22 opened this issue Jun 15, 2020 · 3 comments
Labels

Comments

@jawwad22
Copy link

Hi, i created a responsive rectangle path svg, and implement it in svgPath with animation, i am able to do the animation like my rectangle created perfectly but i am unable to do it smoothly, what should i do

here is my code
const [plateAnimate] = useState(new Animated.Value(0));

plateAnimate.setValue(DataStore.getState().general.currentSecMin.sec);

const withCheckPath = `
					M${Size.widthInP(50.1)} ${Size.heightInP(1.88)}
					H${Size.widthInP(88.1)}
					Q${Size.widthInP(94.3)} ${Size.heightInP(2.2)}
					${Size.widthInP(94.8)} ${Size.heightInP(5.7)}
					V${Size.heightInP(17.4)}
					Q${Size.widthInP(93.7)} ${Size.heightInP(20.6)}
					${Size.widthInP(88.2)} ${Size.heightInP(20.7)}
					H${Size.widthInP(12.8)}
					Q${Size.widthInP(7.2)} ${Size.heightInP(20.1)}
					${Size.widthInP(6.5)} ${Size.heightInP(17.5)}
					V${Size.heightInP(5.7)}
					Q${Size.widthInP(6.9)} ${Size.heightInP(2.5)}
					${Size.widthInP(13)} ${Size.heightInP(1.88)}
					 H${Size.widthInP(50)}
	`;

<AnimatedSvg height={Size.heightInP(22)} width={Size.widthInP(100)} style={{ right: 2.5 }}>
						<AnimatedPath
							d={withCheckPath}
							strokeWidth={2}
							fill="none"
							stroke={isDarkBlue ? "#2A9DFF" : "#B3D6FF"}
							strokeDasharray={867}
							strokeDashoffset={
								plateAnimate.interpolate({
									inputRange: [0, 59],
									outputRange: [0, -867],
									extrapolate: "clamp",

								})
							}
						/>
					</AnimatedSvg>

I hope you understad the code and i am asking the right place

@stale
Copy link

stale bot commented Aug 15, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

@stale stale bot added the stale label Aug 15, 2020
@WoLewicki
Copy link
Member

Could you provide a repo with a simple reproduction of the issue and more descriptive comment of what you are trying to achieve exactly? It is hard to say anything without it.

@bohdanprog
Copy link
Member

Hello @jawwad22,
If you are still experiencing the issue, please feel free to open a new issue with a simple reproduction of the problem. Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants