React Native动画总结

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>
        )
    }
}