详解iOS如何让Lottie使用网络资源做动画的实现
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>背景</li><li>方案</li><ul class="second_class_ul"><li>1. 实现LOTAnimationDelegate代理</li><li>2. 生成LOTComposition</li><li>3. 初始化LOTAnimationView</li></ul></ul></div><p class="maodian"></p><h2>背景</h2><p>手上有需求需要使用CDN资源来让Lottie做动画，但由于动画需要加载图片，而Lottie提供的初始化接口只能加载json配置，Github上的issues也没人回答，因此特地写下本文记录一下方案。</p>
<p>为了实现这个功能还把Lottie看了一遍也是醉了。。。</p>
<p class="maodian"></p><h2>方案</h2>
<p>首先需要明确的一个点是如果你的Lottie资源带图片，那么直接使用LOTAnimationView的initWithContentsOfURL:方法是无法自动加载图片资源的。因为加载图片需要为LOTComposition设置baseURL，但通过url初始化animatonView时，由于json配置需要异步加载，所以该view的sceneModel为空，你无法直接设置，而view内部又没有加载完成的回调，因此只能通过监听sceneModel设置或者生成一个sceneModel传入这两种方式来实现Lottie图片资源加载。</p>
<p>以下介绍实现方式。</p>
<p class="maodian"></p><h3>1. 实现LOTAnimationDelegate代理</h3>
<p>首先需要实现LOTAnimationView的图片请求代理方法。Lottie内部不会自行请求图片，而是通过代理方法的形式将图片请求抛到外部实现。</p>
<div class="jb51code"><pre class="brush:cpp;">- (void)animationView:(LOTAnimationView *)animationView fetchResourceWithURL:(NSURL *)url completionHandler:(LOTResourceCompletionHandler)completionHandler {
[CDNService requestLottieImageWithURL:url completion:^(UIImage * _Nullable image, NSError * _Nullable error) {
if (completionHandler) {
completionHandler(image, error);
}
}];
}
</pre></div>
<p class="maodian"></p><h3>2. 生成LOTComposition</h3>
<p>其次，由于外部业务无法直接感知LOTAnimationView内部生成的LOTComposition的时机，因此可以选择自己生成它，并设置baseURL。</p>
<div class="jb51code"><pre class="brush:cpp;">+ (void)requestLottieModelWithURL:(NSURL *)url completion:(void(^)(LOTComposition * _Nullable sceneModel,NSError * _Nullable error))completion {
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void) {
NSData *animationData = ;
if (!animationData) {
return;
}
NSError *error;
NSDictionary *animationJSON = ;
if (error || !animationJSON) {
if (completion) {
completion(nil, error);
}
return;
}
LOTComposition *model = [ initWithJSON:animationJSON withAssetBundle:];
dispatch_async(dispatch_get_main_queue(), ^(void) {
[ addAnimation:model forKey:url.absoluteString];
//注意，这里的baseURL是你的请求path，需要根据你的业务情况自行设置
model.baseURL = @"https://os.xxx.cn/lottie/animation/";
model.cacheKey = url.absoluteString;
if (completion) {
completion(model, nil);
}
});
});
}
</pre></div>
<p>需要注意的是LOTComposition的baseURL设置，不仅需要查看Lottie的json配置文件，还需要关注服务端存储Lottie文件的路径。</p>
<p>假设你有一个叫animation的Lottie资源，那么请先打开配置json观察assets.u的值。这里假设assets.u为"images/"，则你需要在服务端存储的文件结构如下：</p>
<div class="jb51code"><pre class="brush:yaml;">- animation
- data.json
- images
- img_0.png
- img_1.png
</pre></div>
<p>此时，如果json的请求url是os.xxx.cn/lottie/anim… ，那么需要给LOTComposition的baseURL设置为os.xxx.cn/lottie/anim… 。</p>
<p class="maodian"></p><h3>3. 初始化LOTAnimationView</h3>
<p>最后只需要请求资源并传给LOTAnimationView即可。</p>
<div class="jb51code"><pre class="brush:cpp;">- (LOTAnimationView *)animationView {
if (!_animationView) {
//注意，如果想先初始化view再请求资源，不要使用new或者init来初始化
_animationView = [ initWithFrame:CGRectZero];
_animationView.animationDelegate = self;
NSURL *url = ;
//请求json配置，生成LOTComposition后传给view
@weakify(self);
[CCDNService requestLottieModelWithURL:url completion:^(LOTComposition * _Nullable sceneModel, NSError * _Nullable error) {
@strongify(self);
self.animationView.sceneModel = sceneModel;
}];
}
return _animationView;
}</pre></div>
<p>以上就是iOS如何让Lottie使用网络资源做动画的详细内容，更多关于iOS Lottie网络资源做动画的资料请关注琼殿技术社区其它相关文章！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>iOS自定义雷达扫描扩散动画</li><li>iOS实现贝塞尔曲线动画</li><li>iOS实现逐帧动画做loading视图</li><li>Android实现仿iOS菊花加载圈动画效果</li><li>详解 iOS 系统中的视图动画</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]