How to make this transform with React-Native?
i want this static position
constructor(props) {
super(props);
this.state={
loaded:false,
transform:[{ perspective: 0 },
{ translateX: width },
{ rotateY: '0deg'}],
isMenuOpen:false,
}
}
animate to this position
Animated.timing(
this.state.transform,
{toValue:[{ perspective: 850 },
{ translateX: -width * 0.24 },
{ rotateY: '60deg'}]},
).start();
how to write the animation code ？
You can't use Animated in such way... Look at Animated link you need to do next thing:
<MyComponent style={{
transform:[{ perspective: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: [0, 850],
})},
{ translateX: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: [width, -width * 0.24],
})},
{ rotateY: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "60deg"],
})}],
}],
}}/>
------////------
Animated.timing(this.state.anim, {
toValue: 1
}),
------////--------
constructor(props) {
super(props);
this.state={
anim: AnimateValue(0)
}
}
Related
when creating a scroll view for a mobile app, a common principle could be to have an image on the very top of the list. This could be to showcase the content of the page. Examples for this could be found in the Spotify app, where an album cover is shown first, followed by a list of its songs.
import React, { Component } from 'react';
import {
View,Text,StyleSheet,ScrollView,Image, Animated, Dimensions
} from 'react-native';
HEADER_MAX_HEIGHT = Dimensions.get("window").height*0.4;
HEADER_MIN_HEIGHT = 70;
PROFILE_IMAGE_MAX_HEIGHT = 80;
PROFILE_IMAGE_MIN_HEIGHT = 40;
const IMAGE_SCALE_MAX = 20;
const LABEL_HEADER_MARGIN = 48;
import FastImage, { FastImageProps } from 'react-native-fast-image';
const AnimFastImage = Animated.createAnimatedComponent(FastImage);
class App extends Component {
constructor(props) {
super(props);
this.state = {
scrollY: new Animated.Value(0),
pan: new Animated.ValueXY()
};
}
render() {
return (
<ScrollView style={{
flex: 1,
width: '100%',
height: '100%',
backgroundColor: 'white'
}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical={false}
contentContainerStyle={{ padding: 0 }}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.pan.y } } }],
{
useNativeDriver: false,
},
)}
alwaysBounceVertical={false}
contentInsetAdjustmentBehavior="never"
scrollEventThrottle={1}
>
<AnimFastImage
animStyle={{
transform: [
{
translateY: this.state.pan.y.interpolate({
inputRange: [-1000, 0],
outputRange: [-100, 0],
extrapolate: 'clamp',
}),
},
{
scale: this.state.pan.y.interpolate({
inputRange: [-3000, 0],
outputRange: [IMAGE_SCALE_MAX, 1],
extrapolate: 'clamp',
}),
},
],
}}
source={{ uri: 'https://i.picsum.photos/id/1/400/400.jpg?hmac=lOytrN6lDOH_Yx7NwwGIaCtxp6pyuH2V4hD6Eac-VI0', priority: 'high' }}
style={styles.img}
resizeMode="cover"
/>
<Animated.View
style={{
paddingHorizontal: 16,
transform: [
{
translateY: this.state.pan.y.interpolate({
inputRange: [-1000, 0],
outputRange: [LABEL_HEADER_MARGIN * IMAGE_SCALE_MAX, -80],
extrapolate: 'clamp',
}),
},
],
}}>
<Text style={{ fontWeight: 'bold', fontSize: 20}}>
Trần thanh tung
</Text>
<View style={{ height: 700 }} />
</Animated.View>
</ScrollView>
)}
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
img: {
backgroundColor: '#ccc',
width: '100%',
height: 350,
justifyContent: 'flex-end',
padding: 0,
},
});
But it doesn't work as I want it to. I want it to be like the user part of the telegram
what I want
I'm trying to create this animation for my bottomsheet ,so initially when my homescreen loads, the bottomsheet pops up from below with a spring animation and then when the user swipes up , the bottomsheet also swipes up witha spring animation to it, and again if the user swipes down the bottomsheet comes back to its original position with a spring animation to it.
The only problem i'm facing is that, the first swipe up that i make after the initial popping up spring animation happens, the animation for the swiping up, doesnt happen smoothly, and it snaps to the upper position in just an instant without showing any spring like animation
Here is my code for my BottomSheet.
import * as React from "react";
import { SCREEN_HEIGHT } from "../../assets/constants";
import { StyleSheet, Animated, TextInput, View } from "react-native";
import { PanGestureHandler } from "react-native-gesture-handler";
import { Easing } from "react-native-reanimated";
import BottomSheetStack from "./BottomSheetStack";
export default class BottomSheet extends React.Component {
constructor(props) {
super(props);
this.BottomSheet = new Animated.Value(0);
this.state = {
isOpen: false,
isLoading: false,
isPanChanged: false,
};
}
componentDidMount() {
setTimeout(() => this.animateTranslate(), 1000);
}
animateTranslate() {
Animated.spring(this.BottomSheet, {
toValue: 1,
duration: 500,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
translateDrawer() {
return this.BottomSheet.interpolate({
inputRange: [0, 1],
outputRange: [SCREEN_HEIGHT, SCREEN_HEIGHT / 1.48],
});
}
animateBottomSheetUp() {
this.BottomSheet.setValue(0);
Animated.spring(this.BottomSheet, {
toValue: 1,
duration: 100,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
animateBottomSheetDown() {
this.BottomSheet.setValue(0);
Animated.spring(this.BottomSheet, {
toValue: 1,
duration: 100,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
handlePanGesture(props) {
this.setState({ isLoading: true });
if (!this.state.isPanChanged) {
this.setState({ isPanChanged: true });
}
if (!this.state.isOpen && props.nativeEvent.translationY > 0) {
this.animateBottomSheetUp();
this.setState({ isOpen: true });
} else if (this.state.isOpen && props.nativeEvent.translationY < 0) {
this.animateBottomSheetDown();
this.setState({ isOpen: false });
}
}
openBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [0, 1],
outputRange: [SCREEN_HEIGHT / 1.48, SCREEN_HEIGHT / 2.1],
});
}
closeBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [0, 1],
outputRange: [SCREEN_HEIGHT / 2.1, SCREEN_HEIGHT / 1.48],
});
}
render() {
return (
<PanGestureHandler
onGestureEvent={(props) => this.handlePanGesture(props)}
>
<Animated.View
style={{
...StyleSheet.absoluteFill,
height: SCREEN_HEIGHT - SCREEN_HEIGHT / 2.2,
backgroundColor: "#ffffff",
elevation: 10,
transform: [
{
translateY: !this.state.isLoading
? this.translateDrawer()
: !this.state.isOpen && this.state.isPanChanged
? this.openBottomSheetHandler()
: this.closeBottomSheetHandler(),
},
],
alignItems: "center",
borderRadius: 15,
}}
>
<View style={styles.bottomSheetLine} />
<TextInput
value={this.state.name}
style={styles.searchBox}
placeholder="Search"
placeholderTextColor="#5DB075"
/>
<BottomSheetStack {...this.props.navigation} />
</Animated.View>
</PanGestureHandler>
);
}
}
const styles = StyleSheet.create({
searchBox: {
height: 45,
width: `85%`,
backgroundColor: "#ffffff",
borderRadius: 10,
color: "#5DB075",
paddingLeft: 20,
fontSize: 14,
letterSpacing: 0.5,
top: 20,
fontFamily: "regular",
borderColor: "#5DB075",
borderWidth: 1,
},
bottomSheetLine: {
height: 5,
backgroundColor: "#5DB075",
width: 70,
borderRadius: 5,
top: 5,
},
});
Please suggest me some idea on how i can achieve this, or any other method that can be used to achieve this.
So, apparently, somewhere i found that spring animation, toValue:1 doesnt actually go upto 1, and it slightly crosses 1. So that's why my animation was behaving like that i guess.
The solution to this was, i simply changed my toValue for animateBottomSheetUp and animateBottomSheetDown , went to higher value, i.e toValue:2 for animateBottomSheetUp .
My changes in my code are very minor , it looks like this ,
also i removed all the this.BottomSheet.setValue(/*somevalue*/) from my code.
for animateBottomSheetUp:
animateBottomSheetUp() {
Animated.spring(this.BottomSheet, {
toValue: 2, // made this change from 1 to 2
duration: 100,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
and the openBottomSheetHandler & closeBottomSheetHandler looks like this now,
openBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [1, 2],
outputRange: [SCREEN_HEIGHT / 1.48, SCREEN_HEIGHT / 2.1],
});
}
closeBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [1, 2],
outputRange: [SCREEN_HEIGHT / 1.48, SCREEN_HEIGHT / 2.1],
});
}
I'm posting this answer if anybody faces the same problem,
Though i have worked around this problem, but i still feel there must be a better way to do this,if anybody has any better way , please answer. :-)
i am able to flip the image either vertically or horizontally
but i want both the actions at once.Is there any way to do so?
You should use Animated from react-native. Code would be something like following.
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Animated } from 'react-native';
export default class AppProject extends Component
{
constructor(){
super();
}
flip_Card_Animation=()=> {
Animated.spring(this.animatedValue,{
toValue: 0,
tension: 10,
friction: 8,
}).start();
}
render() {
this.SetInterpolate = this.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: ['180deg', '360deg']
})
const Rotate_Y_AnimatedStyle = {
transform: [
{ rotateY: this.SetInterpolate }
]
}
return (
<View style={styles.MainContainer}>
<Animated.Image source={{uri : 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg'}}
style={[Rotate_Y_AnimatedStyle, styles.imageViewStyle]}>
</Animated.Image>
<TouchableOpacity style={styles.TouchableOpacity_button} onPress={this.flip_Card_Animation} >
<Text style={styles.TextStyle}> Click Here Flip </Text>
</TouchableOpacity>
</View>
);
}
Hope its helpful.
You can simply achieve this by adding transform: [ { scaleX: -1 },{ scaleY: -1 }] in Image style.
<Image source={{uri: 'https://d33wubrfki0l68.cloudfront.net/3a27dc4d9b5ed67b4b773f049b5de2466101f3b7/e47c0/img/showcase/facebook.png'}}
style={{ width: 100, height: 100, transform: [ { scaleX: -1 },{ scaleY: -1 }] }}/>
I'm trying to make something where you can swipe the overlay off the screen.
This is what I have so far using PanResponder, but I don't feel like it's very clean. It's my first time using it so I'm wondering if there's a better way of doing this.
I need to animate the green part and more so I'd like to build this by hand if possible without using a package.
My component looks like this (heavily copied off this guy:
https://github.com/brentvatne/react-native-animated-demo-tinder/blob/master/index.ios.js)
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
PanResponder,
Animated,
Dimensions,
} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#000000',
},
overlay: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#0000ff',
},
video: {
position: 'absolute',
backgroundColor: '#00ff00',
top: 0,
left: 0,
bottom: 0,
right: 0,
}
});
function clamp(value, min, max) {
return min < max
? (value < min ? min : value > max ? max : value)
: (value < max ? max : value > min ? min : value)
}
export default class EdmundApp extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
};
}
componentWillMount() {
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderGrant: (e, gestureState) => {
this.state.pan.setOffset({x: this.state.pan.x._value, y: 0});
this.state.pan.setValue({x: 0, y: 0});
},
onPanResponderMove: Animated.event([
null, {dx: this.state.pan.x, dy: 0},
]),
onPanResponderRelease: (e, {vx, vy}) => {
this.state.pan.flattenOffset();
if (vx >= 0) {
velocity = clamp(vx, 3, 5);
} else if (vx < 0) {
velocity = clamp(vx * -1, 3, 5) * -1;
}
if (Math.abs(this.state.pan.x._value) > 150) {
Animated.decay(this.state.pan, {
velocity: {x: velocity, y: vy},
deceleration: 0.98
}).start()
} else {
Animated.spring(this.state.pan, {
toValue: {x: 0, y: 0},
friction: 4
}).start()
}
}
});
}
render() {
let { pan } = this.state;
let translateX = pan.x;
let swipeStyles = {transform: [{translateX}]};
return (
<View style={styles.container}>
<View style={styles.video}></View>
<Animated.View style={[styles.overlay, swipeStyles]} {...this._panResponder.panHandlers}>
</Animated.View>
</View>
);
}
}
AppRegistry.registerComponent('EdmundApp', () => EdmundApp);
Please go through this https://github.com/oblador/react-native-animatable
There is an option for bounce and exit which will help you for sure.
I'm trying to simultaneously restrict the values of my animation (using clamp as well as interpolate) but also get the values out of the interpolation so I can use them. Specifically because I want to update a piece of state with them and create an observable from that. I just can't figure out how to extract the 'real' value out of the AnimatedValue that is produced by the interpolation (in this case state.panValue). I've tried
this.state.panValue.value
and
this.state.panValue._value
and they come back as undefined. If anyone could help me out would be amazing!
EDIT: I'd also be really happy to just have the
this.state.pan.x
variable updated within the limits so I can skip the whole updating the state variable 'panValue' thing. A nice guy on Facebook suggested that I could implement this limit somehow inside the onPanResponderMove by switching the variable to a function or something but I've tried several things and all I get are errors, I guess because I don't really know how to 'safely' amend these animated values.
onPanResponderMove: Animated.event([
null,
{ dx: this.state.pan.x },
]),
Original Code:
import React, { Component } from 'react';
import {
View,
Animated,
PanResponder,
Text,
} from 'react-native';
import styles from './styles';
class ClockInSwitch extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
panValue: 0,
};
}
componentWillMount() {
this._animatedValueX = 0;
this._animatedValueY = 0;
this.state.pan.x.addListener((value) => {
this._animatedValueX = value.value;
this.setState({
panValue: this.state.pan.x.interpolate({
inputRange: [-30, 0, 120,],
outputRange: [-10, 0, 120,],
extrapolate: 'clamp',
}),
});
});
this._panResponder = PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
this.state.pan.setOffset({
x: this._animatedValueX,
});
this.state.pan.setValue({ x: 0, y: 0 });
},
onPanResponderMove: Animated.event([
null,
{ dx: this.state.pan.x },
]),
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
this.state.pan.flattenOffset();
Animated.timing(this.state.pan, {
toValue: 0,
duration: 500,
}).start();
},
onPanResponderTerminate: (evt, gestureState) => {
},
onShouldBlockNativeResponder: (evt, gestureState) => {
return true;
},
});
}
componentWillUnMount() {
this.state.pan.x.removeAllListeners();
}
render() {
const animatedStyle = {
transform: [{
translateX: this.state.panValue,
},
],
};
return (
<View>
<Text>{this.state.pan.x._value}</Text>
<View style={styles.buttonStyle}>
<Animated.View
style={[styles.sliderButtonStyle, animatedStyle]}
{...this._panResponder.panHandlers}
/>
</View>
</View>
);
}
}
export default ClockInSwitch;
I think this is what you're looking for. I'm using exponent so your declaration for vector icons would probably need to be changed. Cheers!
/**
* #providesModule ClockInSwitch
* #flow
*/
import React, {Component} from 'react';
import {View, Animated, StyleSheet, PanResponder, Text} from 'react-native';
import {FontAwesome} from '#exponent/vector-icons';
export class ClockInSwitch extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
panValue: 0
};
}
componentWillMount() {
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderGrant: (e, gestureState) => {
this
.state
.pan
.setValue({x: 0, y: 0});
},
//here's where you can check, constrain and store values
onPanResponderMove: (evt, gestureState) => {
// 300 is the width of the red container (will leave it to you to calculate this
// dynamically) 100 is the width of the button (90) plus the 5px margin on
// either side of it (10px total)
var newXVal = (gestureState.dx < 300 - 100)
? gestureState.dx
: 300 - 100;
this
.state
.pan
.x
.setValue(newXVal);
//set this state for display
this.setState({panValue: newXVal});
},
onPanResponderRelease: (e, {vx, vy}) => {
this
.state
.pan
.flattenOffset();
Animated
.spring(this.state.pan, {
toValue: 0,
duration: 400,
overshootClamping: true
})
.start();
this.setState({panValue: 0});
}
});
}
componentWillUnMount() {
this
.state
.pan
.x
.removeAllListeners();
}
render() {
//decouple the value from the state object
let {pan} = this.state;
let [translateX,
translateY] = [pan.x, pan.y];
let translateStyle = {
transform: [{
translateX
}, {
translateY
}]
};
return (
<View>
<Text style={styles.leftText}>Power Button Demo</Text>
<View style={styles.buttonStyle}>
<Animated.View
style={[styles.sliderButtonStyle, translateStyle]}
{...this._panResponder.panHandlers}>
<FontAwesome
name="power-off"
color="#EA2E49"
style={{
alignSelf: "center",
marginHorizontal: 10
}}
size={36}/>
</Animated.View>
</View>
<Text style={styles.rightText}>{this.state.panValue}: x value</Text>
</View>
);
}
}
export default ClockInSwitch;
const styles = StyleSheet.create({
sliderButtonStyle: {
borderColor: '#FCFFF5',
borderStyle: 'solid',
borderWidth: .5,
backgroundColor: '#FCFFF5',
borderRadius: 45,
height: 90,
width: 90,
justifyContent: 'center',
textAlign: 'center',
marginHorizontal: 5,
shadowColor: '#333745',
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: .6,
shadowRadius: 5
},
buttonStyle: {
borderColor: '#FCFFF500',
backgroundColor: '#DAEDE255',
borderStyle: 'solid',
borderWidth: 1,
height: 100,
width: 300,
justifyContent: 'center',
borderRadius: 50,
margin: 5,
flexDirection: 'column'
},
rightText: {
justifyContent: 'center',
textAlign: 'right',
fontWeight: '100',
marginHorizontal:15,
fontSize: 20,
color: '#FCFFF5',
marginVertical:25,
flexDirection: 'column'
},
leftText: {
justifyContent: 'center',
textAlign: 'left',
fontWeight: '100',
marginHorizontal:15,
fontSize: 24,
color: '#FCFFF5',
marginVertical:25,
flexDirection: 'column'
}
});