专注于
IT技术和业内交流

React Native动画实践

对于React Native动画我们代码山团队一直就有着手研究,我们对此进行了整理大致可以提出以下几个问题:

1.React Native动画支持的怎么样?
2.React Native的动画使用起来方便吗?
3.React Native的性能和H5性能相比怎么样?
4.React Native动画的综合情况如何?

一、React Native的动画支持:
React Native动画实践
从上面的树形图我们很容易看出React Native中有3个地方可以使用动画:
1.用于创建更精细的交互控制的动画Animated
2.用于全局的布局动画LayoutAnimation
3.用于构建Navigator不同页面切换的动画
这篇文章将会详细解释Animated相关的内容,在平时做动画的时候使用最多的也是它,其它两个通过文档可以很容易的进行使用

二、React Native的使用:
举个例子:假如我们要做一个同时从小变大并且旋转的动画,代码如下:

import React,{Component} from 'react';
import{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Animated,       //使用Animated组件
    Easing,         //引入Easing渐变函数
     } from 'react-native';

class ReactNativeDemo extends Component{
    constructor(props:any){
        super(props);
        this.state = {
            bounceValue: new Ani.Value(0),
            rotateValue:new Animated.Value(0),

        };
    }
    componentDidMount(){
        //初始化渲染执行之后立刻调用动画执行函数
        this.startAnimation();
    }
    startAnimation(){
        this.state.bounceValue.setValue(0);
        this.state.rotateValue.setValue(0);
        Animated.parallel([
            // 通过Animated.spring等函数设定动画参数
            //可选的基本动画类型:spring,decay,timing
            Animated.spring(this.state.bounceValue,{
                toValue:3,      //变化目标值
                friction:20,    //friction 摩擦系数,默认40
            }),
            Animated.timing(this.state.rotateValue,{
                toValue:1,
                duration:800,
                easing:Easing.out(Easing.quad),
            }),
            //调用start启动动画,同时执行回调,从而实现动画循环

        ]).start(()=>this.startAnimation());
    }

    render(){
        return (
            <View style={styles.container}>
                <Animated.Image source = {require('./1.jpg')}
                style = {{
                         width:100;
                        height:100,
                            transform:[
            //将初始值绑定到目标的style属性上
            {scale:this.state.bounceValue},
            //使用interpolate插值函数,
            // 实现从数值单位的映射转换
            {
                rotateZ:
                    this.state.rotateValue.interpolate({
                        inputRange:[0,1],
                        outputRange:['0deg','360deg'],
                    })
            },

        ]
    }}>
</Animated.Image>
    </View>
        );
    }
}

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

AppRegistry.registerComponent('ReactNativeDemo',()=>ReactNativeDemo);

从上面的代码不难看出,动画的使用逻辑还算清晰,虽然比不上CSS3动画编写简单,但是也不需要进行二次分装,直接像上面使用即可。

三、React Native的性能和H5性能相比怎么样?
ReactNative中的动画均为JavaScript动画,即通过JavaScript代码控制图像的各种参数值的变化,从而产生时间轴上的动画效果。通过封装一个Animated的元素,内部通过数据绑定和DOM操作变更元素,结合React的生命周期完善内存管理,解决条件竞争问题,对外表现则与原生组件相同,实现了高效流畅的动画效果。

附上css3动画和ReactNative动画比较效果:


【CSS3动画:使用animation:rotate 0.2s linear infinite实现
React Native动画:

startAnimation(){
    this.state.rotateValue.setValue(0);
    Animated.timing(this.state.rotateValue,{
        toValue:1,
        duration:200,
        easing:Easing.linear
    }).start(() =>this.startAnimation());
}


这里性能测试都采用instruments来测试Time Profiler数据,红线是动画开始的时候,从图中可以看出两者消耗都低,但是CSS动画的性能稍微优于React Native动画,如下图:
React Native动画实践

四、React Native动画的综合情况
通过以上的比较和例子我们可以得出如下结论:

React Native的动画支持度还是很广:

1.CSS3可以实现的动画React Native动画基本都可以实现
2.支持:3种动画类型(spring、decay、timing)、Interpolation插值函数、4种动画组合(同时、顺序、错峰、延迟)、动画执行回调、跟踪动态值、Animated.event输入事件、响应当前的动画值等功能;
关于React Native 支持的Easing类型可以到Easing.js;中去找符合自己项目需求的动画类型;
3.Navigator页面切换的动画也很丰富,我们可以从上面的MindNode找到所支持的切换动画,同样也可以从NavigatorSceneConfigs.js中找到它支持的类型;
4.对于特别复杂的动画,可以使用react-native-animatable补充多余的动画类型;
5.对于有些组件的动画,譬如数据图表的绘制,建议直接使用RN绘图库ART实现,同时react-native-svgkit这种思路也很好;

React Native动画编写起来方便,具有逻辑性:

1.使用基本的Animated组件,如Animated.View、Animated.Image、Animated.Text和其他(使用AnimatedImplementation来包装);
2.使用Animated.Value设定一个或多个初始化值,如位置属性、透明属性、角度属性等;
3.将初始化值绑定到动画目标的属性上,如style;
4.通过动画类型Api设定动画参数,如spring、decay、timing三种动画类型;
5.调用start启动动画,同时可以在start里面回调相关功能;

React Native动画性能没有那么差:

For Animated:

1.通过封装一个Animated的元素;
2.内部通过数据绑定DOM操作变更元素
3.结合React的生命周期完善内存管理,解决条件竞争问题;
4.对外表现则与原生组件相同,实现了高效流畅的动画效果;

For Navigator页面切换动画不流畅:

1.使用InteractionManager在转场动画的过程中,使新页面只渲染必要的少量的内容。
2.InteractionManager.runAfterInteractions只有一个函数类型的参数,当转场动画结束,这个回调函数就会被触发(所有基于AnimatedAPI的动画都会触发InteractionManager.runAfterInteractions)。

未经允许,不得转载本站任何文章:代码山 » React Native动画实践

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们