flutter - CurvedAnimation动画
flutter - CurvedAnimation动画
·
flutter - CurvedAnimation动画
import 'package:flutter/material.dart';
/**
* Author : wn
* Email : maoning20080808@163.com
* Date : 2025/6/20 23:41
* Description : 非常有用的动画类,它允许你为动画应用非线性曲线,使动画效果更加自然和生动。
Flutter 提供了多种预定义的曲线:
Curves.linear - 线性动画(默认)
Curves.easeIn - 开始慢,加速
Curves.easeOut - 开始快,减速
Curves.easeInOut - 开始和结束都慢
Curves.bounceIn - 弹跳进入效果
Curves.bounceOut - 弹跳退出效果
Curves.elasticIn - 弹性进入效果
Curves.elasticOut - 弹性退出效果
Curves.fastOutSlowIn - 快速开始,缓慢结束(Material Design 推荐)
*/
class CurvedAnimationWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "CurvedAnimation动画",
home: Scaffold(
appBar: AppBar(
title: Text("CurvedAnimation动画title"),
),
body: _CurvedAnimationDemo(),
),
);
}
}
class _CurvedAnimationDemo extends StatefulWidget {
@override
State<_CurvedAnimationDemo> createState() => _CurvedAnimationState();
}
class _CurvedAnimationState extends State<_CurvedAnimationDemo> with SingleTickerProviderStateMixin{
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this
)..repeat(reverse: true);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.bounceIn
);
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation,
builder: (context, child){
return Center(
child: Container(
width: 100 + 100 * _animation.value,
height: 100 + 100 * _animation.value,
color: Colors.blue,
),
);
}
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}
更多推荐


所有评论(0)