Ionic中启动画面的GIF文件

Question

Ionic中启动画面的GIF文件

androidiosionic-frameworkcordova-pluginssplash-screen

14

我正在使用ionic-framework和Cordova插件开发混合应用程序。他们要求在iOS和Android两个操作系统上的启动画面有一个小动画。我想象中是一个GIF，但不确定是否可以将GIF作为启动画面加载。或者是否有相应的插件可以实现这一需求。

- NHTorres

如果您想在屏幕中包含gif，则可以参考此链接http://droid-blog.net/2011/10/14/tutorial-how-to-use-animated-gifs-in-android-part-1/。 - Prateek Joshi

嗨，请在你成功后分享答案。 - Mohit Bhansali

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tomislav Stankovic · Accepted Answer

您可以不使用插件以这种方式完成。此处提供更多信息。

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);
  });  
});