React-Native中Animate动画使用方法汇总整理（六）之缩放的实现

React-Native中Animate动画使用方法汇总整理（六）之缩放的实现

写作时间：2021/9/24
React-Native版本：0.63.2
目标平台：iOS（安卓平台尚未检测）

整理的进度已经过半了，这种工作确实是非常的枯燥，坚持做完吧

本篇是RN动画组件使用方式整理的第6篇，重点对缩放的实现进行整理介绍，上一篇简单对sequence和parallel进行了梳理，实际上通过parallel也实现了缩放效果，原理是同时改变视图的宽高，但是本篇采用了另外一种方式来实现类似的效果，先看最终的展示

和上一篇动态改变宽高有所不同，该案例当中的缩放是通过控制transform中的scale属性来实现的

完整代码如下

//App.js
'use strict';

import React from 'react';
import AnimatedTest from './demos/demo_2/AnimatedTest';

export default class App extends React.Component {
    render() {
        return (
            <AnimatedTest />
        );
    }
}

//AnimatedTest.js
'use strict';

import React from 'react';
import { SafeAreaView } from 'react-native';
import Ani_6 from './Ani_6';

export default class AnimatedTest extends React.Component {
    render() {
        return (
            <SafeAreaView>
                <Ani_6 />
            </SafeAreaView>
        );
    }
}

//Ani_6.js
'use strict';

import React from 'react';
import {StyleSheet, SafeAreaView, Button, Animated} from 'react-native';

export default class Ani_6 extends React.Component {
    constructor() {
        super();
        this.state = {
            scale_1: new Animated.Value(0),
            scale_2: new Animated.Value(0),
        };
    }

    render() {
        return (
            <SafeAreaView>
                <Button title={'Start'} onPress={this.startAni} />
                <Animated.View style={[{transform: [{scale: this.state.scale_1}]}, styles.Ani]} />
                <Animated.View style={[{transform: [{scale: this.state.scale_2}]}, styles.Ani]} />
            </SafeAreaView>
        );
    }

    startAni = () => {
        Animated.timing(this.state.scale_1, {
            toValue: 1,
            duration: 5000,
            useNativeDriver: true,
        }).start();
        Animated.spring(this.state.scale_2, {
            toValue: 1,
            friction: 2,
            useNativeDriver: true,
        }).start();
    };
}

const styles = StyleSheet.create({
    Ani: {
        width: 300,
        height: 300,
        backgroundColor: 'cyan',
    },
});

需要注意的是，虽然动画动态改变了scale的数值，但是视图的宽高始终没有改变，或者说视图的占位始终是存在的，不会因为它的scale变化导致视图大小发生改变，这一点和上篇中动态改变宽高的动画效果是不同的

下篇会对动画的循环播放实现方法进行整理