Animation như một điều không thể thiếu của ứng dụng di động. Kết hợp hoạt ảnh với giao diện người dùng (UI) và thiết kế trải nghiệm người dùng (UX) là điều rất cần thiết, vì nó đóng vai trò quan trọng trong việc nâng cao cách mọi người phản hồi ứng dụng hoặc trang web.
Chúng ta có thể tạo các animation đơn giản bằng cách thay đổi vị trí hay kích thước các frame. Nhưng để tạo ra các animation phức tạp và bắt mắt thì không hề đơn giản.
Trong bài viết này sẽ chia sẻ tới mọi người về một thư viện hữu ích cho animation là Lottie
1. Giới thiệu về Lottie
Đây là một thư viện hỗ trợ cho cả Android và iOS, nó dùng để render các vector animations và art một cách đơn giản.
Lottie load và render animations và vectors từ file bodymovin JSON, loại file này có thể được tạo bởi After Effects, Sketch, …
Đây sẽ thành cầu nối giữa developer và designer rất hữu ích.
2. Tạo ứng dụng demo
Chuẩn bị file json:
Nếu không thể tự tạo được file Json bạn có thể lên trang chủ của Lottie để tải về các animation mong muốn.
Chọn animation mong muốn -> copy mã -> lưu lại dưới dạng .json
Tạo project :
Khởi tạo single app với Xcode
Sau đó bạn hãy add file json vừa tạo ở trên vào project của mình.
Thêm thư viện vào project:
Tiếp theo bạn cần khởi tạo Podfile và thêm lottie. Trong project tôi đã thêm thư viện SnapKit hỗ trợ việc constraint các view
Khởi tạo Lottie View:
Khời tạo 1 file swift để khởi tạo lottie view, tại đây sẽ load file json và thêm một số config cho view
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <span class="token keyword">import</span> <span class="token builtin">Lottie</span> <span class="token keyword">final</span> <span class="token keyword">class</span> <span class="token class-name">LottieNinjaView</span><span class="token punctuation">:</span> <span class="token builtin">UIView</span> <span class="token punctuation">{</span> fileprivate <span class="token keyword">let</span> animationView <span class="token operator">=</span> <span class="token function">AnimationView</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">func</span> <span class="token function">configView</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> loadingAnimation <span class="token operator">=</span> <span class="token builtin">Animation</span><span class="token punctuation">.</span><span class="token function">named</span><span class="token punctuation">(</span><span class="token string">"ninja"</span><span class="token punctuation">)</span> animationView<span class="token punctuation">.</span>animation <span class="token operator">=</span> loadingAnimation animationView<span class="token punctuation">.</span>contentMode <span class="token operator">=</span> <span class="token punctuation">.</span>scaleAspectFit animationView<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token punctuation">.</span>clear <span class="token keyword">self</span><span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token punctuation">.</span>clear <span class="token keyword">self</span><span class="token punctuation">.</span><span class="token function">addSubview</span><span class="token punctuation">(</span>animationView<span class="token punctuation">)</span> <span class="token keyword">self</span><span class="token punctuation">.</span><span class="token function">bringSubviewToFront</span><span class="token punctuation">(</span>animationView<span class="token punctuation">)</span> animationView<span class="token punctuation">.</span>frame <span class="token operator">=</span> <span class="token function">CGRect</span><span class="token punctuation">(</span>x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">)</span> animationView<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span> animationView<span class="token punctuation">.</span>loopMode <span class="token operator">=</span> <span class="token punctuation">.</span>loop <span class="token punctuation">}</span> <span class="token keyword">func</span> <span class="token function">startAnimating</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token builtin">DispatchQueue</span><span class="token punctuation">.</span>main<span class="token punctuation">.</span>async <span class="token punctuation">{</span> <span class="token keyword">self</span><span class="token punctuation">.</span>animationView<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">self</span><span class="token punctuation">.</span>animationView<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">func</span> <span class="token function">stopAnimating</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token builtin">DispatchQueue</span><span class="token punctuation">.</span>main<span class="token punctuation">.</span>async <span class="token punctuation">{</span> <span class="token keyword">self</span><span class="token punctuation">.</span>animationView<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Thêm view vào Viewcontroller:
Tiếp theo chúng ta quay lại file Viewcontroller để khởi tạo đối tượng và add vào supperView:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token keyword">import</span> <span class="token builtin">UIKit</span> <span class="token keyword">import</span> <span class="token builtin">Lottie</span> <span class="token keyword">import</span> <span class="token builtin">SnapKit</span> <span class="token keyword">class</span> <span class="token class-name">ViewController</span><span class="token punctuation">:</span> <span class="token builtin">UIViewController</span> <span class="token punctuation">{</span> <span class="token keyword">override</span> <span class="token keyword">func</span> <span class="token function">viewDidLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">viewDidLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">let</span> ninjaView <span class="token operator">=</span> <span class="token function">LottieNinjaView</span><span class="token punctuation">(</span><span class="token punctuation">)</span> ninjaView<span class="token punctuation">.</span><span class="token function">configView</span><span class="token punctuation">(</span><span class="token punctuation">)</span> view<span class="token punctuation">.</span><span class="token function">addSubview</span><span class="token punctuation">(</span>ninjaView<span class="token punctuation">)</span> ninjaView<span class="token punctuation">.</span>snp<span class="token punctuation">.</span>makeConstraints <span class="token punctuation">{</span> <span class="token punctuation">(</span>make<span class="token punctuation">)</span> <span class="token keyword">in</span> make<span class="token punctuation">.</span>centerY<span class="token punctuation">.</span>centerX<span class="token punctuation">.</span><span class="token function">equalTo</span><span class="token punctuation">(</span>view<span class="token punctuation">)</span> make<span class="token punctuation">.</span>width<span class="token punctuation">.</span>width<span class="token punctuation">.</span><span class="token function">equalTo</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span> make<span class="token punctuation">.</span>width<span class="token punctuation">.</span>height<span class="token punctuation">.</span><span class="token function">equalTo</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Kết quả:
Kết quả thu được như sau :
3. Kết luận
Đây chỉ là một ví dụ đơn giản của Lottie, ngoài ra còn rất nhiều điều tuyệt vời khác.
Các bạn hãy tìm hiểu thêm tại: https://github.com/airbnb/lottie-ios