Rive Animation cho Flutter: Hướng dẫn dành cho người mới bắt đầu để tạo hoạt hình tuyệt đẹp một cách dễ dàng!

Hoạt ảnh thường làm tăng sức hấp dẫn trực quan của ứng dụng hoặc trang web và cải thiện mức độ tương tác tổng thể của người dùng. Theo một nghiên cứu của Forrester Research, các trang web có hoạt ảnh được thực hiện tốt sẽ tăng mức độ tương tác của người dùng lên tới 400%. Hoạt ảnh hấp dẫn có thể thu hút sự chú ý của người dùng và khuyến khích họ tương tác nhiều hơn với nền tảng. Tuy nhiên, có một đường cong học tập dành cho các nhà phát triển để thành thạo hoạt hình, đặc biệt là khi làm việc với các công cụ và kỹ thuật hoạt hình nâng cao hơn.

Nắm bắt Rive với tư cách là một nhà phát triển không có kinh nghiệm về hoạt ảnh có thể tương đối dễ dàng so với các công cụ hoặc khung hoạt ảnh khác. Rive (trước đây gọi là Flare) được thiết kế thân thiện với người dùng và dễ tiếp cận đối với các nhà phát triển, ngay cả những người có ít hoặc chưa có kinh nghiệm hoạt hình trước đó. Trong bài viết này, bạn sẽ tìm hiểu cách tạo hoạt ảnh Rive tuyệt đẹp đơn giản một cách dễ dàng và quản lý chúng trong ứng dụng Flutter của mình.

Mục lục

• Giới thiệu về Rive🧙‍♂️

  • Các khái niệm cơ bản trong Rive🧗

• Hoạt hình đăng nhập tương tác đơn giản🚀

  • Thiết lập phần tử trên Artboard của bạn📃
  • Thời gian hoạt hình!🕶️
  • Thiết lập Máy trạng thái của bạn🏍️
  • Triển khai Hoạt ảnh trong Ứng dụng Flutter của bạn👨‍🚒

• Kết luận🏋️‍♀️

• Tài liệu tham khảo🧶

  
  

Giới thiệu về Rive🧙‍♂️

Rive là một công cụ hoạt hình và công cụ thời gian chạy mạnh mẽ và thân thiện với người dùng, cho phép các nhà phát triển và nhà thiết kế tạo ra các hoạt ảnh tương tác và tuyệt đẹp cho các nền tảng khác nhau, bao gồm ứng dụng dành cho thiết bị di động, ứng dụng web và trò chơi.

Các khái niệm cơ bản trong Rive🧗

Dưới đây là các khái niệm chính:

1. Artboard: Artboard là một canvas nơi bạn tạo hoạt ảnh của mình. Đây là nơi chính để tạo và sắp xếp các yếu tố hoạt hình, chẳng hạn như nhóm, ràng buộc, xương, v.v.
2. Dòng thời gian: Dòng thời gian là nơi hình ảnh động được xác định. Nó cho phép bạn đặt các khung hình chính và chỉ định cách các đối tượng sẽ thay đổi theo thời gian. Các khung hình chính biểu thị các thời điểm cụ thể trong đó các thuộc tính của đối tượng được xác định rõ ràng. Hệ thống hoạt hình nội suy giữa các khung hình chính để tạo chuyển tiếp mượt mà.
3. Máy trạng thái: Rive có tính năng máy trạng thái cho phép bạn chỉ định các trạng thái khác nhau cho hoạt ảnh của mình. Bạn có thể kích hoạt chuyển đổi Trạng thái dựa trên đầu vào của người dùng hoặc các điều kiện khác, cho phép tạo hoạt ảnh tương tác với các hành vi khác nhau dựa trên trạng thái hiện tại.
4. Xuất mã: Rive cho phép bạn xuất hoạt ảnh dưới dạng mã, giúp dễ dàng tích hợp chúng vào ứng dụng của bạn. Đối với các nhà phát triển Flutter, Rive cung cấp gói tích hợp và thời gian chạy Flutter hỗ trợ sử dụng hoạt ảnh Rive trong các dự án Flutter.

