ReactNative动画效果分析（仅从Android端源代码进行分析），ndk开发前景

如何查看Android端动画源码：

首先打开nodeModule-react-native-ReactAndroid-src-main-java-com-facebook-react

就可以查看到ReactNative Android端的动画源码

可以看到StyleAnimatedNode和TransformAnimatedNode 都是继承自AnimatedNode

回过头来看ReactNative如何写一个动画效果

Animated

Animated适用于更细微的变化过程动画，可适配性更高。如下简单使用

export default class Test extends Component {

state = {

bounceValue: new Animated.Value(0),

};

render() {

return (

<Animated.Image source={require(’./my-icon.png’)} style={ {

transform: [{scale: this.state.bounceValue}]

}}/>)

}

componentDidMount() {

Animated.timing(this.state.bounceValue, {

toValue: 3,

duration: 3000,

// useNativeDriver: true 这里先注释掉，标记为注释@1

}).start()

}

}

通过查看AnimatedImplementation.js文件可以查看到动画源码，篇幅有限仅展示核心代码

所有Animated的js源码都在AnimatedImplementation.js中，本文RN版本为0.57.8.

首先看下动画的入口函数：Animated.timing

该函数定义在181行，不同RN版本对应的行数不一致，请以自己的版本为准。

const