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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM