[React Native] Animate the Scale of a React Native Button using Animated.spring
2023-09-14 08:59:17 时间
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", width: 100, height: 50, alignItems: "center", justifyContent: "center", }, text: { color: "#FFF" } }); AppRegistry.registerComponent('animatedbasic', () => animatedbasic);
相关文章
- spring 之 类型转换
- Spring基础-01
- spring学习笔记(23)基于tx/aop配置切面增强事务
- activiti自定义流程之Spring整合activiti-modeler5.16实例(五):流程定义列表
- spring boot项目如何测试,如何部署
- 把spring-boot项目部署到tomcat容器中
- spring: 使用Spring提供的JDBC模板(使用profiles选择数据源/使用基于JDBC驱动的数据源)
- Spring中使用RedisTemplate操作Redis(spring-data-redis)
- [React] Use react styled system with styled components
- [React Testing] Mock react-transition-group in React Component Tests with jest.mock
- [React] Override webpack config for create-react-app without ejection
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- [React] Create an Auto Resizing Virtualized List with react-virtualized
- flex 后台使用spring hibernate 分页
- [React Testing] Test Drive Mocking react-router’s Redirect Component on a Form Submission
- [React Intl] Install and Configure the Entry Point of react-intl
- spring boot:配置shardingsphere(sharding jdbc)使用druid数据源(druid 1.1.23 / sharding-jdbc 4.1.1 / mybatis / spring boot 2.3.3)
- Java Spring里com.mysql.jdbc.Driver的加载时机
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- Spring实战4—面向切面编程
- Atitit spring springboot 集成mybatis法 目录 1.1. 使用spring管理数据源。。需要修改spring、 配置1 1.2. 直接代码集成,无需修改任何配置1
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- Spring的两种动态代理:Jdk和Cglib 的区别和实现
- 解决com.alibaba.fastjson.JSONException: write javaBean error问题以及解决Spring Boot加入Shiro导致spring aop失效的问题
- spring boot的配置文件的代码自动提示
- java ee wildfly spring 在线程池的线程中注入
- 001-Spring Cloud Edgware.SR3 升级最新 Finchley.SR1,spring boot 1.5.9.RELEASE 升级2.0.4.RELEASE注意问题点
- Spring中的FactoryBean
- Spring Boot可以离开Spring Cloud独立使用开发项目,但是Spring Cloud离不开Spring Boot,属于依赖的关系。
- Spring MVC页面重定向
- Spring基于XML装配Bean