Bài 15: AnimateDog

AnimateDog

Trong bài này mình sẽ hướng dẫn các bạn tạo hiệu ứng chuyển động cho hình ảnh ứng dụng 2 control: UIImage và UISlider.

1. Thiết kế giao diện

Các bạn tạo một project và kéo hình ảnh mình đã chuẩn bị sẵn vào project. Đây là link hình ảnh: https://bit.ly/2N9ydfe

Tiếp theo các bạn thiết kế ứng dụng có giao diện như sau:

Thiết kế giao diện
Hình 1.1 Thiết kế giao diện

Giao diện gồm có một UIImage được set hình 1.png và một UISlider để điều khiển hiệu ứng chuyển động.

Với UISlider các bạn set giá trị ban đầu là 1, giá trị min là 1, giá trị max là 8 tương ứng với 8 hình.

Các thuộc tính cho UISlider
Hình 1.2 Các thuộc tính cho UISlider

2. Ánh xạ Outlet, Action

Sau khi thiết kế giao diện xong các bạn ánh xạ Outlet cho UIImage và action cho UISlider:

Ánh xạ Outlet, Action
Hình 2.1 Ánh xạ Outlet, Action

3. Code logic cho ứng dụng

Các bạn tham khảo đoạn code dưới đây:

Khi các bạn tương tác với UISlider thì UIImage sẽ update một hình tương ứng với value của UISlider từ đó tạo ra hiệu ứng chuyển động.

Chạy project và di chuyển Slider các bạn sẽ thấy được hình ảnh chú chó đang di chuyển:

Chú chó chuyển động khi di chuyển UISlider
Hình 3.1 Chú chó chuyển động khi di chuyển UISlider

Cảm ơn bạn đã theo dõi bài viết các bạn có thể tham khảo source code ứng dụng trên tại đây: https://bit.ly/2oXE7YR , nếu có thắc mắc gì vui lòng để lại bình luận bên dưới.

Bạn có thể tham khảo khoá học lập trình iOS tại laptrinh0kho.com. Các khoá học từ cơ bản đến nâng cao, được thực tập doanh nghiệp. Bạn sẽ được cung cấp kiến thức có hệ thống với đội ngũ giảng viên giàu kinh thực tế và am hiểu sư phạm. Hãy liên hệ ngay để được tư vấn miễn phí theo thông tin bên dưới:

LAPTRINH0KHO.COM

  • 138/36 Nguyễn Xí, P. 26, Q. Bình Thạnh, TP.HCM
  • Hotline: 0987.360.431 (Kết bạn Zalo để tư vấn)
  • Email: laptrinh0kho@gmail.com
  • Website: www.laptrinh0kho.com
  • FanPage : laptrinh0kho.com

Leave a Reply

Your email address will not be published. Required fields are marked *