短视频软件开发，实现搜索栏逐渐过渡动画

短视频软件开发，实现搜索栏逐渐过渡动画相关的代码

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
    },
 
});

以上就是短视频软件开发，实现搜索栏逐渐过渡动画相关的代码， 更多内容欢迎关注之后的文章