Share Posted November 22, 2021 https://codesandbox.io/s/lingering-bird-wggrl Hey guys! I have a problem, I can not make smooth turns without jerking. This happens when the car approaches the bridge. I tried to smooth the svg path itself, but for some reason it turns out even worse. by using https://yqnn.github.io/svg-path-editor/ PathCars : M 2313.22 1939.62 c -132.3 -0.39 -245.6 -39.38 -250.35 -41.04 l -2.3 -0.8 l -118.57 -50.78 l -24.63 -14.71 c -118 -79 -195.57 -113.86 -260.37 -131.29 c -56.19 -11.24 -109.8 -23.43 -123.8 -30.43 l -16.41 -7.21 l -16.76 -9.71 l -139.04 -77.25 c -73.38 -40.07 -130.76 -86.57 -170.54 -138.19 c -38.74 -50.28 -61.47 -105.73 -67.55 -164.81 c -5.29 -51.4 2.21 -104.72 22.28 -158.49 c 14.89 -39.88 36.76 -80.1 65.01 -119.54 c 45.78 -63.92 93.09 -104.86 98.34 -109.32 l 2.08 -1.77 l 1.65 -1.24 c 2.17 -1.69 45.49 -35.71 94.8 -93.37 c 44.72 -52.3 104.01 -135.73 132.52 -236.2 c 20.59 -72.55 65.39 -134.53 133.15 -184.22 c 49.01 -35.93 110.15 -65.26 181.74 -87.16 c 100.09 -30.62 193.19 -38.25 221.78 -44.37 c 72.73 -12.48 136.3 -16.01 202.43 -9.78 c 55.07 5.19 108.88 16.95 159.92 34.97 c 67.53 23.83 113.29 52.7 133.31 66.75 c 16.29 7.63 46.63 23.36 80.12 48.25 c 64.92 48.27 112.72 109.48 138.22 177.02 c 18.4 48.73 25.55 100.85 21.25 154.9 c -4.65 58.4 -22.84 119.5 -54.08 181.6 c -65.48 130.2 -47.14 241.55 -25.9 370.48 c 10.66 64.7 21.68 131.6 21.4 202.27 c -0.33 84.07 -16.99 160.3 -50.95 233.06 c -20.42 43.77 -47.41 82.12 -80.21 114.01 c -29.97 29.14 -65.08 53.13 -104.33 71.32 C 2467.45 1925.06 2394.71 1939.62 2313.22 1939.62 z z The car twitches, how can I fix it? ( Link to comment Share on other sites More sharing options...
Share Posted November 22, 2021 Does using alignOrigin: [0.5, 0.5] on the motionPath help? Sometimes is just takes a little bit of trial and error to get it to look nice. Maybe the demo in this thread can help you out. He's doing something with race cars, and they seem to follow a pretty nice path. Link to comment Share on other sites More sharing options...
Author Share Posted November 22, 2021 42 minutes ago, OSUblake said: Does using alignOrigin: [0.5, 0.5] on the motionPath help? Sometimes is just takes a little bit of trial and error to get it to look nice. Maybe the demo in this thread can help you out. He's doing something with race cars, and they seem to follow a pretty nice path. Oops, I threw off the wrong sandbox (Updated post https://codesandbox.io/s/lingering-bird-wggrl Link to comment Share on other sites More sharing options...
Share Posted November 22, 2021 It looks like your path just needs some fine tuning. For a smoother curve, you need to make sure the anchor points form a straight line, kind of like this. Some SVG editors can automatically to do that for you, although I didn't see that option in the one you were using. Boxy SVG is another good one you can use online. If you double click a point, it should automatically make the curve smooth for you. https://boxy-svg.com/ I would also try to reduce the amount of points if possible. The less, the better. 2 Link to comment Share on other sites More sharing options...
Author Share Posted November 22, 2021 18 minutes ago, OSUblake said: It looks like your path just needs some fine tuning. For a smoother curve, you need to make sure the anchor points form a straight line, kind of like this. Some SVG editors can automatically to do that for you, although I didn't see that option in the one you were using. Boxy SVG is another good one you can use online. If you double click a point, it should automatically make the curve smooth for you. https://boxy-svg.com/ I would also try to reduce the amount of points if possible. The less, the better. Thank you, I will try to smooth the corners. If it doesn’t work out, I will write here) Quote I would also try to reduce the amount of points if possible. The less, the better. Didn't quite understand what you mean Link to comment Share on other sites More sharing options...
Share Posted November 22, 2021 20 minutes ago, JIZA said: Didn't quite understand what you mean Try to delete some of these points. You probably don't need that many. 1 1 Link to comment Share on other sites More sharing options...
Author Share Posted November 23, 2021 16 hours ago, OSUblake said: Try to delete some of these points. You probably don't need that many. not working for me( tried removing points and smoothing paths, ends up even worse Link to comment Share on other sites More sharing options...
Share Posted November 23, 2021 I've tested it out - if you set alignOrigin: [0.5, 0.5] It's a lot better, if your origin isn't at the center of your element you'll get larger movements as you hit corners. Don't try to offset the cars from the path - create the paths for the cars to move along exactly where you need them. Hope this helps! 1 1 Link to comment Share on other sites More sharing options...
Share Posted November 23, 2021 @OSUblake boxy svg looks really cool! Thx for sharing. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now