Flutter Animation实现缩放和滑动动画效果

Gilana ·

更新时间:2024-11-10

· 1820 次阅读

本文实例为大家分享了Flutter Animation实现缩放和滑动动画的具体代码，供大家参考，具体内容如下

Animation对象是Flutter动画库中的一个核心类，它生成指导动画的值。
Animation对象知道动画的当前状态（例如，它是开始、停止还是向前或向后移动），但它不知道屏幕上显示的内容。
AnimationController管理Animation。
CurvedAnimation 将过程抽象为一个非线性曲线.
Tween在正在执行动画的对象所使用的数据范围之间生成值。例如，Tween可能会生成从红到蓝之间的色值，或者从0到255。
使用Listeners和StatusListeners监听动画状态改变。

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(new LogoApp());
}
class LogoApp extends StatefulWidget {
  _LogoAppState createState() => new _LogoAppState();
}
class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 10000), vsync: this);
    animation = new Tween(begin: 0.0, end: 300.0).animate(controller);
    controller.forward();
  }
  Widget build(BuildContext context) {
    return new AnimatedLogo(animation: animation);
  }
  dispose() {
    controller.dispose();
    super.dispose();
  }
}
class AnimatedLogo extends AnimatedWidget {
  AnimatedLogo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return new Center(
      child: new Container(
        margin: new EdgeInsets.symmetric(vertical: 10.0),
        height: animation.value,
        width: animation.value,
        child: new FlutterLogo(),
      ),
    );
  }
}

缩放功能

class ScaleAnimatedContent extends StatefulWidget {
  final Widget child;
  final bool show;
  const ScaleAnimatedContent({Key key, this.child, this.show = false})
      : super(key: key);
  @override
  ScaleAnimatedContentState createState() => ScaleAnimatedContentState();
}
class ScaleAnimatedContentState extends State<ScaleAnimatedContent>
    with TickerProviderStateMixin {
  AnimationController animationController;
  Animation<double> animation;
  @override
  void initState() {
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(milliseconds: 600),
    );
    // animationSlideUp = new Tween(begin: 0.0,end: 1.0).animate(animationController);
    animation = Tween(begin: 0.0, end: 1.0).animate(animationController);
    if (widget.show) {
      animationController.forward();
    }
    super.initState();
  }
  @override
  void didUpdateWidget(ScaleAnimatedContent oldWidget) {
    if (widget != oldWidget) {
      if (widget.show && !oldWidget.show) {
        animationController.forward(from: 0.0);
      } else if (!widget.show) {
        animationController.reverse();
      }
    }
    super.didUpdateWidget(oldWidget);
  }
  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: animation,
      child: widget.child,
    );
  }
  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }
}

滑动效果

class SlideAnimatedContent extends StatefulWidget {
  final Widget child;
  final bool show;
  const SlideAnimatedContent({Key key, this.child, this.show = false})
      : super(key: key);
  @override
  SlideAnimatedContentState createState() => SlideAnimatedContentState();
}
class SlideAnimatedContentState extends State<SlideAnimatedContent>
    with TickerProviderStateMixin {
  AnimationController animationController;
  Animation<Offset> animationSlideUp;
  @override
  void initState() {
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(milliseconds: 600),
    );
    animationSlideUp = new Tween(
      begin: Offset(0.0, 5.0),
      end: Offset(0.0, 0.0),
    ).animate(CurvedAnimation(parent: animationController, curve: Curves.ease));
    if (widget.show) {
      animationController.forward();
    }
    super.initState();
  }
  @override
  void didUpdateWidget(SlideAnimatedContent oldWidget) {
    if (widget != oldWidget) {
      if (widget.show && !oldWidget.show) {
        animationController.forward(from: 0.0);
      } else if (!widget.show) {
        animationController.reverse();
      }
    }
    super.didUpdateWidget(oldWidget);
  }
  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: animationSlideUp,
      child: FadeTransition(
        opacity: animationController,
        child: widget.child,
      ),
    );
  }
  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }
}

flutter animation 动画

1024 个赞