Hoạt hình đăng nhập tương tác đơn giản🚀

Chúng tôi sẽ thực hiện quá trình tạo hoạt ảnh đăng nhập đơn giản và xuất nó sang ứng dụng Flutter của chúng tôi. Chúng tôi sẽ sử dụng StateMachine để quản lý tính tương tác của hoạt ảnh này trong ứng dụng. Cuối cùng, nó sẽ trông như thế này 👇🏽

Thiết lập phần tử trên Artboard của bạn📃

Thực hiện theo các bước bên dưới để thiết lập phần tử trên bản vẽ Rive:

• Đầu tiên, chúng ta sẽ cần lấy chính phần tử đó. Tôi đã lấy nó từ Mẫu minh họa Personas của Người dùng trên Figma. Xuất phần tử dưới dạng tệp SVG.
• Truy cập Rive Nhấp vào nút Bắt đầu để mở bản nháp của bạn
• Trong bản nháp của bạn, hãy tạo một tệp mới và chọn một bảng vẽ trống.
• Kéo và thả phần tử vào bảng vẽ, nó sẽ tự động được thêm vào thư mục nội dung và bạn có thể thấy nó được đặt trên bảng vẽ của mình, nó sẽ trông như thế này 👇🏽

• Trên thanh bên, chúng ta sẽ Nhóm các hình dạng khác nhau tạo thành phần tử này và đặt tên cho chúng theo đó. Chọn tất cả những gì bạn muốn nhóm bằng Ctrl hoặc Ctrl + shift . Khi bạn chọn nó, hãy sử dụng Ctrl + G để nhóm chúng lại. Nó sẽ trông như thế này 👇🏽

• Bây giờ chúng ta sẽ thêm xương vào phần tử này. Xương giúp tạo ra các hình ảnh động sống động và chân thực hơn. Xem xét cách chúng tôi muốn hoạt ảnh này diễn ra như thế nào, chúng tôi sẽ thêm xương vào cổ và ngực để tạo ảo giác về hơi thở. Chúng tôi cũng sẽ thêm xương cho tóc vì chúng tôi muốn tóc cũng chuyển động nhẹ.
• Chọn công cụ xương ở góc trên cùng bên trái hoặc sử dụng Ctrl + B . Sau khi thêm xương, nó sẽ như thế này 👇🏽

• Bây giờ chúng ta sẽ đổi tên xương để dễ nhận biết. Chúng tôi cũng sẽ nhóm tất cả các yếu tố của khuôn mặt và đặt tên cho nhóm mới này là khuôn mặt . Sử dụng các mối quan hệ phân cấp, chúng ta có thể kết nối các xương với các phần của phần tử này mà chúng ta cần tác động hoặc biến dạng. Chúng ta có thể làm điều này bằng cách di chuyển các xương theo hình dạng mà chúng tác động trực tiếp. Để di chuyển một nhóm hoặc xương, hãy chọn và di chuyển nó bằng chuột. Nó sẽ trông như thế này 👇🏽

• Tiếp theo, chúng tôi sẽ trói xương của chúng tôi và cân chúng. Ràng buộc đảm bảo rằng khi xương di chuyển, các phần tương ứng trên bề mặt của nhân vật cũng di chuyển theo, tạo ra ảo giác về sự biến dạng. Trọng số, còn được gọi là trọng số đỉnh, liên quan đến việc gán các giá trị ảnh hưởng (trọng số) cho từng đỉnh của lưới của ký tự dựa trên mức độ gần của nó với các xương cụ thể. Chúng tôi sẽ điều hướng đến đường dẫn của hình dạng mà chúng tôi sẽ ràng buộc. Đối với cổ, đây là cách chúng tôi buộc nó vào xương cổ.

  

  Sau khi liên kết các xương, chúng tôi đặt các đỉnh bằng cách gán trọng số cho chúng. Ở đây, lưu ý rằng chúng tôi đã đặt tập hợp đỉnh cuối cùng lên 50% vì chúng tôi muốn hai xương có tác dụng 50% đối với chúng. Bạn nên sử dụng 50%, đặc biệt khi các đỉnh được đặt bao phủ một phần ảnh hưởng đến hai xương. Bây giờ, chúng ta sẽ làm tương tự với đường dẫn tóc. Chúng tôi cũng sẽ thay đổi xương bên trái và bên phải từ một thành hai xương để giúp chúng tôi đạt được chuyển động bồng bềnh mà chúng tôi muốn cho tóc.

• Chúng tôi muốn có hiệu ứng nhấp nháy trong hoạt ảnh này, để đạt được điều này, chúng tôi sẽ sử dụng tính năng clip trên hai hình con mắt như thế này 👇🏽

• Tiếp theo, chúng tôi sẽ thêm theo dõi đầu bằng cách sử dụng các ràng buộc dịch cho phần tử này vì chúng tôi muốn di chuyển đầu trong hoạt ảnh. Vì nó là phần tử 2d, nên việc thêm các ràng buộc dịch thuật sẽ tạo cho nó chiều sâu và một số dạng hiệu ứng 3d. Chọn mọi thứ và nhóm nó. Bây giờ chúng tôi có một nhóm duy nhất.

• Sau đó, ở góc trên cùng bên trái, chọn công cụ nhóm và tạo một nhóm ở giữa đầu (tại khu vực mũi). Trên thanh công cụ bên phải, thay đổi kiểu của nó từ nhóm thành mục tiêu, đặt tên là ctrl_front, sao chép nó và đặt tên trùng lặp là ctrl_back.

• Đối với ctrl_back đích, hãy chọn tùy chọn ràng buộc từ thanh công cụ bên phải. Chọn các ràng buộc dịch thuật từ danh sách các tùy chọn ràng buộc có sẵn. Nhấp vào biểu tượng trước tùy chọn ràng buộc đã chọn để đặt thuộc tính của nó.

• Đặt cường độ thành -100 và đặt mục tiêu của nó thành ctrl phía trước. Bây giờ khi bạn di chuyển ctrl phía trước, ctrl phía sau sẽ di chuyển theo hướng ngược lại. Nó sẽ giúp chúng ta đặt giới hạn cho các phần của khuôn mặt sẽ di chuyển theo hướng ngược lại, chẳng hạn như tai. Nó sẽ trông như thế này 👇🏽

  
  

  

• Bây giờ chúng ta sẽ thiết lập các ràng buộc cho phần còn lại của khuôn mặt. Chúng tôi cũng sẽ nhóm mắt (trái và phải) và tai (trái và phải) để giúp chúng tôi quản lý chúng tốt hơn. Chúng ta sẽ đặt ràng buộc cho mắt như thế này 👇🏽

• Lưu ý cách đầu tiên chúng ta đặt điểm gốc của nhóm mắt giống với điểm gốc của ctrl_front . Vì vậy, khi chúng ta di chuyển mục tiêu ctrl_front , nhóm mắt hiện đang bị giới hạn ở mục tiêu này sẽ di chuyển theo mục tiêu đó mà không bị lúng túng nhảy xung quanh. Chúng tôi sẽ làm tương tự cho những điều sau đây:

Chúng ta không cần đặt ra những ràng buộc cho đôi môi.

Đây là giao diện sau khi chúng tôi hoàn thành việc thêm tất cả các ràng buộc của mình 👇🏽

💃🏽 🥳 Xin chúc mừng, chúng tôi đã chuẩn bị thành công yếu tố sẵn sàng cho loại hoạt hình mà chúng tôi muốn đạt được. Chà!!

Thời gian hoạt hình!🕶️

Trên thanh công cụ bên phải, nhấn vào nút Animate để chuyển sang giao diện tạo ảnh động. Chúng tôi sẽ tạo sáu dòng thời gian hoạt hình và kết hợp mọi thứ với một máy trạng thái. Trong dòng thời gian, bằng cách sử dụng những gì chúng tôi đã thiết lập trước đó với xương và ràng buộc, chúng tôi có thể đặt các khung hình chính để tạo hoạt ảnh mà chúng tôi muốn đạt được.

Hoạt hình dòng thời gian đầu tiên là hoạt hình nhàn rỗi. Nó sẽ là trạng thái Idle của hoạt hình. Chúng tôi sẽ sử dụng điều này khi phần tử hoạt hình không được sử dụng.

