Flutter: Tổng quan về hoạt ảnh

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Mục lục bài viết

Hệ thống hoạt ảnh trong Flutter dựa trên các đối tượng Animation được định kiểu. Các widget có thể kết hợp các hoạt ảnh này trong các hàm xây dựng của chúng một cách trực tiếp bằng cách đọc giá trị hiện tại của chúng và lắng nghe các thay đổi trạng thái của chúng hoặc chúng có thể sử dụng các hoạt ảnh làm cơ sở cho các hoạt ảnh phức tạp hơn mà chúng chuyển cho các widget khác.

Hoạt ảnh

Khối xây dựng chính của hệ thống hoạt ảnh là lớp Animation. Hoạt ảnh thể hiện giá trị của một loại cụ thể có thể thay đổi trong suốt thời gian tồn tại của hoạt ảnh. Hầu hết các widget thực hiện hoạt ảnh đều nhận một đối tượng Animation dưới dạng tham số, từ đó chúng đọc giá trị hiện tại của hoạt ảnh và lắng nghe các thay đổi đối với giá trị đó.

addListener

Bất cứ khi nào giá trị của hoạt ảnh thay đổi, hoạt ảnh sẽ thông báo cho tất cả các trình nghe đã được thêm vào addListener. Thông thường, một đối tượng State sẽ lắng nghe hoạt ảnh gọi setState trên chính nó trong lệnh callback trình nghe của nó để thông báo cho hệ thống widget rằng nó cần xây dựng lại với giá trị mới của hoạt ảnh.

Mẫu này phổ biến đến mức có hai widget giúp các tiện ích con xây dựng lại khi hoạt ảnh thay đổi giá trị: AnimatedWidget và AnimatedBuilder. Đầu tiên, AnimatedWidget hữu ích nhất cho các widget động không trạng thái. Để sử dụng AnimatedWidget, chỉ cần phân lớp nó và triển khai hàm build. Thứ hai, AnimatedBuilder hữu ích cho các widget phức tạp hơn muốn gộp hoạt ảnh như một phần của hàm xây dựng lớn hơn. Để sử dụng AnimatedBuilder, chỉ cần xây dựng widget con và chuyển cho nó một hàm builder.

addStatusListener

Hoạt ảnh cũng cung cấp một AnimationStatus, cho biết hoạt ảnh sẽ phát triển như thế nào theo thời gian. Bất cứ khi nào trạng thái của hoạt ảnh thay đổi, hoạt ảnh sẽ thông báo cho tất cả các trình nghe được thêm vào addStatusListener. Thông thường, hoạt ảnh bắt đầu ở trạng thái dismissed, có nghĩa là chúng ở đầu phạm vi của chúng. Ví dụ: hoạt ảnh tiến triển từ 0.0 đến 1.0 sẽ là dismissed khi giá trị của chúng là 0.0. Sau đó, một hoạt ảnh có thể chạy forward (từ 0.0 đến 1.0) hoặc có thể trong reverse (từ 1.0 đến 0.0). Cuối cùng, nếu hoạt ảnh đạt đến cuối phạm vi (1.0), thì hoạt ảnh sẽ đạt trạng thái completed.

AnimationController

Để tạo hoạt ảnh, trước tiên hãy tạo AnimationController. Cũng như bản thân nó là một hoạt ảnh, một AnimationController cho phép bạn kiểm soát hoạt ảnh. Ví dụ: bạn có thể yêu cầu bộ điều khiển phát hoạt ảnh forward hoặc hoạt ảnh stop. Bạn cũng có thể tạo hoạt ảnh fling, sử dụng mô phỏng vật lý, chẳng hạn như lò xo, để điều khiển hoạt ảnh.

Khi bạn đã tạo bộ điều khiển hoạt ảnh, bạn có thể bắt đầu xây dựng các hoạt ảnh khác dựa trên nó. Ví dụ: bạn có thể tạo một ReverseAnimation phản chiếu hoạt ảnh gốc nhưng chạy theo hướng ngược lại (từ 1.0 đến 0.0). Tương tự, bạn có thể tạo một CurvedAnimation có giá trị được điều chỉnh bởi a Curve.

Tween

Để tạo hoạt ảnh vượt quá khoảng 0.0 đến 1.0, bạn có thể sử dụng a Tween<T>, nó là nội suy giữa các giá trị begin và end của nó. Nhiều kiểu có các lớp con Tween cụ thể cung cấp phép nội suy theo kiểu cụ thể. Ví dụ: ColorTween nội suy giữa các màu và RectTween nội suy giữa các hình chữ nhật. Bạn có thể định nghĩa nội suy của riêng bạn bằng cách tạo lớp con của Tween và ghi đè hàm lerp của nó.

Tự nó, một tween chỉ định nghĩa cách nội suy giữa hai giá trị. Để có được giá trị cụ thể cho khung hiện tại của hoạt ảnh, bạn cũng cần hoạt ảnh để xác định trạng thái hiện tại. Có hai cách để kết hợp tween với hoạt ảnh để có được giá trị cụ thể:

  1. Bạn có thể evaluate tween ở giá trị hiện tại của một hình ảnh động. Cách tiếp cận này hữu ích nhất cho các widget đã lắng nghe hoạt ảnh và do đó xây dựng lại bất cứ khi nào hoạt ảnh thay đổi giá trị.
  2. Bạn có thể animate tween dựa trên hình ảnh động. Thay vì trả về một giá trị duy nhất, hàm animate trả về một Animation mới kết hợp với tween. Cách tiếp cận này hữu ích nhất khi bạn muốn cung cấp hoạt ảnh mới được tạo cho một widget con khác, tiện ích này sau đó có thể đọc giá trị hiện tại kết hợp với tween cũng như lắng nghe các thay đổi đối với giá trị.

Kiến ​​trúc

Hoạt ảnh thực sự được xây dựng từ một số khối xây dựng cốt lõi.

Scheduler

SchedulerBinding là một lớp singleton thể hiện các nguyên thủy lập lịch trình Flutter.

Đối với vấn đề này, khóa nguyên thủy là các lệnh gọi lại khung. Mỗi khi một khung hình cần được hiển thị trên màn hình, công cụ của Flutter sẽ kích hoạt một lệnh gọi lại "khung bắt đầu" trong đó scheduler ghép nối với tất cả những trình nghe đã đăng ký sử dụng scheduleFrameCallback(). Tất cả các lần gọi lại này đều được đóng dấu thời gian chính thức của khung, dưới dạng một Duration từ một số khoảng thời gian tùy ý. Vì tất cả các lệnh callback có cùng thời gian, nên bất kỳ hoạt ảnh nào được kích hoạt từ các lệnh gọi lại này sẽ có vẻ được đồng bộ hóa chính xác ngay cả khi chúng mất vài mili giây để được thực thi.

Ticker

Lớp Ticker móc (hook) vào cơ chế scheduleFrameCallback() của scheduler để gọi một callback mỗi đánh dấu (tick).

Ticker có thể được khởi động và dừng lại. Khi khởi động, nó sẽ trả về một Future mà sẽ được giải quyết khi nó bị dừng.

Mỗi lần đánh dấu, Ticker sẽ cung cấp thời lượng callback kể từ lần đánh dấu đầu tiên sau khi nó được bắt đầu.

Bởi vì các ticker luôn cung cấp thời gian đã trôi qua của chúng so với lần đánh dấu đầu tiên sau khi chúng được bắt đầu, cho nên tất cả các ticker đều sẽ được đồng bộ hóa. Nếu bạn bắt đầu ba mã đánh dấu vào các thời điểm khác nhau giữa hai lần đánh dấu, thì tất cả chúng sẽ được đồng bộ hóa với cùng một thời điểm bắt đầu và sau đó sẽ đánh dấu vào bước khóa. Giống như những người ở trạm xe buýt, tất cả các ticker chờ một sự kiện thường xuyên xảy ra (dấu tích) để bắt đầu di chuyển (đếm thời gian).

Simulation

Lớp trừu tượng Simulation ánh xạ một giá trị thời gian tương đối (thời gian đã trôi qua) thành một giá trị kép và có khái niệm hoàn thành.

Về nguyên tắc các simulation là không trạng thái nhưng trong thực tế một số simulation (ví dụ, BouncingScrollSimulation và ClampingScrollSimulation) thay đổi trạng thái không thể đảo ngược khi được truy vấn.

Có nhiều cách triển khai cụ thể khác nhau của lớp Simulation cho các hiệu ứng khác nhau.

Animatable

Lớp trừu tượng Animatable ánh xạ một cặp thành một giá trị của một kiểu cụ thể.

Các lớp Animatable là không trạng thái và bất biến.

Tween

Lớp trừu tượng Tween<T> ánh xạ một giá trị kép về danh nghĩa trong phạm vi 0.0-1.0 tới một giá trị đã nhập (ví dụ: một Color hoặc một giá trị kép khác). Nó là một Animatable.

Nó có khái niệm về kiểu đầu ra (T), giá trị begin và giá trị end của kiểu đó và cách nội suy (lerp) giữa giá trị đầu và giá trị kết thúc cho một giá trị đầu vào nhất định (cặp trên danh nghĩa trong phạm vi 0.0-1.0).

Các lớp Tween là không trạng thái và bất biến.

Soạn hoạt ảnh

Truyền một Animatable<double> (cha) đến phương thức chain() của Animatable để tạo ra một lớp Animatable mới áp dụng ảnh xạ của cha sau đó lập bản đồ của con.

Curve

Lớp trừu tượng Curve ánh xạ các cặp về danh nghĩa trong phạm vi 0.0-1.0 thành các cặp trên danh nghĩa trong phạm vi 0.0-1.0.

Các lớp Curve là không trạng thái và bất biến.

Animation

