美文网首页ReactNative
React Native 动画之 Animated.spring

React Native 动画之 Animated.spring

作者: Kevin_小飞象 | 来源:发表于2019-03-20 17:03 被阅读1次

    Animated提供了三种动画类型。每种动画类型都提供了特定的函数曲线,用于控制动画值从初始值变化到最终值的变化过程:

    动画还可以使用组合函数以复杂的方式进行组合:

    Animated.spring()

    效果图

    animated03.jpg

    实例代码

    import React, { Component } from 'react';
    import {
      StyleSheet,
      View,
      Animated,
      Text
    } from 'react-native';
    export default class App extends Component {
      constructor(props) {  //构造函数
        super(props);
        this.springValue = new Animated.Value(0.3);
      }
    
      spring() {
        this.springValue.setValue(0);
        Animated.spring( 
          this.springValue,
          {
            toValue: 1,
            friction: 1
          }
        ).start(); 
      }
      render() {
        return (
          <View style={styles.container}>
            <Text
              style={styles.text}
              onPress = {this.spring.bind(this)}
            >
              Spring
            </Text>
            <Animated.Image
              style={{
                width: 227,
                height: 200,
                transform: [{ scale: this.springValue }]
              }}
              source={{ uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png' }}
            />
          </View>
        )
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
      },
    
      text: {
        marginBottom: 100
      }
    
    });
    

    相关文章

      网友评论

        本文标题:React Native 动画之 Animated.spring

        本文链接:https://www.haomeiwen.com/subject/nidtvqtx.html