ReactNative系列之四十实现帧动画

最新推荐文章于 2025-01-18 22:11:16 发布

叶菩提

最新推荐文章于 2025-01-18 22:11:16 发布

阅读量2.7k

点赞数

分类专栏： ReactNative跨平台

本文链接：https://blog.youkuaiyun.com/yeputi1015/article/details/85115648

版权

ReactNative跨平台专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一种解决React Native中帧动画首次播放出现白屏现象的方法。通过预加载图片，避免了state快速切换导致的显示延迟，确保动画流畅播放。文章详细解释了使用Animated和Image组件实现这一解决方案的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

// 第一次播放时，会有白屏现象，应该是由于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);
    }

}