首页 > 代码库 > [React Native] Animate Styles of a React Native View with Animated.timing
[React Native] Animate Styles of a React Native View with Animated.timing
In this lesson we will use Animated.timing to animate the opacity and height of a View in our React Native application. This function has attributes that you can set such as easing and duration.
import React, {Component} from ‘react‘;import {Text, View, StyleSheet, Image, Animated, Easing} from ‘react-native‘;var styles = StyleSheet.create({ container: { backgroundColor: ‘#48BBEC‘, paddingBottom: 10 }, name: { alignSelf: ‘center‘, fontSize: 21, marginTop: 10, marginBottom: 5, color: ‘white‘ }, handle: { alignSelf: ‘center‘, fontSize: 16, color: ‘white‘ }, image: { height: 125, width: 125, borderRadius: 65, marginTop: 10, alignSelf: ‘center‘ }});class Badge extends React.Component { constructor(props){ super(props); this.state = { fadeAnim: new Animated.Value(0), bounceAnim: new Animated.Value(0) } } componentDidMount() { Animated.timing( this.state.fadeAnim, {toValue: 1, duration: 2000} ).start(); Animated.timing( this.state.bounceAnim, {toValue: 1, duration: 2000, easing: Easing.bounce} ).start(); } render(){ const animatedTextStyle = { opacity: this.state.fadeAnim, }; const animateImageStyle = { opacity: this.state.bounceAnim }; return ( <View style={styles.container}> <Animated.Image style={[styles.image, animateImageStyle]} source={{uri: this.props.userInfo.avatar_url}}></Animated.Image> <Animated.Text style={[styles.name,animatedTextStyle]}> {this.props.userInfo.name} </Animated.Text> <Animated.Text style={[styles.handle, animatedTextStyle]}> {this.props.userInfo.login} </Animated.Text> </View> ) }}/** * Make sure when when user the Badge component, the userInfo object is there * @type {{userInfo: *}} */Badge.propTypes = { userInfo: React.PropTypes.object.isRequired};module.exports=Badge;
[React Native] Animate Styles of a React Native View with Animated.timing
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。