Flutter开发——动画封装类AnimatedBuilder

最新推荐文章于 2024-11-20 16:29:55 发布

原创

最新推荐文章于 2024-11-20 16:29:55 发布 · 794 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

在Flutter项目中，AnimatedBuilder可以帮助我们减少重复代码，实现动画与组件的解耦。文章通过一个Logo放大-缩小的无限循环动画例子，展示了如何使用AnimatedBuilder，以及其与AnimatedWidget、AnimationController和Tween的配合使用。此外，还提到Flutter提供了许多基于AnimatedBuilder的内置动画类。

在实际项目中，往往会有很多个动画集于一个界面，这时候如果每个界面都实现一遍动画，会出现很多重复代码。那么，Animatedbuilder就可以解决此类问题了。

AnimatedBuilder类继承AnimatedWidget类，所以它可以直接作为一个组件来使用。
AnimatedBuilder不需要知道如何渲染组件的，也不需要知道如何管理动画对象，只需调用build。
使用AnimatedBuilder来实现Logo放大–>缩小无限循环的动画。代码如下：

import 'package:flutter/material.dart';

class AnimatedBuilderPage extends StatefulWidget {
   
   
  final String title;
  const AnimatedBuilderPage({
   
   Key? key, required this.title}) : super(key: key);

  @override
  State<AnimatedBuilderPage> createState() => _AnimatedBuilderPageState();
}

class _AnimatedBuilderPageState extends State<AnimatedBuilderPage>
    with SingleTickerProviderStateMixin {
   
   
  Animation<