開發中我們經常碰到設計師設計出來的動效比較復雜, 我們實現起來很麻煩的情況. 這時候我就希望設計師能用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動效的兩種方式就都搞定了