flutter动画实现手指图片不断点击按钮

使用的插件:

  # 动画
  animator: ^2.0.1

实现效果: 小手指的图片会沿着设定的轨迹来回运动,从而实现手指不断点击按钮的动画

import 'dart:async';

import 'package:animator/animator.dart';
import 'package:flutter/material.dart';
import 'package:fluttertest0315/constant/app_style.dart';
import 'package:fluttertest0315/utils/ScreenAdaper.dart';

import 'animation/HandlerWidget.dart';
import 'animation/HandlerWidget2.dart';

/// 使用动画实现手指戳按钮的动画 - 不需要重复加载
class AnimationButtonPage2 extends StatefulWidget {
  @override
  AnimationButtonPage2State createState() => new AnimationButtonPage2State();
}

class AnimationButtonPage2State extends State<AnimationButtonPage2> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print(
        'AnimationButtonPage2State - build --------  加载 --------------------');
    return Scaffold(
      appBar: AppBar(
        title: Text('动态手指'),
      ),
      body: ListView(
        children: _widgetList(),
      ),
    );
  }

  /// listView的内容
  List<Widget> _widgetList() {
    List<Widget> _widgetList = [];
    for (int j = 0; j < 100; j++) {
      if (0 == j % 10) {
        _widgetList.add(_buttonAndHandWidgetStack());
      }
      _widgetList.add(
        Text(
          j.toString(),
          style: TextStyle(
            fontSize: ScreenAdapter.size(AppStyle.text_60),
          ),
        ),
      );
    }
    return _widgetList;
  }

  /// 按钮 + 手指
  Widget _buttonAndHandWidgetStack() {
    return Container(
      child: Stack(
        children: <Widget>[
          /// 按钮
          _buttonWidget(),

          /// 手指图片
          HandWidget2(),
        ],
      ),
    );
  }

  /// 按钮
  Widget _buttonWidget() {
    return Container(
      alignment: Alignment.center,
      child: RaisedButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(
              AppStyle.radius_25,
            ),
          ),
        ),
        // 按钮颜色
        color: Colors.orange,
        // 字体颜色
        textColor: Colors.white,
        child: Text(
          '点此完善',
          style: TextStyle(
            fontSize: ScreenAdapter.size(100),
          ),
        ),
        onPressed: () {
          print('点击------RaisedButton按钮');
        },
      ),
    );
  }

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

import 'package:flutter/material.dart';
import 'package:animator/animator.dart';
import 'package:fluttertest0315/utils/ScreenAdaper.dart';

/// 手指图片沿着特定线路来回移动
class HandWidget2 extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

/// 必须继承SingleTickerProviderStateMixin - 为了AnimationController
class _MyHomePageState extends State<HandWidget2>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Offset> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: Duration(milliseconds: 1000),
      vsync: this,
    );

    /// 监听动画状态 - 完成动画循环
    controller.addStatusListener((status) {
      // 动画状态: 结束 - 反转启动
      if (status == AnimationStatus.completed) {
        debugPrint('完成');
        controller.reverse();

        /// 动画状态: 开始时就停止即动画启动失败 - 重新启动
      } else if (status == AnimationStatus.dismissed) {
        debugPrint('消失');
        controller.forward();
      }
    });

    /// 设定移动路线 - 坐标调试
    animation = Tween(
//      begin: Offset(1.8, 0.6),
//      end: Offset(2.2, 1.0),
      begin: Offset(ScreenAdapter.width(3), ScreenAdapter.width(1)),
      end: Offset(ScreenAdapter.width(4), ScreenAdapter.width(2)),
    ).animate(controller);

    /// 开始执行动画
    controller.forward();
  }

  Widget build(BuildContext context) {
    return Center(
      // SlideTransition 用于执行动画
      child: SlideTransition(
        position: animation,
        child: Image.network(
          'https://image.sdbao.com/sems/banner/iconImages/hand.png!webp',
          height: ScreenAdapter.height(150),
        ),
      ),
    );
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}