无拘无束的自由律动，Flutter 滚动动画焕新视觉之旅

2023-12-24 17:59:27

滚动动画的魅力

滚动动画，这一伴随用户手指在屏幕上滑动而产生的动态变化，其魅力在于：

增强用户体验：让应用操作更加流畅自然，仿佛与用户实时互动。
提升视觉效果：精心设计的动画为应用增添美感，吸引用户注意。
增强交互性：通过动画吸引用户参与，提高用户参与度。

打造滚动动画之旅

1. 最简单的滚动动画：平移动画

平移动画是滚动动画的基础，可通过 AnimatedList 在 ListView 或 GridView 中实现。以下是一个简单的示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 滚动动画')),
        body: Center(child: MyScrollingAnimation()),
      ),
    );
  }
}

class MyScrollingAnimation extends StatefulWidget {
  @override
  _MyScrollingAnimationState createState() => _MyScrollingAnimationState();
}

class _MyScrollingAnimationState extends State<MyScrollingAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(_animation.value * 100, 0),
          child: child,
        );
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

2. 缩放动画

缩放动画可用于突出元素或营造戏剧性效果。使用 AnimatedScale 可轻松实现：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 滚动动画')),
        body: Center(child: MyScrollingAnimation()),
      ),
    );
  }
}

class MyScrollingAnimation extends StatefulWidget {
  @override
  _MyScrollingAnimationState createState() => _MyScrollingAnimationState();
}

class _MyScrollingAnimationState extends State<MyScrollingAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    _animation = Tween<double>(begin: 1, end: 0).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.scale(
          scale: _animation.value,
          child: child,
        );
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

3. 旋转动画

旋转动画为用户带来新鲜感。使用 AnimatedRotation 可实现：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 滚动动画')),
        body: Center(child: MyScrollingAnimation()),
      ),
    );
  }
}

class MyScrollingAnimation extends StatefulWidget {
  @override
  _MyScrollingAnimationState createState() => _MyScrollingAnimationState();
}

class _MyScrollingAnimationState extends State<MyScrollingAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.rotate(
          angle: _animation.value * 360,
          child: child,
        );
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

4. 组合动画

组合动画可实现更复杂的视觉效果。例如，结合平移和缩放：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 滚动动画')),
        body: Center(child: MyScrollingAnimation()),
      ),
    );
  }
}

class MyScrollingAnimation extends StatefulWidget {
  @override
  _MyScrollingAnimationState createState() => _MyScrollingAnimationState();
}

class _MyScrollingAnimationState extends State<MyScrollingAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(_animation.value * 100, 0),
          child: Transform.scale(
            scale: _animation.value,
            child: child,
          ),
        );
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}