• Đầu tiên, chúng tôi nhóm tất cả các phần của phần tử và đặt tên cho nó là ký tự trước khi bắt đầu quá trình tạo hoạt ảnh.
• Sau đó, chúng tôi đặt thời lượng là 4 phút,
• đặt Vùng làm việc của chúng tôi và đặt loại dòng thời gian thành vòng lặp. Đó là lý tưởng cho một hình ảnh động nhàn rỗi.

Đối với hoạt hình nhàn rỗi này, chúng ta sẽ tạo ra ảo ảnh về hơi thở, chuyển động nhẹ của tóc và chớp mắt. Sử dụng các phần tử xương cổ, xương tóc và mắt phải/trái, chúng ta sẽ đặt các khung hình chính cần thiết ở các tư thế khác nhau, nghĩa là chúng ta có thể đặt các thuộc tính cụ thể của mục đã chọn trên các điểm trên dòng thời gian. Xem xét kiểu chuyển đổi từ khung hình chính này sang khung hình chính tiếp theo, chúng tôi sẽ chọn loại nội suy mà chúng tôi cần. Bạn có thể tìm thấy nó ở dưới cùng bên phải của phần Dòng thời gian. Nội suy là giữ, tuyến tính hoặc đường cong, tùy thuộc vào cách bạn muốn di chuyển từ khung hình chính này sang khung hình chính tiếp theo. Nó sẽ trông như thế này 👇🏽

Từ gif ở trên, bạn có thể nhận thấy rằng trên các khung hình chính khác nhau trên dòng thời gian, chúng tôi đã đặt các tư thế khác nhau cho các mục đã chọn. Quá trình chuyển đổi này từ khung hình chính này sang khung hình chính khác tạo thành hoạt ảnh. Sử dụng quy trình tương tự này, chúng tôi sẽ tạo năm mốc thời gian khác. Bạn có thể nhấp vào đây để xem hoạt ảnh này và xem chi tiết các mốc thời gian khác nhau. Nó trông như thế này 👇🏽

Thiết lập Máy trạng thái của bạn🏍️

Chúng ta đã đi đến phần cuối cùng của quá trình hoạt hình này. Máy trạng thái là một cách trực quan để kết nối hoạt ảnh. Sử dụng máy trạng thái, chúng tôi có thể kiểm soát hoạt ảnh nào sẽ phát dựa trên đầu vào mà chúng tôi đã đặt. Chúng tôi có thể trộn hoặc kết hợp hai hoặc nhiều hoạt ảnh dòng thời gian để chúng phát đồng thời. Chúng ta phải chọn đúng loại đầu vào trong máy trạng thái vì đây là thứ chúng ta sẽ sử dụng để điều khiển hoạt ảnh trong ứng dụng.

Trong máy trạng thái, chúng ta có ba loại đầu vào:

• Số: Đầu vào số là một giá trị số được sử dụng trong máy trạng thái để biểu thị và kiểm soát dữ liệu định lượng. Bạn có thể đặt máy trạng thái chuyển sang một trạng thái cụ thể tùy thuộc vào giá trị số đầu vào số.
• Boolean: Đầu vào boolean là một giá trị nhị phân có thể đúng hoặc sai. Bây giờ máy trạng thái chuyển sang một trạng thái cụ thể tùy thuộc vào giá trị đầu vào, đúng hoặc sai.
• Kích hoạt: Đầu vào kích hoạt là đầu vào được sử dụng để báo hiệu một sự kiện. Không giống như các đầu vào boolean duy trì trạng thái của chúng cho đến khi được thay đổi rõ ràng, các trình kích hoạt được đặt lại về trạng thái mặc định sau khi được kích hoạt.

Trên bảng Hoạt hình, nhấp vào nút dấu cộng và tạo Máy trạng thái. Chúng tôi sẽ đặt tên nó là Login State Machine . Tên này rất quan trọng vì đó là những gì chúng ta sẽ cần để xác định máy trạng thái của mình sau này trong mã.

Thực hiện theo các bước bên dưới để thiết lập máy trạng thái của bạn:

