flutter 动画示例

复制代码
import 'package:flutter/material.dart';
import 'state/animationcs.dart';

void main() => runApp(new MainApp());

class MainApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
//      title: 'Main App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnimationCs(),
    );
  }
}
复制代码
复制代码
import 'package:flutter/material.dart';

class AnimationCs extends StatefulWidget {
  @override
  _AnimationCsState createState() => new _AnimationCsState();
}

class _AnimationCsState extends State<AnimationCs>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _bigerAnimation;
  Animation<double> _bigerToCurveAnimation;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container(
        child: new Center(
//          child: new Text(_controller.value.toString().substring(0, 3)),
          child: ListView(children: <Widget>[
            new Text((_bigerAnimation.value*100).round().toString()),
            new Text((_bigerToCurveAnimation.value*100).round().toString())
              ],
            ),
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((AnimationStatus status) {
        if (status == AnimationStatus.completed) {
          print('AnimationStatus.completed');
          _controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          print('AnimationStatus.dismissed');
          _controller.forward();
        } else {}
      });
  ///主要是拿到 不同方式产生的 value 用于产生不同的ui效果, 这个 Tween 可用于 0.0-1.0 之间的分段用 
    _bigerAnimation = new Tween(begin: 0.0, end: 1.0).animate(_controller);
    _bigerToCurveAnimation = new CurveTween(curve: Curves.elasticInOut).animate(_bigerAnimation);

    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
复制代码

直接 AS 创建个 flutter 项目 放入这两个文件玩玩

参考 : https://www.didierboelens.com/2018/06/animations-in-flutter---easy-guide---tutorial/

参考自己 : https://www.cnblogs.com/LiuPan2016/p/8989823.html

posted on   --LP--  阅读(989)  评论(0编辑  收藏  举报

(评论功能已被禁用)
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示