Flutter自定义动画

import 'package:flutter/material.dart';

class transitionDemo extends StatefulWidget {
  @override
  _transitionDemoState createState() => _transitionDemoState();
}

class _transitionDemoState extends State<transitionDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    // TODO: implement initState
    _controller =
        AnimationController(duration: Duration(seconds: 1), vsync: this)
          ..repeat();
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SlideDemo();
  }
}

//位置
class SlideDemo extends StatefulWidget {
  @override
  _slideDemoState createState() => _slideDemoState();
}

class _slideDemoState extends State<SlideDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller =
        AnimationController(duration: Duration(seconds: 1), vsync: this)
          ..repeat(reverse: true);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    final Animation opacityAnimation = Tween(begin:0.0,end: 0.8).animate(_controller);//第一种写法
    final Animation containerAnimation=Tween(begin: 200.0,end: 400.0).animate(_controller);
    return Material(
      child: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context,child){
            return Opacity(
              opacity: opacityAnimation.value,
              child: Container(
                width: 400,
                height: Tween(begin: 200.0,end: 400.0).evaluate(_controller),//第二种写法
                //_controller.value*300, 第三种写法
                color: Colors.blue,
                child: Center(child: Text('Hello',style: TextStyle(color: Colors.black54,fontSize: 40,fontWeight: FontWeight.bold),)),
              ),
            );
          },
        ),
      )
    );
  }
}



猜你喜欢

转载自blog.csdn.net/qq_42572245/article/details/107207567