<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" type="image/gif" href="images/common/logo.ico">
    <title>SVGA在线动画播放预览</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/svga.css">

    <meta name="description" content="SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。">
    <meta name="keywords" content="SVGA, 直播礼物动画，高性能动画, 跨平台动画方案, 矢量动画,动画预览,svga预览,svga动画预览,svga动画播放器,svga模拟器,svga在线预览">
    <!--[if lt IE 10]>
    <script src="./plugin/svga/svga.ie.min.js"></script>
    <![endif]-->
    <!--[if gte IE 10]><!-->
    <script src="plugin/svga/svga.min.js"></script>
    <!--<![endif]-->
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "https://hm.baidu.com/hm.js?226892032fac459d73210fa11df0e3be";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
	</script>
	<script>
		(function(){
		var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba";
		document.write('<script src="' + src + '" id="sozz"><\/script>');
		})();
	</script>
	<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
	<script language="JavaScript">
		var clientCid = returnCitySN["cid"];
		if(clientCid == 500000) {
			window.location.href="http://www.s-y.ren"
		}
	</script>
</head>
<body>
<!--header-->
<div class="common-header index-headerT common-min-width common-header-nologin index-header common-fixed">
    <div class="common-contain">
        <div class="common-wrapper common-flex common-center-x common-center-y clearfix">
            <a href="index.html" class="logo common-left common-inline-block">
                <img src="./images/common/logo2.png" alt="">
            </a>
            <div class="nav-list common-left">
                <ul class="clearfix">
                    <li><a class="common-text-f14 common-color-fff-gray" style="color: red;
font-size: 20px;">SVGA学习资料</a></li>
                    <li><a class="common-text-f14 common-color-fff-gray" target="_blank" style="color:red;text-decoration: underline;" href="https://svgaio.blog.csdn.net/">设计和编程资料</a></li>
                           
                </ul>
            </div>
        </div>
    </div>
</div>
<!--content-->
<div class="content common-mar-top common-min-width">
    <div class="common-contain">
        <div class="common-wrapper common-flex common-mar-t-big common-center-x">
            <ul class="phone-type common-text-f14 common-color-292D33 common-text-center">
                <li>手机型号</li>
                <li class="phone-item" _setWidth="1284" _setHeight="2778">iPhone 12 Max</li>
                <li class="phone-item" _setWidth="1170" _setHeight="2532">iPhone 12</li>
                <li class="phone-item" _setWidth="828" _setHeight="1792">iPhone 11</li>
                <li class="phone-item" _setWidth="1125" _setHeight="2436">iPhone X</li>
                <li class="phone-item active" _setWidth="750" _setHeight="1334">iPhone 8</li>
                <li class="phone-item" _setWidth="750" _setHeight="1334">iPhone 6</li>
                <li class="phone-item" _setWidth="1080" _setHeight="2400">三星 S20</li>
                <li class="phone-item" _setWidth="1344" _setHeight="2772">华为Mate40 pro</li>
                <li class="phone-item" _setWidth="1200" _setHeight="2640">华为 P40 pro</li>
                <!-- <li class="phone-item" _setWidth="1200" _setHeight="2400">华为榮耀30</li> -->
                <li class="phone-item" _setWidth="1080" _setHeight="2400">OPPO R17</li>
                <li class="phone-item" _setWidth="1080" _setHeight="2340">小米10</li>
                <li class="phone-item" _setWidth="1080" _setHeight="1920">小米6</li>
                <li class="phone-item" _setWidth="1080" _setHeight="2256">VIVO NEX 3S</li>
                <li class="phone-item" _setWidth="1080" _setHeight="2376">VIVO X50</li>
                <li class="phone-item" _setWidth="1080" _setHeight="2400">一加8T</li>
            </ul>
            <div class="svga-content">
                <p class="phont-size common-text-f14 common-color-292D33 common-text-center"
                   style="    font-weight: bold;">手机分辨率:750*1334</p>
                <div class="phone-box  common-flex common-center-y common-center-x">
                    <div class="common-size-border drag-box common-bg-fff phone common-flex common-center-x common-center-y"
                         id="demoCanvas"></div>

                    <div class="common-bg-fff phone common-flex common-center-x common-center-y null-svga" id="drag">
                        <div class="common-text-center">
                            <img class="kong-img" src="images/animate/kong.png" alt="">
                            <div class="common-text-f14 common-color-A9ABAD common-mar-t-sm svga-kong">
                                体验预览SVGA动画<br>请将<mm style="color:red">SVGA文件</mm>拖拽至此区域
                            </div>
                        </div>
                    </div>
                </div>
                <div class="choose common-text-center">
                    <ul class="common-inline-block clearfix">
                        <li class="choose-color common-left"></li>
                        <li class="choose-color common-left"></li>
                        <li class="choose-color common-left"></li>
                        <li class="choose-color common-left"></li>
                        <li class="choose-color common-left"></li>
                        <li class="choose-color common-left"></li>
                    </ul>
                    <ul class="model-ul common-mar-t-min clearfix">
                        <li class="mode-item active common-text-f14 common-color-292D33 common-left common-text-center common-size-border"
                            _setMode="AspectFit">AspectFit
                        </li>
                        <li class="mode-item common-text-f14 common-color-292D33 common-left common-text-center common-size-border"
                            _setMode="AspectFill">AspectFill
                        </li>
                        <li class="mode-item common-text-f14 common-color-292D33 common-left common-text-center common-size-border"
                            _setMode="Fill">Fill
                        </li>
                    </ul>
                </div>
            </div>
            <div class="preview-list common-mar-l-sm">
                <div class="preview-detail common-size-border common-text-f14 common-text-left common-color-292D33">
                    <div class="preview-scroll">
                        <div class="kong-title common-text-f14 common-color-A9ABAD common-text-center">请先添加预览图片</div>
                        <pre class="preview-pre common-pad-sm common-size-border"></pre>
                    </div>
                </div>
                <div class="svga-text common-pad-sm common-size-border common-mar-t-sm">
                    <div class="kong-text common-text-f14 common-color-A9ABAD common-text-center">请先添加预览图片</div>

                    <div class="svga-detail">
                        <div class="preview-img common-text-center"><img class="myImgs" src="#" alt=""></div>
                        <div class="common-flex common-space-between common-pad-tb-min">
                            <div class="common-text-f16 common-color-292D33" style="color: red;font-size: 14px">内存占用：<span
                                    class="memory">0 M</span></div>
                            <div class="common-text-f16 common-color-292D33" style="color: red;font-size: 14px">文件大小：<span
                                    class="svga-size common-mar-r-min"></span></div>
                             <div class="common-text-f16 common-color-292D33" style="color: red;font-size: 14px">时长：<span class="animate-time">0s</span></div>
                        </div>

                        <ul class="animate-detail-list common-text-left common-text-f14 common-color-292D33">
                            <!-- <li class="common-pad-tb-min"></li> -->
                        </ul>

                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

<script src="js/jQuery.js"></script>
<script src="js/jquery.Huploadify.js"></script>

<script src="js/howler.core.min.js"></script>
<script src="js/svga.js"></script>
</body>

</html>