Flutter animation basics with implicit animations

 

Trong loạt bài đăng này, chúng tôi sẽ giới thiệu với bạn về hoạt ảnh trong Flutter và hướng

dẫn bạn cách tạo cả hoạt ảnh đơn giản và phức tạp cho ứng dụng Flutter của bạn.

Trong bài đăng đầu tiên này, chúng tôi sẽ tập trung vào cách đơn giản nhất để thêm hoạt ảnh vào ứng dụng của bạn. Bạn không cần phải là một chuyên gia về hoạt ảnh hoặc thuật ngữ hoạt ảnh để thêm hoạt ảnh vào ứng dụng của mình. Đồng thời, chúng tôi sẽ giới thiệu một số tiện ích và thuật ngữ sẽ giúp bạn bắt đầu với hoạt ảnh ngay lập tức và cung cấp cho bạn một số thông tin cơ bản cho phần còn lại của các bài đăng trong chuỗi.

1. Implicitly animated widgets

Flutter bao gồm một loạt tiện ích con là phiên bản động của các tiện ích con hiện có mà bạn có thể đã sử dụng trong ứng dụng của mình, chẳng hạn như phiên bản AnimatedContainer của tiện ích con Container và phiên bản AnimatedPositioned của tiện ích Positioned.

Các widget này tự động tạo hoạt ảnh cho các thay đổi đối với thuộc tính của chúng. Khi bạn xây dựng lại tiện ích con với các giá trị thuộc tính mới, chẳng hạn như với setState của StatefulWidget, tiện ích con sẽ xử lý việc điều khiển hoạt ảnh từ giá trị trước đó sang giá trị mới.

Các widget này được gọi là Implicitly Animated Widgets. Chúng thường là thứ đầu tiên bạn

tiếp cận khi cần thêm hoạt ảnh vào ứng dụng của mình. Chúng cung cấp một cách để

thêm hình ảnh động mà không làm tăng thêm độ phức tạp.

2. The AnimatedContainer widget

Hãy xem xét kỹ hơn một chút về cách bạn có thể sử dụng một trong những tiện ích con hoạt hình ngầm này để thêm một số hoạt ảnh vào ứng dụng của mình.

Trong ứng dụng này, có một vùng chứa và một nút. Khi nhấn nút, setState được gọi và vùng chứa được tạo lại với giá trị mới cho chiều rộng. Lưu ý rằng vùng chứa thay đổi chiều rộng của nó ngay lập tức mà không có bất kỳ hoạt ảnh nào.

@override

Widget build(BuildContext context) {

return Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Container(

width: _bigger ? 100 : 500,

child: Image.asset('assets/star.png'),

),

RaisedButton(

onPressed: () => setState(() {

_bigger = !_bigger;

}),

child: Icon(Icons.star),

),

],

);

}

Chúng ta có thể thêm một số hoạt ảnh vào ứng dụng này bằng cách chuyển tiện ích Container thành tiện ích AnimatedContainer và chỉ định thời lượng hoạt ảnh.

AnimatedContainer(

width: _bigger ? 100 : 500,

child: Image.asset('assets/star.png'),

duration: Duration(seconds: 1),

),

Bây giờ, khi nút được nhấn, container chuyển dần từ giá trị chiều rộng trước đó sang giá trị mới.

Quá trình chuyển động thông qua các giá trị giữa giá trị cũ và giá trị mới được gọi là interpolation. AnimatedContainer xử lý nội suy các thuộc tính của nó giữa các giá trị cũ và mới bất cứ khi nào chúng thay đổi.

Điều này áp dụng cho tất cả các thuộc tính của AnimatedContainer, bao gồm, ví dụ: decoration. Chúng ta có thể sửa đổi gradient trong một trang trí và AnimatedContainer xử lý nội suy giữa gradient cũ và mới:

AnimatedContainer(

decoration: BoxDecoration(

gradient: RadialGradient(

colors: [Colors.purple, Colors.transparent],

stops: [ _bigger ? 0.2 : 0.5, 1.0])

),

),

3. Controlling the animation with duration and curves

Các tiện ích con hoạt ảnh ngầm như AnimatedContainer có hai thuộc tính mà bạn có thể sử dụng để kiểm soát hành vi của hoạt ảnh. Bạn có thể kiểm soát khoảng thời gian cần thiết để nội suy thành giá trị mới bằng cách đặt duration ​property..

AnimatedContainer(

width: _bigger ? 100 : 500,

child: Image.asset('assets/star.png'),

duration: Duration(seconds: 5),

),

Trong ví dụ này, chúng tôi đã làm cho hoạt ảnh mất nhiều thời gian hơn.

Bạn cũng có thể kiểm soát cách tiện ích con nội suy từ giá trị cũ sang giá trị mới bằng cách sử dụng Curve. Các đường cong kiểm soát tốc độ thay đổi theo thời gian và có thể giúp hoạt ảnh của bạn cảm thấy thực tế hơn. Trong ví dụ này, chúng tôi đã thay đổi đường cong từ đường cong tuyến tính mặc định thành đường cong ngũ vị phóng đại hơn:

AnimatedContainer(

width: _bigger ? 100 : 500,

child: Image.asset('assets/star.png'),

duration: Duration(seconds: 1),

curve: Curves.easeInOutQuint,

),

Có nhiều built-in Curves sẵn khác nhau để mang lại cho hình ảnh động của bạn một chút đặc trưng và bạn cũng có thể xác định các đường cong tùy chỉnh của riêng mình. Các đường cong thậm chí có thể không liên tục, như SawTooth curve.

Dưới đây là một ví dụ về đường cong tùy chỉnh được gọi là SineCurve sử dụng hàm sin để tạo đường cong bị trả lại:

class SineCurve extends Curve {

final double count;

SineCurve({this.count = 1});

@override

double transformInternal(double t) {

return sin(count * 2 * pi * t) * 0.5 + 0.5;

}

}

Ở đây, SineCurve làm cho ngôi sao nảy lên và xuống:

4. To recap

Flutter cung cấp các widget động ngầm là các phiên bản động của các widget thông thường. Bạn có thể kiểm soát cách các widget này tạo hoạt ảnh bằng cách sử dụng thời lượng và đường cong.

AnimatedContainer là một widget hoạt hình ngầm mạnh mẽ đáng chú ý vì nó có nhiều thuộc tính ảnh hưởng đến sự xuất hiện của nó và tất cả chúng đều được nội suy tự động.

Tất cả các widget hoạt ảnh ngầm khác cũng là những tùy chọn mạnh mẽ, dễ sử dụng để thêm hoạt ảnh mà không cần thêm nhiều phức tạp.

Ngoài ra, bạn không nhất thiết phải đặt các tiện ích này vào Stateful Widget và sử dụng setState, bạn có thể sử dụng StreamBuilder và FutureBuilder để kích hoạt các hoạt ảnh như trong ví dụ này.

5. Digging deeper into animations

Tuy nhiên, các tiện ích con hoạt hình hoàn toàn là lựa chọn đầu tiên của bạn để thêm hoạt ảnh, tuy nhiên, đây không phải là tất cả những gì mà hệ thống hoạt ảnh của Flutter cung cấp. Trong phần còn lại của loạt bài này, chúng tôi khám phá các lớp thấp hơn của hệ thống hoạt ảnh Flutter và chỉ cho bạn cách bạn có thể tạo hoạt ảnh nâng cao bằng cách sử dụng trực tiếp hệ thống hoạt ảnh.

Đối với mọi thứ khác, hãy truy cập flut.dev.