animation - 如何自动启动动画图标

Question

我的应用程序有一个有状态的小部件，它是配置文件区域，我想显示一个动画图标，向用户指示可以滚动屏幕，我想使用动画图标，如何在配置文件后自动为 AnimatedIcon 设置动画屏幕加载，谢谢。

Obs.: Theplay_pause只是一个动画图标的占位符

import 'package:flutter/material.dart';

void main() {
  runApp(Profile());
}

class Profile extends StatefulWidget {
  @override
  ProfileState createState() {
    return ProfileState();
  }
}

class ProfileState extends State<Profile> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: AnimatedIcon(
            progress: AnimationController(
              vsync: this,
              duration: Duration(milliseconds: 400),
              reverseDuration: Duration(milliseconds: 400),
            ),
            icon: AnimatedIcons.play_pause,
          ),
        )
      )
   );
  }
}

标签： animationflutter

Answer 1

您必须创建一个实例AnimationController并在initState. animateTo然后你可以通过调用方法来启动动画。

import 'package:flutter/material.dart';

void main() {
  runApp(Profile());
}

class Profile extends StatefulWidget {
  @override
  ProfileState createState() {
    return ProfileState();
  }
}

class ProfileState extends State<Profile> with TickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 400),
    );
    _animationController.animateTo(1.0);
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: AnimatedIcon(
            progress: _animationController,
            icon: AnimatedIcons.play_pause,
          ),
        ),
      ),
    );
  }
}