dos

Public/static/css/index.css

@@ -99,6 +99,43 @@ input::-webkit-input-placeholder {
   -webkit-animation: all 5s ease forwards;
 }
 
+canvas {
+  opacity: 0;
+}
+
+.posterImg {
+  animation: fadeInUp 0.7s ease-out backwards;
+  -webkit-animation: fadeInUp 0.7s ease-out backwards;
+}
+
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0)
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0)
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none
+  }
+}
+
 @-webkit-keyframes fadeOutLeft {
   0% {
     opacity: 1

Public/static/js/common.js

@@ -46,10 +46,12 @@ if ($('div').length > 0) {
 
 $('.loading-page').show();
 preloadimages(preloadImageList, function () {
+
+    createPoster(function () {
         $('.loading-page').hide();
         // $('.home-page').show();
         $('.poster-page').show();
-    createPoster();
+    });
 }, function (progress) {
     $('.loading-page .progress').css('width', (16.6 / 100) * (progress * 100) + 'rem');
 });
@@ -138,7 +140,7 @@ $(document).ready(function () {
     });
 });
 
-function createPoster() {
+function createPoster(callback) {
 
     $('.poster-bg').hide();
     $('.poster-bg-' + resultType).show();
@@ -178,6 +180,7 @@ function createPoster() {
             drawRoundRectImg(posterCtx, designPxToRealPx(5) * 2, designPxToRealPx(canvasArr[resultType - 1][5]), designPxToRealPx(canvasArr[resultType - 1][4]), designPxToRealPx(46) * 2, designPxToRealPx(46) * 2, headimg);
             txtDraw(posterCtx, '@' + window.nickname, designPxToRealPx(canvasArr[resultType - 1][5] + 128), designPxToRealPx(canvasArr[resultType - 1][4] + 84), designPxToRealPx(20), 'normal', canvasArr[resultType - 1][6]);
             $('.posterImg').attr('src', getManBase64(posterCanvas));
+            callback();
         }
     }
 }