本文是关于 Flutter 中的 AnimatedOpacity 小部件。
作者：坚果 华为云享专家，InfoQ签约作者，OpenHarmony布道师，电子发烧友鸿蒙MVP，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。
前言
顾名思义，AnimatedOpacity的目的是在给定的持续时间内为其子项的不透明度设置动画：
代码语言：javascript复制AnimatedOpacity({
Key? key,
Widget? child,
required double opacity,
Curve curve = Curves.linear,
required Duration duration,
VoidCallback? onEnd,
bool alwaysIncludeSemantics = false
})
您可以使用曲线属性控制动画随时间变化的速率。在以下示例中，我们将使用：
- Curves.easeInOut：开始缓慢，加速，然后缓慢结束
- Curves.bounceInOut：幅度先增大后缩小
- Curves.elasticInOut：在超出范围时增长然后缩小
完整的例子
预览
image-20220519081942888
我们要构建的示例应用程序有一个浮动按钮。第一次按下此按钮时，图片、琥珀色框和绿色框将从不可见变为完全可见。当第二次按下浮动按钮时，这些东西会从可见变为不可见。请注意，每个都有不同的动画曲线
编码
代码语言：javascript复制// main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: '大前端之旅',
theme: ThemeData(
primarySwatch: Colors.indigo,
),
home: const HomePage());
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
HomePageState createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
// the opacity
double _opacity = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("大前端之旅"),
),
body: Column(
children: [
// Using Curves.easeInOut
AnimatedOpacity(
duration: const Duration(seconds: 3),
curve: Curves.easeInOut,
opacity: _opacity,
child: Image.network(
"https://luckly007.oss-cn-beijing.aliyuncs.com/macimages/image-20220519080840931.png",
fit: BoxFit.cover,
width: 300,
height: 300,
),
),
// Using Curves.bounceIn
AnimatedOpacity(
duration: const Duration(seconds: 3),
curve: Curves.bounceInOut,
opacity: _opacity,
child: Container(
width: double.infinity,
height: 200,
color: Colors.amber,
child: const Center(
child: Text(
'DY',
style: TextStyle(fontSize: 40, color: Colors.black),
),
),
)),
// Using Curves.elasticInOut
Expanded(
child: AnimatedOpacity(
duration: const Duration(seconds: 3),
curve: Curves.elasticInOut,
opacity: _opacity,
child: Container(
width: double.infinity,
color: Colors.green,
child: const Center(
child: Text(
'JG',
style: TextStyle(fontSize: 40, color: Colors.white),
),
),
)),
),
],
),
// this button is used to trigger the transition
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
setState(() {
_opacity = _opacity == 0 ? 1 : 0;
});
},
label: Text(_opacity == 0 ? 'Show' : 'Hide'),
));
}
}
参考
- 不透明度（维基百科）
- AnimatedOpacity 类(flutter.dev)
- 曲线类(flutter.dev)
- 曲线类(flutter.dev)
后记
我们在本文使用 了AnimatedOpacity 。它使小部件的外观或离开更加自然和美丽。
