-
Notifications
You must be signed in to change notification settings - Fork 24.5k
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
[Animated] Question: Triggering a separate animation after a threshold #2072
Comments
Should be doable I think, and it sounds like you're going in the right direction. Adding a listener to the pan x is the right starting point. Then in that listener, if the value crosses your threshold, start the color animation. The trick is actually animating the colors. You'll want a dedicated Animated.Value just for color, and it will be kind of like an enum. Then interpolate it like so: var BLACK = 0;
var RED = 1;
var BLUE = 2;
backgroundColor: this.state.color.interpolate({
inputRange: [BLACK, RED, BLUE],
outputRange: ['rgb(0, 0, 0)', 'rgb(255, 0, 0)', 'rgb(0, 0, 255)']
}) Then you can do Animated.timing(this.state.color, {toValue: RED}).start(); This has its limitations of course - if you want to be able to go straight from RED to BLUE and BLACK to BLUE without going through RED, it's going to get more complicated, but I think you can get it to work by changing the outputRange of the interpolation function via setState in your listener. If you need that and can't figure it out, let me know. |
Apologies for formatting and any bugs - I'm on my phone. |
Very cool example! I think @sahrens' suggestion will work well! I cleaned up the formatting for him on the code because I'm on my computer :) |
Wow, didn't realize you could edit other people comments. Thanks, Brent! |
Oh, and please post what you come up with - it is a cool interaction indeed. |
@DUBERT - any luck with this? 😄 |
Hmm, I figured I'd attempt it (I don't quite fully grasp Animated and PanRespnder so take it easy on me), except PanResponderMove wasn't firing and causing the color interpolation to happen consistently. I dunno |
Woohoo! I've got it working using @sahrens suggestion! Thank you very much. At the top:
The listener function:
In render:
I'm using |
@DUBERT that's hot! Nice work, I am definitely stealing this concept. |
That's great! It's mostly taste, but the only change I would make personally would be to have a single target value and set that to GREY, GREEN, or RED, rather than the var target = null;
if (value.x > -50 && this._target != GREY) {
target = GREY;
} else if (value.x < -50 && value.x > -threshold && this._target != GREEN) {
target = GREEN;
} else if (value.x < -threshold && this._target != RED) {
target = RED;
}
if (target !== null) {
this._target = target:
Animated.timing(this.state.color, {
toValue: target,
duration: 180,
}).start();
} |
I'd also pick prettier colors ;) Closing since you got it working :) |
One other thought - you might want to do this with a horizontal scroll view rather than a pan responder on a translated view of you're not already. That way I think the nested scroll views will negotiate their responder locks correctly. Let me know if you have issues with that. |
That's really smart @sahrens , thanks. I will definitely use the object to reduce the code. And you anticipated my next issue! I was already thinking about a directional measurement on the Pan Responder to disabled vertical scrolling but that's much much better. And the colors were placeholders :) I'll pick good ones |
@DUBERT when you get that figured out can you post the code snippet? I'd be interested in seeing how that all works together. |
Will do |
For anyone that stumbles upon this I finally got this all figured out. My only issue, is that the
I know this is more suited for StackOverflow however do you happen to have any insight on the matter of the size, I know I have the dimensions of the device, just want to confirm that I'm not running into a layout bug that needs to be fixed |
@sahrens You say: if you want to be able to go straight from RED to BLUE and BLACK to BLUE without going through RED, it's going to get more complicated. That's exactly what I need, complicated or not. Any chance you can point me in the right direction? Thanks. |
@nicholasstephan do you need to do that on the row swipe? What Animated value are you tracking? You might need to set up separate animations. |
@DUBERT I know this is a an old thread but any chance you can share how you made it look like you're pulling in the colors from the side as opposed to @browniefed's way that changes the actual row background color? |
@jorelllinsangan You would need to have the |
I ended up doing it where I have 3 views wrapped in another view with My next issue now is what @DUBERT was saying above. I need to figure out how to lock the ScrollView when dragging my view. |
@jorelllinsangan this is why using a Horizontal scrollview per row will help w/ auto locking. I wrote up a very old blog post about this, wouldn't use any of that code but you can see it in action http://browniefed.com/blog/react-native-animated-listview-row-swipe/ Also check out https://github.com/jemise111/react-native-swipe-list-view |
@browniefed: I actually originally followed your old blogpost to get a feel for Animations. That's why I ended up asking above how to do it like how dubert did his. I've tried doing the setting it to false but I'm not sure how to distinguish between a horizontal row swipe and a vertical swipe to scroll. I'm not sure how I've used jemise111's library but it just doesn't handle row swipes the way I need it to work. I need it to work similarly to what dubert originally posted when he opened this thread. I also noticed that when Im dragging horizontally then I accidentally scroll vertically, my animation stops calling panResponderHandlers and it just freezes. I saw your blog post about setting scrollable to false in |
I posted a few times in the IRC, and I can't seem to find an answer. I've watched @sahrens Fluid UX video a bunch of times, poured over the new Animation API, looked through @brentvatne 's tinder demo and I can't figure out how to do this particular animation.
I want to create something very similar to this: http://cl.ly/c0H3
Basically, as you slide the row past a certain threshold, it triggers a new timed animation that isn't based off of x in ValueXY.
At first I tried I tried interpolating the colors, but that's based off the X value, so the transition can be too fast or slow based on how quickly the user slides the row. I also tried adding a listener to the panning gesture, and then trying to trigger an animation after it passes the threshold, but I can't animate colors, I can only interpolate colors.
Any help or ideas?
The text was updated successfully, but these errors were encountered: