flutter开发实战-实现左右来回移动的按钮引导动画效果

flutter开发实战-实现左右来回移动的按钮引导动画效果

最近开发过程中需要实现左右来回移动的按钮引导动画效果

一、动画

AnimationController用来控制一个或者多个动画的正向、反向、停止等相关动画操作。在默认情况下AnimationController是按照线性进行动画播放的。AnimationController两个监听Listener如下

  • addListener

    addListener();它可以用于给Animation添加帧监听器,在每一帧都会被调用。帧监听器中最常见的行为是改变状态后调用setState()来触发UI重建。

  • addStatusListener

    addStatusListener();它可以给Animation添加"动画状态改变"监听器;动画开始、结束、正向或反向(见AnimationStatus定义)时会调用状态改变的监听器。

二、实现左右来回移动的按钮引导动画效果

在使用动画时候需要TickerProviderStateMixin或者SingleTickerProviderStateMixin

当需要多个Animation,则使用TickerProviderStateMixin

注意:在使用AnimationController的时候需要结合TickerProvider,因为只有在TickerProvider下才能配置AnimationController中的构造参数vsync。TickerProvider是一个抽象类,所以我们一般使用它的实现类TickerProviderStateMixin和SingleTickerProviderStateMixin。

实现左右来回移动的按钮引导动画效果代码效果

dart 复制代码
import 'package:flutter/material.dart';

class ShakeContainer extends StatefulWidget {
  const ShakeContainer({required this.child, Key? key}) : super(key: key);

  final Widget child;

  @override
  _ShakeContainerState createState() => _ShakeContainerState();
}

class _ShakeContainerState extends State<ShakeContainer>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 600));

    //使用弹性曲线
    _animation =
        CurvedAnimation(parent: _animationController, curve: Curves.easeOut);
    _animation = Tween(begin: 0.0, end: 1.0).animate(_animation);

    _animationController.addListener(() {
      if (mounted) {
        setState(() {});
      }
    });

    _animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _animationController.forward();
      }
    });

    _animationController.forward();
  }

  void animationDispose() {
    _animationController.dispose();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    animationDispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Transform(
        ///构建Matrix4
        transform: buildMatrix4(),

        ///中心对齐
        alignment: Alignment.center,
        child: widget.child,
      ),
    );
  }

  Matrix4 buildMatrix4() {
    double dx = 0;
    double dy = 0;

    ///x轴方向平移
    dx = _animation.value * 60;

    return Matrix4.translationValues(dx, dy, 0);
  }
}

/// 左右摆动的心
class HeartItem extends StatelessWidget {
  const HeartItem({Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.0,
      height: 150.0,
      alignment: Alignment.center,
      child: Image.asset("assets/images/touch_here.png",
          width: 200.0,
        height: 150,
      ),
    );
  }
}

在代码中用到了Matrix4.translationValues(dx, dy, 0); 可以在指定的x、或者y轴方向平移。

三、小结

flutter开发实战-实现左右来回移动的按钮引导动画效果。

学习记录,每天不停进步。

相关推荐
AiFlutter30 分钟前
Flutter通过 Coap发送组播
flutter
嘟嘟叽1 天前
初学 flutter 环境变量配置
flutter
iFlyCai1 天前
深入理解Flutter生命周期函数之StatefulWidget(一)
flutter·生命周期·dart·statefulwidget
sunly_1 天前
Flutter:photo_view图片预览功能
android·javascript·flutter
Summer不秃1 天前
Flutter中sqflite的使用案例
flutter
sunly_1 天前
Flutter:TweenAnimationBuilder自定义隐式动画
flutter
AiFlutter1 天前
Flutter-Web首次加载时添加动画
前端·flutter
Allen Su2 天前
【Flutter 问题系列第 84 篇】如何清除指定网络图片的缓存
flutter·缓存·如何清除指定网络图片的缓存·网络图片缓存
sunly_2 天前
Flutter:key的作用原理(LocalKey ,GlobalKey)
开发语言·javascript·flutter
AiFlutter2 天前
Flutter-flutter_blue_plus打包后无法进行设备扫描
flutter