Flutter 開発の実践 - 左から右に前後に移動するボタンガイド付きアニメーション効果を実現します。

最近の開発プロセスでは、左から右に往復するボタン誘導アニメーション効果を実現する必要があります。

ここに画像の説明を挿入

1.アニメーション

AnimationController は、1 つ以上のアニメーションの順方向、逆方向、停止、およびその他の関連するアニメーション操作を制御するために使用されます。デフォルトでは、AnimationController は直線的にアニメーションを実行します。AnimationController の 2 つのリッスンリスナーは次のとおりです。

addListener
addListener(); これを使用すると、フレームごとに呼び出されるフレームリスナーをアニメーションに追加できます。フレームリスナーの最も一般的な動作は、状態変更後に setState() を呼び出して UI の再構築をトリガーすることです。
addStatusListener
addStatusListener(); 「アニメーション状態変更」リスナーをアニメーションに追加できます; 状態変更リスナーは、アニメーションの開始時、終了時、順方向または逆方向に呼び出されます (AnimationStatus の定義を参照)。

2. 左から右に往復するボタン誘導アニメーション効果を実現

アニメーションを使用する場合は、TickerProviderStateMixin または SingleTickerProviderStateMixin が必要です
。複数のアニメーションが必要な場合は、TickerProviderStateMixin を使用してください

注:AnimationController の構築パラメータ vsync は TickerProvider でのみ設定できるため、AnimationController を使用する場合は TickerProvider を組み合わせる必要があります。TickerProvider は抽象クラスであるため、通常はその実装クラス TickerProviderStateMixin および SingleTickerProviderStateMixin を使用します。

前後に動くボタンガイドアニメーション効果のコード効果を実現

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 軸方向に変換するためにコードで使用されます。

ここに画像の説明を挿入

3. まとめ

Flutter 開発の実践 - 左から右に前後に移動するボタンガイド付きアニメーション効果を実現します。
学習記録、日々改善を続けてください。