iOS开发中应用hype3提供的动效

开发中我们经常碰到设计师设计出来的动效比较复杂, 我们实现起来很麻烦的情况. 这时候我就希望设计师能用hype3导出一个动效问价, Xcode直接加载就可以了. hype3刚好提供了这样的功能.

我们先看一下hype3导出的文件


iOS开发中应用hype3提供的动效_第1张图片
hype3导出的动效文件

其实就是html文件,还有引用的css和png, 看到这我们就知道了,这个东西可用webView加载.当我拿到设计师给我的文件夹时我就是这样想的.然后我写了个webView加载本地html的demo,运行后悲剧发生了--空白一片, 啥都没有.

iOS开发中应用hype3提供的动效_第2张图片
这是我的demo截图

反复检查了几次代码都没找到问题, 但是html用浏览器打开也没问题啊

iOS开发中应用hype3提供的动效_第3张图片
浏览器中打开hype3的html的效果图


检查html源码时发现一具引用css文件的代码是带有路径的 

iOS开发中应用hype3提供的动效_第4张图片
html中引用css代码

想起以前在网上看到说Xcode的中黄色文件夹是虚拟文件夹, 试着删除了css前的文件路径,跑了一下,动效果然出现了.


在这顺便说一下, 如果我们在将html文件夹拖到Xcode中时,选用的是蓝色文件夹,那html文件里引用css的代码切不可删除路径, 而且加载本地html的代码也要改一下,指明加载的哪个文件夹. 以下图为例.

iOS开发中应用hype3提供的动效_第5张图片

到这, iOS加载hype3动效的两种方式就都搞定了

你可能感兴趣的:(iOS开发中应用hype3提供的动效)