启动画面中的GIF文件离子 [英] GIF File in splash screen Ionic

查看:121
本文介绍了启动画面中的GIF文件离子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am developing a hybrid application with ionic-framework and Cordova plugins. They asked me the splash screen on both operating systems (iOS and Android) has a small animation. I imagine a GIF but not if you can load a GIF as splash screen. Or if there is a plugin for this.

推荐答案

你可以这样做而不使用插件。 此处提供更多信息

You can do it this way without using plugins. 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

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

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

这篇关于启动画面中的GIF文件离子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