Android应用加载fullpagejs框架实现css3动画引导页

1、作为手机应用，在过去的年月里常见的都是以静态的可滑动图片作为引导页，但是引导 页是手机应用进入的真正首页，可以说是手机应用的'脸面'，在要求用户体验越來越精确 细腻的今天，越来越多的手机应用加入动态效果来博取目光和焦点甚至不只是引导页, 更是酷炫的内容介绍和互动页。接下来的内容我们就利用fullpage.js框架布局css3动画来 打造属于白己的手机动画引导页。首先，我们需要构建自己的android项目，并在assets文件夹下添加文件夹目录，这里 収名为wel_page0> 直 android private libraries> 凉 ref ere nved l

2、ibrariesv 色 assetsbinlibsres&&&7 fullpage .settings vassetswelj>age >bin构建之后转换开发工具打开来到hbuilder,对项目管理器部分右键选择导入项目，再选 择“现有的文件夹作为新项目”,一路向下选择浏览文件，找到android开发工具的workspace, 找到刚才的项目,选择assets下的wel_page,如下右图;q归栏文件 口 选项 q文件舷 &现舟的文件夹作为新项目 & 现育项目到工作空间中现在，我们就有了一个web项目的根文件，在此基础上我们可以按照web网

3、页项目进 行网页开发，在这里我新建名称为fullpage.html的html文件用来构建页面效果，css和js以 及img文件夹目录用來存放fullpage.html开发过程中所需的不同资源； q wel_page e) sv cssq imgq fullpage.html接下来要做的就是在hbuilder川开发全屏的切换页而了，在这里我选择久负盛名的 fullpage.js开源框架,首先去到它的官网，fullpage官网地址： http:/alvarotrigo. com/fullpdge/。点击download即可下载。下载解压进入pure javascript (alpha)文件夹中，以

4、浏览 器运行的方式打开demo, html,可以看到fullpage的基本效果，可以看到，横竖切换效果 都是非常不错的，我们将该文件夹中的文件接入我们的项目屮，并将手机引导页需要展示的 图片引入img文件夹，如下图： q weljjage css javascriptfullpage.css sv imgindexl.pngpe index2.png0. index3.png曰 jsr) javascriptfullpage.minjsg fullpage.html继续,将fulllpage.js框架所需的css文件和js文件引用到fullpage.html：<link rel二&quo

5、t;stylesheet" type="text/cssm href=wcss/javascript.fullpage.css* /><script type=mtext/javascript" src="js/javascript.fullpage.min.jsmx/script> 在body中进行fullpage.js格式的布局，并声明内部样式定义整体和页面样式，可都参考或 复制 pure javascript (alpha)文件中的 demo, html 代码。再声明脚本段落进行fullpage. js框架的初始化工作，代码如下(

6、demo, html)：<script type="text/javastripfullpage.initialize('#fullpage', css3: true)； </script>注意：(1) #后面的id 定要和框架中外层的div匹配；(2) css3要设置为true属性(3) 关于其他属性可以根据需求去设置，属性间用丫隔开，这里提供fullpage框架中 页面属性配置和回掉函数的参考地址:http:/www. cnblogs. com/jessel31/p/4970317. hunl, 至此我们已经成功的将fullpage框架接入项目屮

7、，接下來我们在空白的fullpage页面屮添 加自己的背景图片和css3动画。在内部样式中我定义了针对某一个图片或者文字的css3动画，动画的具体效果是先 来回旋转，再下移淡出，当然还有对其它三种浏览器进行兼容的代码，这里不再啰嗦： keyframes hinge 0% -webkit-transform-origin: top left;-mozsform-origin: top left;-ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in

8、-out;-mozanimation-timing-function: ease-inout;-ms-animationtiming-function: ease-in-out; animation-timing-function: ease-in-out20%,60% -webkinsform: rotate3d(0, 0, 1, 80deg);-moz-transform: rota0, lj 80deg); -ms-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0., 0, 1, 80deg);-webkit-trans

9、form-origin: top left;-moz-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left;-webkit-animation-timing-function: ease-in-out; -mozanimat:iontiming-function: ease-in-out; -ms-animationtiming-function: ease-inout; animation-timing-function: ease-inout40%,80% -webkit

10、-transform: rotate3d(0j 0, 1, 60deg); -moz-transform: rotate3d(0, 0, 60deg); -ms-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0> 0, 1 60deg);-webkit-transform-origin: top left;-moz-transform-origin: top left;-ms-transform-origin: top left; transform-origin: top left;-webkit-animation-

11、timing-function: easein-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animationtiming-function: ease-in-out;opacity: 1;100% -webkit-transform: translate3d(6 43em? 0); -moz-transform: transla43em, 0); -ms-transform: translate3d(6 43em, 0);transform: tra

12、nslate3d(0, 43em 0); opacity: 0紧接着我们需要对文字或图片应用动画：bg -webkit>animation: hinge 2s alternate backwards; animation: hinge 2s alternate backwards;-moz-animation: hinge 2s alternate backwards; -ms-animation: hinge 2s alternate backwards; o-animation: hinge 2s alternate backwards; animation-delay: 02s;-

13、ms-animationdelay: 02s; -moz-animation-delay: 02s; -webkianimation-delay: 02s;其它屏可以根据自己的需求去继续完善和添加页面。运行发现动画能成功进行动画播放和 滑动切换，那么大功快要告成了，我们最后要做的就是android界面进行该页面的加载显示 这里我们利用webview控件来加载页面，在加载之前要对项目进行右键刷新，确保 ful lpage. html和刚才的文件己经同步到assets文件目录下。我们需要将mainactivity布局文件中webview的宽高设置为匹配父窗口，然后在 mainactivity类的o

14、ncreate方法中查找该webview的id,并让该webview加载assets文 件目录下的fullpage. html页面：<com tencent.smtt.sdk webviewandroid: id=u-hid/wel_webn android: 1 ayo ut_width=,rma tch_parentr, android: layout_height=nmatch_parentn/>welweb= (webview) this findviewbyld (r id. wel_web);welwebloadurl("file:/android_asset/wel_page/fullpagehtml"丿;welweb setuert