Comments (7)
@JonnyBurger Thank for sharing this solution. I will likely try it.
I noticed the exact same "issue" and fixed it outside the spring function. You can find an example at https://github.com/wcandillon/can-it-be-done-in-react-native/blob/master/tinder-swiping/components/Profiles.js.
I'm glad that we can share/improve these use cases together.
from react-native-reanimated.
Hey @wcandillon, idk its the convenient way but maybe you can try to put a condition which checks the clock
value is lessThan
something then you can call the function? Thanks a lot for those great videos btw.
from react-native-reanimated.
@enestufekci Does that mean that even though we don't see the object animate anymore, it still does? (but so slightly that we cannot see it? π€).
from react-native-reanimated.
@enestufekci Does that mean that even though we don't see the object animate anymore, it still does? (but so slightly that we cannot see it? π€).
Yes, and thatβs quite common thing with spring based animations.
There are two properties (restSpeedThreshold
& restDisplacementThreshold
) that allow you to define when your spring should be considered at rest.
Check this for description of those two.
from react-native-reanimated.
from react-native-reanimated.
I found that because of this behavior, if you have many interactions and the users does them in rapid succession, it can cause some flickery / unwanted behavior.
For example if you have a modal-like functionality and use springs to make the animation to open / close the modal, and you trigger the close action before the open animation has finished, there can be some weird bugs.
I have tweaked my runSpring
function that fixes the issues, although I might not fully understand why it's working.
function runSpring(clock, value, dest, otherClocks) {
const state = {
finished: new Value(0),
position: new Value(0),
time: new Value(0),
velocity: new Value(0)
};
const config = {
damping: 800,
mass: 0.5,
stiffness: 200,
overshootClamping: true,
restSpeedThreshold: 0.01,
restDisplacementThreshold: 0.01,
toValue: new Value(0)
};
return block([
cond(
or(...otherClocks.map(c => clockRunning(c))),
otherClocks.map(c => stopClock(c))
),
cond(clockRunning(clock), 0, [
set(state.finished, 0),
set(state.time, 0),
set(state.position, value),
set(config.toValue, dest),
startClock(clock)
]),
spring(clock, state, config),
set(value, state.position),
cond(state.finished, [
stopClock(clock),
set(state.finished, 0),
set(value, dest)
])
]);
}
What it does differently is
(1) as soon as the spring is considered at rest, set the value to the destination value (so from 0 -> 1, as soon as it reaches 0.999 and is considered resting, it changes to 1)
(2) it allows to pass an array of clocks that should be stopped before the animation is started. you can use it like this:
const clock1 = new Clock()
const clock2 = new Clock()
runSpring(clock1, value, dest, [clock2])
This ensures that only 1 spring animation is run at the time which solves the above mentioned flickering problem for me.
from react-native-reanimated.
@JonnyBurger Thank for sharing this solution. I will likely try it.
I noticed the exact same "issue" and fixed it outside the spring function. You can find an example at https://github.com/wcandillon/can-it-be-done-in-react-native/blob/master/tinder-swiping/components/Profiles.js.
I'm glad that we can share/improve these use cases together.
Could you share which line fixes this issue?
from react-native-reanimated.
Related Issues (20)
- frame drops on reanimated pinch and pan gesture using reanimated on react-native-svg HOT 8
- PhaseScriptExecution fails for Hermes Engine after install of react-native-reanimated HOT 10
- Missing useEvent in mocks HOT 2
- WithDelay of 0ms should not cause any delay HOT 1
- β [Android] Support 16kb page size for Android 15+ devices HOT 3
- Animation are flickering on IOS when Sentry integration is active HOT 4
- Reanimated Stops Working Completely on iOS HOT 3
- Animation frame drop (flickering animation), reproducible only on real device HOT 2
- Execution failed for task ':react-native-reanimated:buildCMakeDebug[arm64-v8a]'. - Mac M1 HOT 8
- `useAnimatedProps` is not testable
- bug: crashing on Android debug build with RN 0.75 HOT 7
- useAnimatedRef<Animated.FlatList<any>>() always return null v2.8.0 HOT 4
- Android App crash on scrollTo With PanGesture HOT 6
- Fails to build on react-native-macos 0.74.1
- Attempted to use private field on non-instance
- Animations are not working after navigating to the same screen with react-navigation/drawer && react-navigation/bottom-tabs HOT 2
- debuggerWorker.js:69 TypeError: Cannot convert undefined or null to object HOT 7
- [docs] wrong internal link in docs HOT 2
- IllegalViewOperationException associated with ReanimatedUIManage on production crashlytics HOT 1
- useAnimatedKeyboard gives wrong values when prefersCrossFadeTransitions is turned on. HOT 1
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-native-reanimated.