В этом блоге мы рассмотрим анимацию во флаттере. Мы бы рассмотрели различные типы анимации и реализовали базовую анимацию во флаттере, используя какой-то конкретный встроенный виджет.
Содержание:
Вступление
Типы анимации
Неявная анимация
Эффект постепенного появления
Заключение
Введение
Анимация играет жизненно важную роль в улучшении взаимодействия с пользователем вашего приложения. Но что такое анимация? Анимация означает показ серии изображений, одно за другим, в заданный промежуток времени. Flutter поставляется с богатым набором готовых к использованию виджетов анимации.
А теперь давайте погрузимся в мир флаттер-анимации. В основном есть два типа анимации во флаттере:
- Анимация на основе рисования
- Кодовые анимации
Когда мы хотим, чтобы наша анимация выглядела как рисунок, мы выбираем Анимация на основе рисунка. В основном анимация на основе рисования выглядит так, как будто ее кто-то рисует.
Теперь давайте посмотрим на анимацию на основе кода…
Анимации на основе кода ориентированы на виджеты и основаны на стандартных примитивах макета и стиля, таких как строки, столбцы, цвета или стили текста. Если вы хотите включить свою анимацию в эти типы виджетов, то анимация на основе кода - идеальный выбор.
Анимация на основе кода - это чистый вид флаттер-анимации, который бывает двух типов:
- Неявная анимация
- Явная анимация
Неявная анимация
С помощью библиотеки анимации Flutter вы можете добавлять движение и создавать визуальные эффекты для виджетов в вашем пользовательском интерфейсе. Один виджет, установленный в библиотеке, управляет анимацией за вас. Эти виджеты вместе называются неявной анимацией или неявно анимированными виджетами, унаследовав свое имя от класса ImplicitlyAnimatedWidget, который они реализуют.
Эффект постепенного появления
Самым простым примером неявной анимации является эффект постепенного появления. Вы можете использовать AnimatedOpacity для анимации непрозрачности и добавления неявной анимации в простой стартовый код постепенного появления.
Это наш стартовый код эффекта постепенного появления.
import ‘package:flutter/material.dart’;
const owl_url = ‘https://raw.githubusercontent.com/flutter/website/master/src/images/owl.jpg';
class FadeInDemo extends StatefulWidget {
_FadeInDemoState createState() => _FadeInDemoState();
}
class _FadeInDemoState extends State<FadeInDemo> {
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Image.network(owl_url),
RaisedButton(
child: Text(
‘Show details’,
style: TextStyle(color: Colors.blueAccent),
),
onPressed: () => null),
Container(
child: Column(
children: <Widget>[
Text(‘Type: Owl’),
Text(‘Age: 39’),
Text(‘Employment: None’), ], ), ) ]); }}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: FadeInDemo(), ), ), ); }}
void main() {
runApp(
MyApp(),
);
}
Теперь мы добавим в него неявную анимацию с помощью виджета AnimatedOpacity. Так рада изменить ваше простое постепенное появление на анимированное !!
Мы выполним несколько простых шагов, чтобы превратить стартовый код в анимированный.
- Измените виджет контейнера на виджет AnimatedOpacity
2. Инициализировать переменную состояния для анимированного свойства.
3. Установите начальное значение непрозрачности = 0, прежде чем нажимать кнопку
4. Установите конечное значение непрозрачности после нажатия кнопки.
5. Установите продолжительность анимации.
import ‘package:flutter/material.dart’; const owl_url = ‘https://raw.githubusercontent.com/flutter/website/master/src/images/owl.jpg'; class FadeInDemo extends StatefulWidget { _FadeInDemoState createState() => _FadeInDemoState(); } class _FadeInDemoState extends State<FadeInDemo> { double opacityLevel = 0.0; @override Widget build(BuildContext context) { return Column(children: <Widget>[ Image.network(owl_url), RaisedButton( child: Text( ‘Show details’, style: TextStyle(color: Colors.blueAccent), ), onPressed: () => setState(() { opacityLevel = 1.0; }), ), AnimatedOpacity( duration: Duration(seconds: 3), opacity: opacityLevel, child: Column( children: <Widget>[ Text(‘Type: Owl’), Text(‘Age: 39’), Text(‘Employment: None’), ], ), ) ]); }} class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: FadeInDemo(),), ), ); }} void main() { runApp( MyApp(), ); }
Заключение:
Вот это эффект Fade-In с особенностями AnimatedOpacity. Вы можете запустить его и проверить разницу между начальным кодом нарастания и нарастанием с неявной анимацией.
Надеюсь, этот блог поможет вам и даст представление об анимации во Flutter. Спасибо, что прочитали! Если есть какая-то ошибка, дайте мне знать в комментариях, чтобы я мог улучшить. Хлопайте 👏, если этот блог вам поможет!
