Flutter Animation Code Sample (5)

多个Tween同时使用,一边修改控件的大小,一边修改控件的透明度。 同时还有变化的曲线。


import 'package:flutter/material.dart';

void main(List<String> args) {

  runApp(const LogoApp());

}

class AnimatedLogo extends AnimatedWidget {

  AnimatedLogo({super.key, required super.listenable});

  final opacityTween = Tween<double>(begin: 0.1, end: 1.0);

  final sizeTween = Tween<double>(begin: 0, end: 300);

  @override

  Widget build(BuildContext context) {

    final animation = listenable as Animation<double>;

    return Center(

      child: Opacity(

        opacity: opacityTween.evaluate(animation),

        child: Container(

          margin: const EdgeInsets.symmetric(vertical: 10),

          height: sizeTween.evaluate(animation),

          width: sizeTween.evaluate(animation),

          child: const FlutterLogo(),

        ),

      ),

    );

  }

}

class LogoApp extends StatefulWidget {

  const LogoApp({super.key});

  @override

  State<LogoApp> createState() => _LogoAppState();

}

class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {

  late AnimationController controller;

  late Animation animation;

  @override

  void initState() {

    controller = AnimationController(

      vsync: this,

      duration: const Duration(seconds: 3),

    );

    animation = CurvedAnimation(parent: controller, curve: Curves.easeIn)

      ..addStatusListener((status) {

        if (status == AnimationStatus.completed) {

          controller.reverse();

        } else if (status == AnimationStatus.dismissed) {

          controller.forward();

        }

      });

    controller.forward();

    super.initState();

  }

  @override

  void dispose() {

    controller.dispose();

    super.dispose();

  }

  @override

  Widget build(BuildContext context) => AnimatedLogo(listenable: animation);

}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容