优化gif demo

docs/gif/css/common.css

@@ -11,17 +11,43 @@ body,
 
 .part-top {
     display: flex;
-    align-items: center;
-    justify-content: center;
     height: 70%;
 }
 
-.part-top .artplayer {
-    width: 500px;
-    height: 500px;
-}
-
 .part-bottom {
     position: relative;
     height: 30%;
 }
+
+.part-left {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.part-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.part-left .artplayer {
+    width: 500px;
+    height: 500px;
+    background: #fff;
+}
+
+.part-right .preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 500px;
+    height: 500px;
+    background: #f3f3f3;
+}
+
+.part-right .preview img {
+    max-width: 100%;
+}

docs/gif/index.html

@@ -18,7 +18,12 @@
 <body>
     <div class="container">
         <div class="part-top">
-            <div class="artplayer"></div>
+            <div class="part-left">
+                <div class="artplayer"></div>
+            </div>
+            <div class="part-right">
+                <div class="preview"></div>
+            </div>
         </div>
         <div class="part-bottom"></div>
     </div>

docs/gif/js/common.js

@@ -31,4 +31,10 @@
         ],
         plugins: [artplayerPluginGif]
     });
+
+    art.on('artplayerPluginGif', image => {
+        var animatedImage = document.createElement('img');
+        animatedImage.src = image;
+        document.querySelector('.preview').appendChild(animatedImage);
+    });
 })();