AnimationSpringView

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Animated,
  Image,
  Easing
} from 'react-native';

const IMG_URI = 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png';

export default class  Component {
  constructor(props) {
    super(props);
    //使用 ** Animated.Value** 声明了一个 spinValue 变量,并传了一个 0 作为初始值
     this.spinValue = new Animated.Value(0.3);
  }

  spring () {
       this.spinValue.setValue(0.3);//this.spinValue 重置成 0
       Animated.spring(
              this.spinValue,
         {
             toValue: 1,//终值
             friction : 1,
         }
      ).start();
  }
 
  render () {
      
        return (
            <View style={styles.container}>
              <Text
                style={{marginBottom: 30 , fontSize : 20, fontWeight : 'bold'}}
                //使得 方法spring 绑定 组件 Text 点击该组件时,使nimated.Image弹起并伴有 伸缩效果 从本身大小的0.3-1
                onPress={this.spring.bind(this)}>点击 Spring</Text>
                <Text></Text>
                <Animated.Image
                  style={{ width: 220, height: 200, transform: [{scale: this.spinValue}] }}
                  source={{uri:IMG_URI}}/>
                 <Text></Text>
            </View>
         );
    }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 100,            
    justifyContent: 'center',
    alignItems: 'center',
  }
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值