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();
  }
}

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