开发中我们经常碰到设计师设计出来的动效比较复杂, 我们实现起来很麻烦的情况. 这时候我就希望设计师能用hype3导出一个动效问价, Xcode直接加载就可以了. hype3刚好提供了这样的功能.
我们先看一下hype3导出的文件
hype3导出的动效文件
其实就是html文件,还有引用的css和png, 看到这我们就知道了,这个东西可用webView加载.当我拿到设计师给我的文件夹时我就是这样想的.然后我写了个webView加载本地html的demo,运行后悲剧发生了--空白一片, 啥都没有.
这是我的demo截图
反复检查了几次代码都没找到问题, 但是html用浏览器打开也没问题啊
浏览器中打开hype3的html的效果图
检查html源码时发现一具引用css文件的代码是带有路径的
html中引用css代码
想起以前在网上看到说Xcode的中黄色文件夹是虚拟文件夹, 试着删除了css前的文件路径,跑了一下,动效果然出现了.
在这顺便说一下, 如果我们在将html文件夹拖到Xcode中时,选用的是蓝色文件夹,那html文件里引用css的代码切不可删除路径, 而且加载本地html的代码也要改一下,指明加载的哪个文件夹. 以下图为例.
到这, iOS加载hype3动效的两种方式就都搞定了
