使用的插件:
# 动画
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();
}
}