ReactNative系列之四十实现帧动画

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yeputi1015/article/details/85115648

不知道有没有更好的方式，请大家回评：

// 第一次播放时，会有白屏现象，应该是由于state过快切换导致第一次require图片时不及时导致。所以可以先用一个宽高都为0的Image先预加载一下需要显示的帧动画~~~即可解决这个问题

import React, {Component} from 'react';

import {
    Animated,
    Easing,
    Image,
} from 'react-native';

import * as TabIcon from "../constants/TabIcon";

export default class FrameAnimation extends Component {

    constructor(props) {
        super(props);
        this.state = {
            frameValue: new Animated.Value(1),
            imageSource: 1,
        }
    }

    _startAnimation(toValue, duration) {
        // this.state.frameValue = new Animated.View(0);
        this.state.frameValue.setValue(0);
        this._animated = Animated.timing(
            this.state.frameValue,
            {
                toValue: toValue,
                duration: duration,
                easing: Easing.linear,
            }
        );
        this._animated.start(() => {
        });
        this.state.frameValue.addListener((event) => {
            let nextImage = parseInt(event.value);
            if (nextImage !== 0 && nextImage !== this.state.imageSource) {
                this.setState({
                    imageSource: parseInt(event.value),
                });
            }
        });
    }

    render() {
        let source = TabIcon.MESSAGE_NORMAL[this.state.imageSource];
        return(
            <Image style={{height: 31, width: 26}} source={source}/>
        );
    }

    componentDidMount() {
        this._startAnimation(8, 7*33);
    }

}