概览

需要用到的React Hooks API
useEffect和useRef

useAnimate

/**
 * @configure initialValue
 * @configure animate : Function.apply(this, Array:configure)
 * **/
function useAnimate(configure){
    const useAnimatedValue = (initialValue) => {
        const ref = useRef(new Animated.Value(initialValue));
        return ref.current
    };

    const animatedValue = useAnimatedValue(configure.initialValue);

    useEffect(()=>{
        configure.animate.apply(this,arguments);
    });

    return [
        animatedValue
    ]
}

使用

import React,{useEffect,useRef} from 'react'
import {
    View,
    Animated,
    Easing
} from "react-native";

export default function(){
    const [animatedValue] = useAnimate({
        initialValue:0,
        animate:animate
    });

    function animate(){
        Animated.loop(
            Animated.timing(
                animatedValue,
                {
                    toValue: 1,
                    duration: 350,
                    easing: Easing.linear
                }
            )
        ).start();
    }

    const rotate= {
        transform: [
            {
                rotate: animatedValue.interpolate({
                    inputRange: [0, 0.2,0.5,0.8,1],
                    outputRange: ["0deg","-4deg","0deg","3deg","0deg"]
                })
            }
        ]
    };
    return (
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <Animated.View style={[rotate,{width:40,height:40,backgroundColor:'blue'}]}/>
        </View>
    )
}

效果图

4月-28-2019 17-04-48.gif

参考

• Building an Animation Hook in React Native
• react-native-animation-hooks