短视频软件开发，实现搜索栏逐渐过渡动画相关的代码
代码语言：javascript复制import React, {Component} from 'react';
import {
Animated,
Easing,
View,
StyleSheet,
TouchableOpacity,
TextInput
} from 'react-native';
var Dimenions = require('Dimensions');
var Width = Dimenions.get('window').width;
export default class Ours extends Component {
constructor() {
super();
this.animatedValue = new Animated.Value(0);
this.state = {
hidden: true,
currentAlpha: 0,
inputText: '',
placeholder: '',
opacity: 1,
}
}
Animate() {
this.state.currentAlpha = this.state.currentAlpha == 0 ? 1 : 0;//判断动画运动起止状态
this.setState({
opacity: 1
});
// this.animatedValue.setValue(0);
Animated.timing(
this.animatedValue,
{
toValue: this.state.currentAlpha,
duration: 300,
easing: Easing.linear
}
).start();
if (this.state.currentAlpha == 0) {
this.refs.textInput.blur();
this.setState({
inputText: '',
});
}
}
//获取焦点
_Focus() {
this.refs.textInput.focus();
}
//提示文字消失
_Opacity(text) {
this.setState({
inputText: text,
opacity: 0
});
}
render() {
const ViewWidth = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [Width * 0.9, Width * 0.8]
});
const Opacity = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
});
const marginLeft = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [Width * 0.3, Width * 0.1]
});
return (
<View style={styles.container}>
<View style={styles.search}>
<TouchableOpacity onPress={this.Animate.bind(this)} style={styles.image}>
<Animated.Text style={{
opacity: Opacity
}}>取消</Animated.Text>
</TouchableOpacity>
<Animated.View
style={{
height: 35,
width: ViewWidth,
backgroundColor: '#efefef',
position: 'absolute',
top: 0,
borderRadius: 10,
left: 10
}}
/>
<TextInput style={styles.inputs}
onFocus={this.Animate.bind(this)}
underlineColorAndroid='transparent'
// placeholder= "请输入搜索关键字"
ref="textInput"
onChangeText={this._Opacity.bind(this)}
value={this.state.inputText}
/>
<TouchableOpacity style={styles.ProText} onPress={this._Focus.bind(this)}>
<Animated.Text style={{
left: marginLeft,
opacity: this.state.opacity
}}>
请输入搜索关键字
</Animated.Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
position: 'relative',
top: 10
},
search: {
height: 35,
width: Width,
position: 'relative',
top: 0,
},
ProText: {
width: Width * 0.8,
position: 'absolute',
top: 6,
left: 0,
},
image: {
width: Width * 0.1,
height: Width * 0.1,
position: 'absolute',
top: 10,
right: Width * 0.035,
},
inputs: {
width: Width * 0.7,
height: 30,
borderWidth: 1,
paddingLeft: 5,
borderColor: '#efefef',
borderRadius: 4,
position: 'absolute',
left: Width * 0.05,
top: 4
},
});以上就是短视频软件开发，实现搜索栏逐渐过渡动画相关的代码， 更多内容欢迎关注之后的文章
