/alpface

学习抖音的iOS项目

Primary LanguageSwift

Alpface

本项目为学习抖音短视频的iOS客户端app:

Screenshot.gif

项目环境

  • iOS
  • Xcode 10.2.1+
  • Swift 5+

测试的api

https://api.enba.com/docs/

animated webp 制作 及 展示

ffmpeg 制作 webp动图

实战中遇到的问题及解决方案

  • 2018-4-15 使用animated webp 替换 gif 优化加载动图时 app内存飙升问题

问题描述: 在此之前客户端的动图是gif,并使用Gifu中提供的GIFImageView展示图片,但是同时加载很多gif时,就会出现内存飙升问题;然后我尝试把Gifu换成YYWebImage,并使用YYImage中YYAnimatedImageView展示图片,同时加载多个图片时内存依旧飙升的很高,直到app被系统杀死。

优化方案: 使用webp 动图 替代gif,并使用SDWebImage加载图片, 为什么我会使用这种方法,最初写这个项目就是为了学习抖音,我逆向过抖音iOS客户端项目,发现其使用的是YYAnimatedImageView展示动图,抓包抖音的动图发现其格式为webp,抖音展示动图的页面滑动起来很流畅,虽然内存也会有所增长,但并不明显;今天我在服务端上传图片的方法中,添加了ffmpeg制作animated webp,客户端效果果然有所提升。

  • cocoapods 安装libwebp v0.6.0时可能会遇到的超时问题:
[!] Error installing libwebp
[!] /usr/bin/git clone https://chromium.googlesource.com/webm/libwebp /var/folders/p6/t42f8nmd7332018zm9m2s3d80000gn/T/d20180415-42656-1hjxh43 --template= --single-branch --depth 1 --branch v0.6.0

Cloning into '/var/folders/p6/t42f8nmd7332018zm9m2s3d80000gn/T/d20180415-42656-1hjxh43'...
fatal: unable to access 'https://chromium.googlesource.com/webm/libwebp/': Failed to connect to chromium.googlesource.com port 443: Operation timed out

解决方法: 尝试过翻墙,修改host,均无效 最终,修改pod repo中libwebp的git source 地址,再执行pod install 解决, 但是我们需要有一个有效的libwebp的git仓库,在github上找到了一个https://github.com/webmproject/libwebp.git,可以看到mirrored from https://chromium.googlesource.com/webm/libwebp,而且正好有我需要的版本0.6.0, 那么我就替换为这个。 下面是步骤:

  1. 查看mac中cocoapods 本地库路径:
swaedeMacBook-Pro:alpface swae$ pod repo
/Users/swae/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/cocoapods-1.4.0/lib/cocoapods/executable.rb:89: warning: Insecure world writable dir /opt in PATH, mode 040777

master
- Type: git (master)
- URL:  https://github.com/CocoaPods/Specs.git
- Path: /Users/swae/.cocoapods/repos/master
  1. 在本地库中, 并找到对应的libwebp版本的文件
swaedeMacBook-Pro:alpface swae$ find ~/.cocoapods/repos/master -iname libwebp
/Users/swae/.cocoapods/repos/master/Specs/1/9/2/libwebp

进入libwebp目录,可以看到你的仓库中有哪些对应的版本

swaedeMacBook-Pro:libwebp swae$ cd ~/.cocoapods/repos/master/Specs/1/9/2/libwebp
swaedeMacBook-Pro:libwebp swae$ ls -l
total 0
drwxr-xr-x  3 swae  staff  96 12  3 21:50 0.4.1
drwxr-xr-x  3 swae  staff  96 12  3 21:50 0.4.2
drwxr-xr-x  3 swae  staff  96 12  3 21:50 0.4.3
drwxr-xr-x  3 swae  staff  96 12  3 21:50 0.4.4
drwxr-xr-x  3 swae  staff  96 12  3 21:50 0.5.0
drwxr-xr-x  3 swae  staff  96 12  3 21:50 0.5.1
drwxr-xr-x  3 swae  staff  96 12  3 21:50 0.5.2
drwxr-xr-x  3 swae  staff  96 12  3 21:50 0.6.0

由于SDWebImage 依赖的 libwebp版本为0.6.0,所以我们进入0.6.0中,并做修改

swaedeMacBook-Pro:libwebp swae$ cd 0.6.0/
swaedeMacBook-Pro:0.6.0 swae$ ls -l
total 8
-rw-r--r--@ 1 swae  staff  1587  4 15 09:53 libwebp.podspec.json

在0.6.0目录下的libwebp.podspec.json文件中修改git source

swaedeMacBook-Pro:0.6.0 swae$ sudo vim libwebp.podspec.json

找到

"source": {
"git": "https://chromium.googlesource.com/webm/libwebp",
"tag": "v0.6.0"
},

将其中的"git" 对应的url替换为https://github.com/webmproject/libwebp.git, 最后再执行pod install, 完成

swaedeMacBook-Pro:alpface swae$ pod install
/Users/swae/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/cocoapods-1.4.0/lib/cocoapods/executable.rb:89: warning: Insecure world writable dir /opt in PATH, mode 040777
Analyzing dependencies
Downloading dependencies
Installing SDWebImage (4.3.3)
Installing libwebp (0.6.0)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 8 dependencies from the Podfile and 9 total pods installed.