首页 文章

启动画面中的GIF文件离子

提问于
浏览
12

我正在开发一个带有离子框架和Cordova插件的混合应用程序 . 他们问我两个操作系统(iOS和Android)上的启动画面都有一个小动画 . 我想象一个GIF,但如果你可以加载GIF作为启动画面 . 或者如果有插件的话 .

1 回答

  • 5

    你可以这样做而不使用插件 . More information is available here .

    HTML

    <body>
           <div id="custom-overlay"><img src="http://cdn.osxdaily.com/wp-content/uploads/2013/07/dancing-banana.gif"></div> 
          <!-- Here comes rest of the content -->
        </body>
    

    www / css / style.css

    #custom-overlay {
      display: flex;
      flex-direction: column;
      justify-content: center;  
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
      background-color: #fe201f;
    }
    
    #custom-overlay img {
      display: block;
      margin: 0 auto;
      width: 60%;
      height: auto;
    }
    

    www / js / app.js

    .run(function($ionicPlatform, $state, $cordovaSplashscreen) {
          $ionicPlatform.ready(function() {
          if(navigator.splashscreen) {
            $cordovaSplashscreen.hide();
          } 
          });
        });
    
     .controller('ListCtrl', function($scope) {
      $scope.$on('$ionicView.afterEnter', function(){
        setTimeout(function(){
          document.getElementById("custom-overlay").style.display = "none";      
        }, 3000);
      });  
    });
    

相关问题