图片动画

Catalogue

效果:

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import 'package:flutter/material.dart';

import '../example_common.dart';

///一组图片动画
class GMExampleAnimationGroupImagePage extends StatefulWidget {
GMExampleAnimationGroupImagePage({Key key}) : super(key: key);

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

class _GMExampleAnimationGroupImagePageState extends State<GMExampleAnimationGroupImagePage> {
@override
Widget build(BuildContext context) {
debugPrint("build ---------");
return Scaffold(
appBar: example_common_appBar(context, "一组图片动画"),
body: Center(
child: Container(
child: _buildContent(context),
height: 200,
width: 200,
color: Colors.orangeAccent,
padding: EdgeInsets.all(30.0),
),
),
);
}

Widget _buildContent(ctx) {
return GMExampleImagesAnimation(
w: 100,
h: 100,
entry: ImagesAnimationEntry(1, 7, "assets/images/example_ani_0"),
);
}
}

class GMExampleImagesAnimation extends StatefulWidget {
final double w;
final double h;
final ImagesAnimationEntry entry;
final int durationMilliseconds;

GMExampleImagesAnimation(
{Key key, this.w: 80, this.h: 80, this.entry, this.durationMilliseconds: 700})
: super(key: key);

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

class _GMExampleImagesAnimationState extends State<GMExampleImagesAnimation>
with TickerProviderStateMixin {
AnimationController _controller;
Animation<int> _animation;

@override
void initState() {
super.initState();

_controller = AnimationController(
vsync: this, duration: Duration(milliseconds: this.widget.durationMilliseconds))
..repeat();

_animation =
new IntTween(begin: widget.entry.lowIndex, end: widget.entry.highIndex)
.animate(_controller);
}

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

@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation,
builder: (BuildContext ctx, Widget child) {
String frame = _animation.value.toString();
return Image.asset(
this.widget.entry.basePath + frame + ".png",
gaplessPlayback: true, //避免图片闪烁
width: widget.w,
height: widget.h,
);
},
);
}
}


class ImagesAnimationEntry {
int lowIndex = 0;
int highIndex = 0;
String basePath;

ImagesAnimationEntry(this.lowIndex, this.highIndex, this.basePath);
}