Lớp trừu tượng Animation cung cấp một giá trị của một kiểu đã cho một khái niệm về hướng hoạt ảnh và trạng thái hoạt ảnh, và một giao diện trình nghe để đăng ký các lệnh callback được gọi khi giá trị hoặc trạng thái thay đổi.

Một số lớp con của Animation có giá trị mà không bao giờ thay đổi (kAlwaysCompleteAnimationkAlwaysDismissedAnimationAlwaysStoppedAnimation); đăng ký các lệnh callback trên những lớp con này không có tác dụng vì các lệnh gọi lại không bao giờ được gọi.

Biến thể Animation<double> là đặc biệt vì nó có thể được sử dụng để đại diện cho một cặp danh nghĩa trong khoảng 0.0-1.0, đó là đầu vào dự kiến bởi các lớp Curve và Tween, cũng như một số lớp con nữa của Animation.

Một số lớp con Animation là không trạng thái, chỉ chuyển tiếp trình nghe đến cha của chúng. Một số rất trạng thái.

Biên soạn hoạt ảnh

Hầu hết các lớp con Animation có một "cha" tường minh là Animation<double>. Chúng được định hướng bởi cha đó.

Lớp con CurvedAnimation lấy một lớp (lớp cha) Animation<double> và hai lớp Curve (các đường cong thuận và nghịch) làm đầu vào và sử dụng giá trị của lớp cha làm đầu vào cho các đường cong để xác định đầu ra của nó. CurvedAnimation là bất biến và không trạng thái.

Lớp con ReverseAnimation nhận lớp Animation<double> làm cha của nó và đảo ngược tất cả các giá trị của hoạt ảnh. Nó giả sử cha đang sử dụng một giá trị danh nghĩa trong phạm vi 0.0-1.0 và trả về một giá trị trong phạm vi 1.0-0.0. Trạng thái và hướng của hoạt ảnh gốc cũng bị đảo ngược. ReverseAnimation .à bất biến và không trạng thái.

Lớp con ProxyAnimation nhận lớp Animation<double> làm lớp cha của nó và chỉ chuyển tiếp trạng thái hiện tại của lớp cha đó. Tuy nhiên, cha có thể thay đổi.

Lớp con TrainHoppingAnimation nhận hai lớp cha và chuyển đổi giữa chúng khi giá trị của chúng giao nhau.

Bộ điều khiển hoạt ảnh

AnimationController là một trạng thái Animation<double> trong đó sử dụng một Ticker để cung cấp cho chính nó sự sống. Nó có thể được bắt đầu và dừng lại. Tại mỗi lần đánh dấu, cần thời gian trôi qua kể từ khi nó được bắt đầu và chuyển nó cho a Simulation để nhận được một giá trị. Đó là giá trị nó báo cáo. Nếu các Simulation báo cáo rằng tại thời điểm đó nó đã kết thúc, thì bộ điều khiển sẽ tự dừng lại.

Bộ điều khiển hoạt ảnh có thể được cung cấp giới hạn dưới và trên để tạo hoạt ảnh giữa và một thời lượng.

Trong trường hợp đơn giản (sử dụng forward()reverse()play(), hay resume()), bộ điều khiển hoạt ảnh đơn giản làm một phép nội suy tuyến tính từ phía dưới buộc phía trên phải ràng buộc (hoặc ngược lại, đối với hướng ngược lại) trong khoảng thời gian nhất định.

Khi sử dụng repeat(), bộ điều khiển hoạt ảnh sử dụng nội suy tuyến tính giữa các giới hạn đã cho trong khoảng thời gian nhất định, nhưng không dừng lại.

Khi sử dụng animateTo(), bộ điều khiển hoạt ảnh thực hiện nội suy tuyến tính trong khoảng thời gian nhất định từ giá trị hiện tại đến mục tiêu đã cho. Nếu không có thời lượng nào được cung cấp cho phương thức, thời lượng mặc định của bộ điều khiển và phạm vi được mô tả bởi giới hạn dưới và giới hạn trên của bộ điều khiển được sử dụng để xác định tốc độ của hoạt ảnh.

Khi sử dụng fling(), Force được sử dụng để tạo một mô phỏng cụ thể sau đó được sử dụng để điều khiển bộ điều khiển.

Khi sử dụng animateWith(), mô phỏng đã cho được sử dụng để điều khiển bộ điều khiển.

Tất cả các phương thức này đều trả về tương lai mà Ticker cung cấp và sẽ giải quyết khi bộ điều khiển dừng hoặc thay đổi mô phỏng tiếp theo.

Đính kèm hoạt ảnh vào hoạt ảnh

Việc chuyển một Animation<double> (cha mới) vào phương thức Animatable của một animate() sẽ tạo ra một lớp con Animation mới hoạt động giống như lớp Animatable nhưng được điều khiển từ lớp cha đã cho.

Nguồn: flutter.dev
» Tiếp: Hướng dẫn Animation
« Trước: Giới thiệu về Hoạt ảnh (Animation)
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!