1. Tạo hai lớp trong máy Trạng thái của chúng tôi và đổi tên một lớp thành Type . Nhiều lớp giúp chúng ta chơi nhiều trạng thái cùng lúc. Để có một Lớp khác trong máy trạng thái của bạn, hãy nhấp vào biểu tượng dấu cộng ở đầu biểu đồ StateMachine.
2. Trên phần Đầu vào, bạn sẽ thấy nó được dán nhãn ngay bên cạnh máy trạng thái. Nhấp vào biểu tượng dấu cộng, chọn một đầu vào số và đặt tên cho nó là . Chúng tôi sẽ sử dụng đầu vào này trong khi pha trộn (trộn) hoạt ảnh dòng thời gian look_left và look_right để khi các con số tăng lên, có vẻ như nhân vật đang nhìn từ trái sang phải.
3. Tạo một đầu vào khác, lần này là boolean và đặt tên là check . Nó kiểm soát thời điểm chúng ta muốn hình ảnh động trông như thế nào. Tạo hai đầu vào kích hoạt, đổi tên một đầu vào thất bại và đầu vào thành công khác. Bạn sẽ cần điều này để kích hoạt trạng thái thành công và thất bại.
4. Bây giờ hãy kéo và thả hoạt ảnh look_ idle và hoạt ảnh look_left trên biểu đồ lớp Type . Trên biểu đồ này, bạn sẽ thấy một số trạng thái mặc định:
   • Entry - Đây là điểm vào của bất kỳ trạng thái hoạt hình nào được kết nối với trạng thái này.
   • Thoát - Đây là điểm thoát của bất kỳ trạng thái hoạt hình nào được kết nối với trạng thái này
   • Trạng thái bất kỳ - Bất kỳ trạng thái hoạt hình nào được kết nối với trạng thái này sẽ được phát miễn là trạng thái đó đáp ứng các điều kiện trong quá trình chuyển đổi.
5. Quá trình chuyển đổi là đường và mũi tên kết nối hai hoặc nhiều trạng thái. Nhìn vào hướng mũi tên, bạn có thể thấy các trạng thái hiện được kết nối như thế nào. Khi bạn nhấp vào đây, bạn có thể thấy các thuộc tính của quá trình chuyển đổi. Trong các thuộc tính, bạn có thể tạo một điều kiện. Sử dụng bất kỳ đầu vào nào bạn đã tạo trước đó, bạn có thể xác định điều kiện mà bạn muốn phải được đáp ứng trước trạng thái tiếp theo trong quá trình chuyển đổi.
6. Trong lớp loại , kết nối các trạng thái Entry , look_Idle và look_left bằng cách sử dụng quá trình chuyển đổi tuyến tính. Đối với trạng thái look_left , chúng tôi muốn nó là sự kết hợp của hoạt ảnh look_left và look_right . Để thực hiện việc này, chọn trạng thái look_left trên biểu đồ và ở phía bên trái của bảng điều khiển, chọn Blend 1d. Đối với tùy chọn đầu vào, hãy chọn đầu vào giao diện . Đầu vào này sẽ kiểm soát sự pha trộn của chúng tôi. Sau đó, trong phần Dòng thời gian, hãy chọn các mốc thời gian look_left và look_right , đồng thời đặt chúng thành 0 và 100. Khi bạn tăng hình đầu vào của giao diện , nó sẽ trộn hai hoạt ảnh.
7. Kết nối trạng thái hòa trộn với look_idle bằng đường chuyển tiếp và mũi tên. Bây giờ hãy nhấp vào mũi tên và đặt điều kiện thành khi đầu vào kiểm tra là sai. Nó sẽ giúp chúng ta điều khiển hoạt ảnh và báo cho StateMachine, để hiển thị trạng thái look_idle khi boolean kiểm tra là sai. Thực hiện tương tự cho mũi tên chuyển tiếp trỏ từ look_idle trở lại trạng thái hòa trộn, nhưng bây giờ hãy kiểm tra xem boolean có được đặt thành true không.
8. Bây giờ khi bạn nhấp vào hộp kiểm cho đầu vào kiểm tra , bạn có thể đặt nó thành đúng hoặc sai. Khi bạn chơi máy trạng thái, nó sẽ tiếp tục hiển thị trạng thái look_Idle cho đến khi bạn thay đổi boolean kiểm tra thành true, sau đó nó sẽ bắt đầu hoạt ảnh look_left . Để trộn look_left và look_right , bạn tăng giá trị số đầu vào Look.
9. Bây giờ trong Lớp 1, đây là nơi bạn sẽ thêm các trình kích hoạt thành công và thất bại . Từ trạng thái đầu vào , bạn sẽ kết nối trạng thái nhàn rỗi . Từ trạng thái nhàn rỗi , kết nối cả trạng thái thành công và thất bại . Trong quá trình chuyển đổi từ trạng thái nhàn rỗi sang trạng thái thành công , hãy thêm một điều kiện. Trong điều kiện này, hãy thêm đầu vào kích hoạt thành công . Người ta nói rằng máy trạng thái chỉ nên phát hoạt ảnh thành công khi đầu vào thành công được kích hoạt.
10. Thực hiện tương tự đối với quá trình chuyển đổi trạng thái không thành công nhưng thay vào đó, hãy thêm trình kích hoạt không thành công vào điều kiện . Bây giờ từ thành công , hãy tạo một đường chuyển tiếp trở lại trạng thái không hoạt động. Tại đây chọn Thời gian thoát và đặt ở mức 100%. Nó có nghĩa là hoạt ảnh nhàn rỗi sẽ chỉ phát khi hoạt ảnh thành công đã phát xong. Làm tương tự cho quá trình chuyển đổi không hoạt động trở lại.

