Flutter 页面动画逐一加载

Flutter 页面入场动画

Installing

Add this to your package's pubspec.yaml file:

dependencies:
  animation_page: ^0.0.1

Custom

@override
buildTransform(Animation animation) {
    return Matrix4.translationValues( 50 * (1.0 - animation.value), 50 * (1.0 - animation.value), 0.0);
}

Example

demo code

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage>
    with TickerProviderStateMixin, AnimationPageMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: animationPageDuration, vsync: this);
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: initAnimation(widgetList, controller),
      ),
    );
  }

  List<Widget> widgetList = [
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 200,
        child: RaisedButton(
          onPressed: () {},
          color: Colors.blue,
          child: Icon(Icons.add, size: 50,),
        ),
      ),
    ),
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        color: Colors.red,
        child: Image.asset(
          'assets/eat_cape_town_sm.jpg',
          height: 200,
        ),
      ),
    ),
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 200,
        color: Colors.green,
        child: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 30
            ),
          ),
        ),
      ),
    ),
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 200,
        color: Colors.pink,
      ),
    ),
  ];
}

example 1

@override
buildTransform(Animation animation) {
    return Matrix4.translationValues( 20 * (1.0 - animation.value), 20 * (1.0 - animation.value), 0.0);
}

example 2

@override
buildTransform(Animation animation) {
    return Matrix4.translationValues( 30 * (1.0 - animation.value), 0, 0.0);
}

example 3

@override
buildTransform(Animation animation) {
    return Matrix4.translationValues( 0, 30 * (1.0 - animation.value), 0.0);
}

example 4

@override
buildTransform(Animation animation) {
    return Matrix4.translationValues( 0, -30 * (1.0 - animation.value), 0.0);
}