zoukankan      html  css  js  c++  java
  • [React Native] Animate the Scale of a React Native Button using Animated.spring

    In this lesson we will use Animated.spring and TouchableWithoutFeedback to animate the scale of a button in our React Native application. We will use the scale transform property and see how adjusting the friction of a spring will effect the spring animation.

    Checkout: TouchableWithoutFeedback.

    Checkout: Animated.spring.

    Only when you decide to override the default button feedback, create a new one.

    import React, { Component } from 'react';
    import { AppRegistry, StyleSheet, Text, View, TouchableWithoutFeedback, Animated } from 'react-native';
    
    export default class animatedbasic extends Component {
      constructor(props) {
        super(props);
    
        this.handlePressIn = this.handlePressIn.bind(this);
        this.handlePressOut = this.handlePressOut.bind(this);
      }
      
      componentWillMount() {
        this.animatedValue = new Animated.Value(1);
      }
      
      handlePressIn() {
        Animated.spring(this.animatedValue, {
          toValue: .5
        }).start()
      }
      handlePressOut() {
        Animated.spring(this.animatedValue, {
          toValue: 1,
          friction: 3,
          tension: 40
        }).start()
      }
      render() {
        const animatedStyle = {
          transform: [{ scale: this.animatedValue}]
        }
        return (
          <View style={styles.container}>
            <TouchableWithoutFeedback
              onPressIn={this.handlePressIn}
              onPressOut={this.handlePressOut}
            >
              <Animated.View style={[styles.button, animatedStyle]}>
                <Text style={styles.text}>Press Me</Text>
              </Animated.View>
            </TouchableWithoutFeedback>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      button: {
        backgroundColor: "#333",
         100,
        height: 50,
        alignItems: "center",
        justifyContent: "center",
      },
      text: {
        color: "#FFF"
      }
    });
    
    AppRegistry.registerComponent('animatedbasic', () => animatedbasic);
  • 相关阅读:
    HD2058The sum problem
    采用循环链表结构求解约瑟夫问题
    java线性表学习笔记(二)
    java线性表学习笔记(一)
    HD1004Let the Balloon Rise
    HD1005Number Sequence
    用c++库函数轻松解决回文问题
    accelerated C++ 中查找url(学习笔记)
    C++ 之关联容器 map
    pytorch 迁移学习[摘自官网]
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7795029.html
Copyright © 2011-2022 走看看