React Native动画总结

Posted 2021-01-26 yicoding

　　最近在使用react native进行App混合开发，相对于H5的开发，RN所提供的样式表较少，RN中不能使用类似于css3中的动画，因此，RN提供了Animated的API

　　1.写一个最简单的动画

　　

import React, { Component } from ‘react‘
import { Animated, Text, View } from ‘react-native‘

Class DropList extends React.Component {
    constructor(props) {
    suoer(props)
this.state = {
            showMenu: false,
            transVal: new Animated.value(0)
        }
this.switchMenu = this.switchMenu.bind(this)
    }
// 菜单展开动画
    stratAni() {
        Animated.timing(                  
            this.state.fadeAnim,
            {
                toValue: 50, 
                duration: 500,
                useNativeDriver: true //  <-- 加上这一行 是否启用原生动画
                // 启用后，动画一开始就完全脱离了 JS 线程，因此此时即便 JS 线程被卡住，也不会影响到动画了
                // 动画值在不同的驱动方式之间是不能兼容的。因此如果你在某个动画中启用了原生驱动，那么所有和此动画依赖相同动画值的其他动画也必须启用原生驱动
                // 启用原生动画后，仅支持opacity和transform属性变化
            }
        ).start()
    }
    // 菜单收起动画
    closeAni() {
         Animated.timing(
             this.state.menuTransform,
             {
                 toValue: 0,
                 duration: 0,
                 useNativeDriver: true
             }
          ).start()
    }
    // 菜单展开与折叠
    switchMenu() {
         if (this.state.showMenu) { // 收起
             this.setState({
                 showMenu: false
             })
             this.closeAni()
         } else { // 折叠
             this.setState({
                 showMenu: true
             })
             this.stratAni()
         }
    }
    render() {
        let {
            showMenu,
            transVal
        } = this.state
        return(
            <View>
　　　　　　　    <Text onPRess={this.switchMenu}>Switch Menu</Text>
                <Animated.View style={{ height: 50, backgroundColor: ‘red‘, position: ‘absolute‘, top: -50, transform: [ translateY: transVal ] }}>
                    
　　　　　　　　　 </Animated.View>　　　　
            </View>
        )
    }
}         

 2.插值动画（loading旋转动画）

this.state = {

　　aniVal: new Animated.Value(0)

}

this.aniVal = 0

componentDidMount() {

　　this.state.aniVal.setValue(0);

　　Animated.timing(this.state.aniVal, {

　　　　toValue: 1,

　　　　duration: 200

　　}).start();

}

<Animated.View

    style={{

　　　　transform: [

　　　　　　{

　　　　　　　　translateY: this.state.aniVal.interpolate({

　　　　　　　　　　inputRange: [0, 1],

　　　　　　　　　　outputRange: [100, 0]

　　　　　　　　})

　　　　　　}

　　　　],

　　　　opacity:this.state.aniVal.interpolate({

　　　　　　inputRange: [0, 1],

　　　　　　outputRange: [0.2, 1]

　　　　})

　　}}>

　　<Text>加载中...</Text>

</Animated.View>