Bây giờ hoạt hình hoàn chỉnh trong máy trạng thái sẽ trông như thế này 👇🏽

Kiểm tra hoạt hình đầy đủ và máy trạng thái ở đây .

Xin chúc mừng 🥳, chúng ta đã tạo hoạt ảnh thành công cho phần tử của mình và thiết lập phần tử đó với một máy trạng thái! Tuy nhiên trước khi xuất file rive chúng ta sẽ thay đổi màu nền và màu áo của nhân vật. Nó sẽ trông như thế này👇🏽

Màu nền là (#B581EB) và màu áo của nhân vật là (#BD08D7)

Đây là liên kết đến hình ảnh động để xem mọi thứ chi tiết

Triển khai Hoạt ảnh trong Ứng dụng Flutter của bạn👨‍🚒

Chúng tôi sẽ sử dụng hình ảnh động này trên trang Đăng nhập của chúng tôi. Tạo dự án ứng dụng Flutter và thêm phần phụ thuộc Rive vào pubspec.yaml

 dependencies: rive: ^0.11.12

Ngoài ra, hãy thêm tệp Rive đã xuất vào tài sản dự án của bạn. Bây giờ chúng ta có thể tiếp tục tạo giao diện người dùng dựa trên thiết kế của mình. Chúng tôi mong muốn có hoạt ảnh như sau:

• phản ứng với hoạt ảnh thành công khi email/mật khẩu chính xác
• phản ứng với hình động thất bại khi email/mật khẩu sai
• trả lời với hướng của con trỏ trong trường văn bản

Đầu tiên chúng ta sẽ định nghĩa một số thứ trước chức năng Widget Build.

 ///Login details String emailCred = "[email protected]"; String passwordCred = "123456"; /// input form controller FocusNode emailFocusNode = FocusNode(); TextEditingController emailCtr = TextEditingController(); FocusNode passwordFocusNode = FocusNode(); TextEditingController passwordCtr = TextEditingController(); /// rive controller and input values StateMachineController? controller; SMIInput<bool>? check; SMIInput<double>? look; SMIInput<bool>? success; SMIInput<bool>? fail; bool isLoading = false; bool isError = false; @override void initState() { emailFocusNode.addListener(emailFocus); passwordFocusNode.addListener(passwordFocus); super.initState(); } @override void dispose() { emailFocusNode.removeListener(emailFocus); passwordFocusNode.removeListener(passwordFocus); super.dispose(); } void emailFocus() { check?.change(emailFocusNode.hasFocus); } void passwordFocus() { check?.change(passwordFocusNode.hasFocus); }

Ở đây, chúng ta có thể lưu ý những điều sau:

• Email và mật khẩu chính xác được xác định.
• Nút tiêu điểm và bộ điều khiển chỉnh sửa văn bản cho email và mật khẩu cũng được xác định.
• Ở đây, bộ điều khiển Rive và đầu vào được xác định là có thể vô hiệu hóa. Bạn nhận thấy rằng các đầu vào được xác định bằng tên chính xác mà chúng sử dụng trong máy trạng thái.
• Boolean tải và lỗi được xác định.
• Trong các hàm emailFocus và passwordFocus , đầu vào kiểm tra được thay đổi dựa trên boolean FocusNode.hasFocus
• Sau đó, trong các chức năng initState và dispose , chúng ta thấy các Trình nghe được thêm và xóa. Thính giả quen nghe để tập trung thay đổi.

Bạn có thể kiểm tra mã cho giao diện người dùng và phần còn lại của mã tại đây . Đoạn mã này cho biết cách thêm RiveAsset:

 SizedBox( height: 250, width: 250, child: RiveAnimation.asset( "assets/login_screen.riv", fit: BoxFit.fitHeight, stateMachines: const ["Login State Machine"], onInit: (artboard) { controller = StateMachineController.fromArtboard( artboard, "Login State Machine", ); if (controller == null) return; artboard.addController(controller!); check = controller?.findInput("check"); look = controller?.findInput("look"); success = controller?.findInput("success"); fail = controller?.findInput("fail"); }, ), ),

Từ đoạn mã trên, chúng ta có thể lưu ý những điều sau:

• StateMachine có cùng tên mà chúng tôi đã đặt tên trong trình chỉnh sửa Rive
• Bộ điều khiển và đầu vào được xác định

Đây là mã cho chức năng đăng nhập:

 void login()async{ //extract the text coming from the text fields final email = emailCtr.text; final password = passwordCtr.text; //Set loading boolean to true and delay to give an illusion of loading setState(() { isLoading = true; }); await Future.delayed( const Duration(milliseconds: 2000), ); // check if details entered is the same as the correct creditials defined if (email == emailCred && password == passwordCred) { //if correct trigger the success input and set error boolean to false success?.change(true); setState(() { isError = false; }); if(context.mounted){ // delay and navigate to home screen await Future.delayed( const Duration(seconds: 2),(){ Navigator.push(context, MaterialPageRoute(builder: (context) =>const HomeScreen())); }); } } else { // if details don't match defined credentials // set error boolean to true and trigger the fail input // set loading boolean to false setState(() { isError = true; }); fail?.change(true); } setState(() { isLoading = false; }); }

Kiểm tra mã hoàn chỉnh ở đây .

Bằng cách này, chúng tôi đã hoàn thành mã hoạt hình Đăng nhập của mình. Đây là cách mọi thứ trông:

Kết luận🏋️‍♀️

Chúc mừng! Chúng tôi đã hoàn thành hoạt ảnh đăng nhập tương tác đơn giản này. Dưới đây là tổng quan về mọi thứ chúng tôi có thể thực hiện:

• Thiết lập phần tử của chúng tôi trên bản vẽ Rive,
• Tạo các trạng thái hoạt hình khác nhau của phần tử này,
• Đặt tất cả các trạng thái này cùng với sự trợ giúp của máy trạng thái
• Xuất và thêm nó vào ứng dụng Flutter

Làm theo từng bước hướng dẫn này, bạn có thể gặp phải một số khó khăn, nhưng sẽ dễ dàng hơn khi thực hành. Bạn có thể liên hệ với tôi trên Twitter hoặc nhận xét nếu bạn cần trợ giúp trong khi làm theo hướng dẫn này.

Hãy xem các video hướng dẫn này để hiểu rõ hơn về hoạt hình Rive

Bạn cũng có thể xem kênh Rive để biết một số video hướng dẫn về hoạt ảnh Rive.

Tài liệu tham khảo🧶

Nhân vật đăng nhập hoạt hình