I am trying to create custom animation. I have hearth image which goes from bottom left corner to top right one. I will be animating top and bottom values of image to get it across the screen. The only catch is that I want it to rotate a little bit in the middle of a road, and then rotate back to first state. Is such animation doable? If so, could you give me advise how can i code it?
Cheers!
You can rotate the image with the rotate property of transform and use your animated value there. Example:
var interpolatedRotateAnimation = this._animatedValue.interpolate({
inputRange: [0, 100],
outputRange: ['0deg', '360deg']
});
You can find an example here
Related
I want to move images inside the view but the images should not go beyond the boundaries of the view(screen)
like that:
https://snack.expo.dev/#aisylu24/draggable-image-within-parent-boundaries-
click to see screenshot - i want to move only inside gray view
but I need to use Animated or Reanimated with gesture-handler and Functional component
Maybe I need to use layout for view but I don't know how to do it?
this is my snack where I need to do like that:
https://snack.expo.dev/#aisylu24/lookbook
Click on one of the pictures to see it
You can use a React-native gesture handler for capturing events.
https://docs.swmansion.com/react-native-gesture-handler/docs/gesture-handlers/api/pan-gh/
For animated value you can use default Animated from react-native
and for boundary fixing, you need to learn the concept of interpolation,
translateX.interpolate({
inputRange: [0, 100],
outputRange: [0, 100],
}),
translateY.interpolate({
inputRange: [0, 100],
outputRange: [0, 100],
}),
instead of [0,100] you need to add a range based on the area you want.
When using react-native animated flatlist to create a carousel, all works fine with the interpolate as follows:
const translateY = this.state.scrollX.interpolate({ inputRange, outputRange: [0, -60, 0] });
But, when we call out to a separate intent for permissions or going off to a settings page, the X position of my animated flatlist appears to reset to 0 and the object I'm animating (in a carousel) drops to the bottom of the view.
Has anyone got any idea on how to handle that? I don't know if it's because the scrollX state setting is lost or what...
Thanks
Simon
Just in case anyone else is using the Animated.FlatList in a similar way to us, the issue related to the useNativeDriver setting. When set to true and the app was put into the background with an React Native Intent, the FlatList flatlined and lost it's interpolated Y coordinate. When setting to false, things worked as expected.
Thanks
Simon
To see my humidityImageView I need to scroll down a little bit.
When I apply this animation:
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(humidityImageView, View.Y,40);
objectAnimator.setDuration(2000);
objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
objectAnimator.start();
it starts fromt the top of the screen, but not from the position of the humidityImageView in my ConstraintLayout.
How to make animation starts from the initial view position?
All I needed is replace View.Y to View.TRANSLATION_Y
After the user does some action I want to scroll to a particular section within a ScrollView, which I'm doing using this code:
this.refs.detailsView.measure((x, y, width, height, pageX, pageY) => {
this.refs.homeScrollView.scrollTo({ x: 0, y: pageY - 64, animated: true });
});
The problem is the "detailsView" View is near the bottom of the ScrollView and on the largest iPhones, scrollTo() ends up scrolling past the bottom of ScrollViews "natural" max scroll point and you can see the ScrollViews background colour (dary grey) as though you over-scrolled using touch gestures...the components in the ScrollView have the green background colour.
Does anyone have a suggestion for how to prevent this "over-scrolling" when using the ScrollView.scrollTo() function?
react-native: v0.36
This disables the scrollview from bouncing past its limit
bounces={false}
I am trying to scroll a panel using button tap, and the panel is scrolling as I want. But my problem is that,
After scroll end it back again to its initial position, doesn't stick to its new position.
Why this behavior and how can I get leave from this?
Code I used (working just fine)
var container = this.getDealdetails();
container.getScrollable().getScroller().scrollTo(x , y, true);
The scrollable container will scroll back if the scroll to position is greater than the height of the container.
This is best demonstrated with an example. Run this fiddle: http://www.senchafiddle.com/#8Qnt8
Make your browser window smaller in height and note how it behaves. Hope this makes sense.
var panel= Ext.getCmp('iObserveCreateRecords');
panel.getScrollable().getScroller().scrollTo(0, 0, true);
//iObserveCreateRecords is panel id