React Svga展示组件二次封装

React Svga展示组件二次封装

svga是什么？

SVGA 是一种基于矢量图形的动画文件格式，全称为 Scalable Vector Graphics Animation。

svga 和 webp 格式图片的区别

格式

• SVGA：是一种基于矢量图形的动画文件格式，它通过描述图形的形状、位置、颜色等属性以及这些属性随时间的变化来定义动画。
• WebP：是一种位图图像格式，主要用于存储静态图像或简单的动画（如 WebP 动画）。它将图像的每个像素的颜色、透明度等信息进行编码存储。

文件大小

• SVGA：通常文件体积相对较小，因为它只需要存储图形的矢量数据和动画关键帧信息，而不需要存储每个像素的详细信息。特别是对于简单的动画，SVGA 文件大小优势明显。
• WebP：对于静态图像，WebP 具有出色的压缩性能，文件大小通常比传统的 JPEG、PNG 等格式小。但对于复杂的动画，WebP 动画文件可能会比简单的 SVGA 动画文件大，因为它需要存储每一帧的位图数据。

使用

webp

因为webp格式的就是一个图片，所以直接使用 img 标签就可以加载。

svga封装

/**
 * 文档：https://github.com/svga/SVGAPlayer-Web/blob/master/README.zh.md
 */
import React from 'react';
import { isFunction } from 'lodash';
import * as SVGA from 'svgaplayerweb';
import s from './index.module.scss';

interface SvgaImgProps {
    src?: string;
    id?: string;
    placeholder?: React.ReactNode;
    goPage?: () => void;

    [key: string]: any;
}

export const SvgaImg1: React.FC<SvgaImgProps> = ({
    src = '',
    id = '',
    placeholder = null,
    goPage = () => {}
}) => {
    const [isSuccess, setIsSuccess] = React.useState<boolean>(false);

    React.useEffect(() => {
        // 创建实例
        const player = new SVGA.Player(`#svga-${id}`);
        // 是否兼容
        const parser = new SVGA.Parser();

        // 跨域的 SVGA 资源需要使用 CORS 协议才能加载成功。
        parser.load(src, videoItem => {
            setIsSuccess(true);
            player.setVideoItem(videoItem);
            // 开始播放动画
            player.startAnimation();
        });

        return () => {
            player.clear();
        };
    }, [src]);

    const renderContent = () => {
        if (isSuccess) {
            return null;
        }

        return <div className={s.placeholder}>{placeholder}</div>;
    };

    const renderWrap = () => {
        return (
            <div className={`${s.svgaWrap} svga-wrap`}>
                {renderContent()}

                <div
                    id={`svga-${id}`}
                    onClick={() => isSuccess && isFunction(goPage) && goPage()}
                    style={{
                        width: '100%',
                        height: '100%'
                    }}
                />
            </div>
        );
    };

    return renderWrap();
};

展示效果

总结

简单的对 svgaplayerweb npm包进行简单的封装。

增加了一个加载的占位图的展示。

这样就可以处理一个svga渲染到页面上了。尤其现在移动端一般动画都用svga格式。

pc端的一般就是兼容webp就显示webp格式的图片，不兼容的才会显示png的。