flutter系列之:使用AnimationController来控制动画效果

简介: 之前我们提到了flutter提供了比较简单好用的AnimatedContainer和SlideTransition来进行一些简单的动画效果,但是要完全实现自定义的复杂的动画效果,还是要使用AnimationController。今天我们来尝试使用AnimationController来实现一个拖拽图片,然后返回原点的动画。

简介

之前我们提到了flutter提供了比较简单好用的AnimatedContainer和SlideTransition来进行一些简单的动画效果,但是要完全实现自定义的复杂的动画效果,还是要使用AnimationController。

今天我们来尝试使用AnimationController来实现一个拖拽图片,然后返回原点的动画。

构建一个要动画的widget

在本文的例子中,我们希望能够让一个图片可以实现拖拽然后自动返回原来位置的效果。

为了实现这个功能,我们首先构建一个放在界面中间的图片。

child: Align(
        alignment: Alignment.center,
        child: Card(
          child: Image(image: AssetImage('images/head.jpg'))
        ),
      )

这里使用了Align组件,将一个图片对象放在界面中间。

接下来我们希望这个widget可以拖拽,那么把这个child放到一个GestureDetector中,这样就可以相应拖拽对应的响应。

Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          _animateAlign += Alignment(
            details.delta.dx / (size.width / 2),
            details.delta.dy / (size.height / 2),
          );
        });
      },
      child: Align(
        alignment: _animateAlign,
        child: Card(
          child: widget.child,
        ),
      ),
    );
  }

为了能实现拖动的效果,我们需要在GestureDetector的onPanUpdate方法中对Align的位置进行修改,所以我们需要调用setState方法。

在setState方法中,我们根据手势的位置来调整Alignment的位置,所以这里需要用到MediaQuery来获取屏幕的大小。

但是现在实现的效果是图像随手势移动而移动,我们还需要实现在手放开之后,图像自动回复到原来位置的动画效果。

让图像动起来

因为这次需要变动的是Alignment,所以我们先定义一个包含Alignment的Animation属性:

late Animation<Alignment> _animation;

接下来我们需要定义一个AnimationController,用来控制动画信息,并且指定我们需要的动画起点和终点:

late AnimationController _controller;
      _animation = _controller.drive(
      AlignmentTween(
        begin: _animateAlign,
        end: Alignment.center,
      ),
    );

我们动画的起点位置就是当前image所在的Alignment,终点就在Alignment.center。

Alignment有一个专门表示位置信息的类叫做AlignmentTween,如上代码所示。

有了起点和终点, 我们还需要指定从起点移动到终点的方式,这里模拟使用弹簧效果,所以使用SpringSimulation。

SpringSimulation需要提供对spring的描述,起点距离,结束距离和初始速度。

const spring = SpringDescription(
      mass: 30,
      stiffness: 1,
      damping: 1,
    );
    final simulation = SpringSimulation(spring, 0, 1, -1);

我们使用上面创建的simulation,来实现动画:

_controller.animateWith(simulation);

最后我们需要在手势结束的时候来执行这个动画即可:

onPanEnd: (details) {
        _runAnimation();
      },

最后,运行效果如下所示:

总结

AnimationController是一个很强大的组件,但是使用起来也不是那么的复杂, 我们只需要定义好起点和终点,然后指定动画效果即可。

本文的例子:https://github.com/ddean2009/learn-flutter.git

相关文章
|
1月前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
123 5
|
1月前
|
前端开发 开发者
深入探索 Flutter 鸿蒙版的画笔使用与高级自定义动画
本文深入探讨了 Flutter 中的绘图功能,重点介绍了 CustomPainter 和 Canvas 的使用方法。通过示例代码,详细讲解了如何绘制自定义图形、设置 Paint 对象的属性以及实现高级自定义动画。内容涵盖基本绘图、动画基础、渐变动画和路径动画,帮助读者掌握 Flutter 绘图与动画的核心技巧。
83 1
|
2月前
动画控制器在 Flutter 中的工作原理
【10月更文挑战第18天】总的来说,动画控制器 `AnimationController` 在 Flutter 中起着关键的作用,它通过控制动画的数值、速度、节奏和状态,实现了丰富多彩的动画效果。理解它的工作原理对于我们在 Flutter 中创建各种精彩的动画是非常重要的。
|
2月前
|
搜索推荐
Flutter 中的 AnimationController 类
【10月更文挑战第18天】深入了解了 Flutter 中的 `AnimationController`类。它是构建精彩动画效果的重要基石,掌握它的使用方法对于开发具有吸引力的 Flutter 应用至关重要。
|
2月前
|
UED
flutter:动画&状态管理 (十三)
本文档介绍了Flutter中`animatedList`的使用方法和状态管理的示例。`animatedList`用于创建带有动画效果的列表,示例代码展示了如何添加、删除列表项,并执行相应的动画效果。状态管理部分通过一个简单的点击切换颜色的示例,演示了如何在Flutter中管理组件的状态。
|
4月前
|
前端开发
Flutter快速实现自定义折线图,支持数据改变过渡动画
Flutter快速实现自定义折线图,支持数据改变过渡动画
110 4
|
5月前
Flutter-实现头像叠加动画效果
Flutter-实现头像叠加动画效果
81 0
|
5月前
Flutter-加载中动画
Flutter-加载中动画
47 0
|
5月前
Flutter-自定义表情雨下落动画
Flutter-自定义表情雨下落动画
44 0
|
5月前
Flutter-数字切换动画
Flutter-数字切换动画
41 0