当前位置: 首页 > 工具软件 > Tween > 使用案例 >

Flutter动画Tween和曲线

常雅珺
2023-12-01
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 ScaleDemo();
  }
}

//大小
class ScaleDemo extends StatefulWidget {
  @override
  _ScaleDemoState createState() => _ScaleDemoState();
}

class _ScaleDemoState extends State<ScaleDemo> 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) {
    return Center(
      child: ScaleTransition(
        scale: Tween(begin: 0.1,end: 2.0).animate(_controller),
        //_controller.drive(Tween(begin: 0.1,end: 2)),
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
      ),
    );
  }
}

//位置
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) {
    return  Center(
      child: SlideTransition(
        position: Tween(begin: Offset(0,0),end: Offset(0,1))
            .chain(CurveTween(curve: Curves.bounceInOut))//曲线特征
            .chain(CurveTween(curve: Interval(0,0.5)))//在一半的时间完成,接下来停住
            .animate(_controller),
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
      ),
    );
  }
}


 类似资料: