Skip to content

Commit afc2c2a

Browse files
SaadArdatiSaadArdati
committed
🔧 Update Pack 2 #13
1 parent 91a7053 commit afc2c2a

File tree

2 files changed

+183
-82
lines changed

2 files changed

+183
-82
lines changed

‎example/lib/stories/success_card_animation.dart‎

Lines changed: 160 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import 'dart:math';
2+
13
import 'package:flutter/material.dart';
24
import 'package:hyper_effects/hyper_effects.dart';
35

@@ -9,88 +11,177 @@ class SuccessCardAnimation extends StatefulWidget {
911
}
1012

1113
class _SuccessCardAnimationState extends State<SuccessCardAnimation> {
12-
bool isCompleted = true;
14+
bool isCompleted = false;
1315

1416
@override
1517
Widget build(BuildContext context) {
16-
return ConstrainedBox(
17-
constraints: const BoxConstraints(
18-
maxWidth: 350,
19-
maxHeight: 200,
20-
),
21-
child: MouseRegion(
22-
cursor: SystemMouseCursors.click,
23-
child: GestureDetector(
24-
onTap: () {
25-
setState(() {
26-
isCompleted = !isCompleted;
27-
});
28-
},
29-
child: Padding(
30-
padding: const EdgeInsets.all(12),
31-
child: Container(
32-
constraints: const BoxConstraints(minHeight: 148),
33-
decoration: BoxDecoration(
34-
color: Colors.white,
35-
borderRadius: BorderRadius.circular(16),
36-
),
37-
child: ClipRRect(
38-
borderRadius: BorderRadius.circular(16),
39-
child: Stack(
40-
alignment: Alignment.center,
41-
fit: StackFit.expand,
42-
children: [
43-
Image.asset(
44-
'assets/fashion/fashion_0.jpg',
45-
fit: BoxFit.cover,
46-
),
47-
Positioned.fill(
48-
child: Container(
49-
decoration: const BoxDecoration(
50-
color: Color(0x3A079455),
18+
return Column(
19+
mainAxisSize: MainAxisSize.min,
20+
mainAxisAlignment: MainAxisAlignment.center,
21+
children: [
22+
ConstrainedBox(
23+
constraints: const BoxConstraints(
24+
maxWidth: 350,
25+
maxHeight: 200,
26+
),
27+
child: MouseRegion(
28+
cursor: SystemMouseCursors.click,
29+
child: GestureDetector(
30+
onTap: () {
31+
setState(() {
32+
isCompleted = !isCompleted;
33+
});
34+
},
35+
child: Padding(
36+
padding: const EdgeInsets.all(12),
37+
child: Container(
38+
constraints: const BoxConstraints(minHeight: 148),
39+
decoration: BoxDecoration(
40+
color: Colors.white,
41+
borderRadius: BorderRadius.circular(16),
42+
),
43+
child: ClipRRect(
44+
borderRadius: BorderRadius.circular(16),
45+
child: Stack(
46+
alignment: Alignment.center,
47+
fit: StackFit.expand,
48+
children: [
49+
Image.asset(
50+
'assets/fashion/fashion_0.jpg',
51+
fit: BoxFit.cover,
5152
),
52-
alignment: Alignment.center,
53-
child: const Icon(
54-
Icons.check_circle,
55-
size: 74,
56-
)
57-
.translateY(
58-
isCompleted ? 0 : 100,
59-
from: isCompleted ? 100 : 0,
60-
)
61-
.animate(
62-
trigger: isCompleted,
63-
startState:
64-
AnimationStartState.useCurrentValues,
65-
curve: !isCompleted
66-
? Curves.easeInBack
67-
: Curves.easeOutBack,
68-
duration: const Duration(
69-
milliseconds: 400,
70-
),
53+
Positioned.fill(
54+
child: Container(
55+
decoration: const BoxDecoration(
56+
color: Color(0x3A079455),
7157
),
72-
)
73-
.opacity(
74-
isCompleted ? 1 : 0,
75-
from: isCompleted ? 0 : 1,
58+
alignment: Alignment.center,
59+
child: const Icon(
60+
Icons.check_circle,
61+
size: 74,
62+
)
63+
.translateY(
64+
isCompleted ? 0 : 100,
65+
from: isCompleted ? 100 : 0,
66+
)
67+
.animate(
68+
trigger: isCompleted,
69+
startState:
70+
AnimationStartState.useCurrentValues,
71+
curve: !isCompleted
72+
? Curves.easeInBack
73+
: Curves.easeOutBack,
74+
duration: const Duration(
75+
milliseconds: 400,
76+
),
77+
),
7678
)
77-
.animate(
78-
trigger: isCompleted,
79-
startState:
80-
AnimationStartState.useCurrentValues,
81-
curve: Curves.easeInOutSine,
82-
duration: const Duration(
83-
milliseconds: 400,
79+
.opacity(
80+
isCompleted ? 1 : 0,
81+
from: isCompleted ? 0 : 1,
82+
)
83+
.animate(
84+
trigger: isCompleted,
85+
startState:
86+
AnimationStartState.useCurrentValues,
87+
curve: Curves.easeInOutSine,
88+
duration: const Duration(
89+
milliseconds: 400,
90+
),
91+
),
92+
),
93+
],
94+
),
95+
),
96+
),
97+
),
98+
),
99+
),
100+
),
101+
ConstrainedBox(
102+
constraints: const BoxConstraints(
103+
maxWidth: 350,
104+
maxHeight: 200,
105+
),
106+
child: MouseRegion(
107+
cursor: SystemMouseCursors.click,
108+
child: GestureDetector(
109+
onTap: () {
110+
setState(() {
111+
isCompleted = !isCompleted;
112+
});
113+
},
114+
child: Padding(
115+
padding: const EdgeInsets.all(12),
116+
child: Container(
117+
constraints: const BoxConstraints(minHeight: 148),
118+
decoration: BoxDecoration(
119+
color: Colors.white,
120+
borderRadius: BorderRadius.circular(16),
121+
),
122+
child: ClipRRect(
123+
borderRadius: BorderRadius.circular(16),
124+
child: Stack(
125+
alignment: Alignment.center,
126+
fit: StackFit.expand,
127+
children: [
128+
Image.asset(
129+
'assets/fashion/fashion_0.jpg',
130+
fit: BoxFit.cover,
131+
),
132+
Positioned.fill(
133+
child: Container(
134+
decoration: const BoxDecoration(
135+
color: Color(0x3A079455),
136+
),
137+
alignment: Alignment.center,
138+
child: const Icon(
139+
Icons.check_circle,
140+
size: 74,
141+
)
142+
.scale(isCompleted ? 1.5 : 0)
143+
.rotate(isCompleted ? 15 * pi / 180 : 0)
144+
.animate(
145+
trigger: isCompleted,
146+
curve: Curves.easeOutQuart,
147+
duration:
148+
const Duration(milliseconds: 350),
149+
)
150+
.scale(
151+
isCompleted ? 1 / 1.5 : 1,
152+
)
153+
.rotate(
154+
isCompleted ? -15 * pi / 180 : 0,
155+
)
156+
.animateAfter(
157+
curve: Curves.easeOutBack,
158+
delay: const Duration(milliseconds: 150),
159+
duration:
160+
const Duration(milliseconds: 300),
161+
))
162+
// .opacity(
163+
// isCompleted ? 1 : 0,
164+
// from: isCompleted ? 0 : 1,
165+
// )
166+
// .animate(
167+
// trigger: isCompleted,
168+
// startState:
169+
// AnimationStartState.useCurrentValues,
170+
// curve: Curves.easeInOutSine,
171+
// duration: const Duration(
172+
// milliseconds: 400,
173+
// ),
174+
// ),
84175
),
85-
),
176+
],
86177
),
87-
],
178+
),
88179
),
89180
),
90181
),
91182
),
92183
),
93-
),
184+
],
94185
);
95186
}
96187
}

‎lib/src/animated_effect.dart‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@ extension AnimatedEffectExt on Widget? {
4848
/// The [resetValues] parameter is used to determine whether the animation
4949
/// should start from idle values or from the current state of the widget.
5050
///
51+
/// The [interruptable] parameter is used to determine whether the animation
52+
/// should be reset on subsequent triggers. If this animation is re-triggered,
53+
/// it will reset the current active animation and re-drive from the
54+
/// beginning.
55+
///
5156
/// The [startState] parameter is used to determine the behavior of the
5257
/// animation as soon as it is added to the widget tree.
5358
///
@@ -65,7 +70,7 @@ extension AnimatedEffectExt on Widget? {
6570
int repeat = 0,
6671
bool reverse = false,
6772
bool resetValues = false,
68-
bool waitForLastAnimation = false,
73+
bool interruptable = true,
6974
Duration delay = Duration.zero,
7075
AnimationStartState startState = AnimationStartState.idle,
7176
VoidCallback? onEnd,
@@ -80,7 +85,7 @@ extension AnimatedEffectExt on Widget? {
8085
repeat: repeat,
8186
reverse: reverse,
8287
resetValues: resetValues,
83-
waitForLastAnimation: waitForLastAnimation,
88+
interruptable: interruptable,
8489
delay: delay,
8590
startState: startState,
8691
onEnd: onEnd,
@@ -120,6 +125,11 @@ extension AnimatedEffectExt on Widget? {
120125
/// When false, the animation will animate from the previous effect state
121126
/// towards the current state.
122127
///
128+
/// The [interruptable] parameter is used to determine whether the animation
129+
/// should be reset on subsequent triggers. If this animation is re-triggered,
130+
/// it will reset the current active animation and re-drive from the
131+
/// beginning.
132+
///
123133
/// The [delay] parameter is used to set a delay before the animation starts.
124134
///
125135
/// The [playIf] parameter is used to determine whether the animation should
@@ -136,6 +146,7 @@ extension AnimatedEffectExt on Widget? {
136146
bool reverse = false,
137147
bool resetValues = false,
138148
Duration delay = Duration.zero,
149+
AnimationStartState startState = AnimationStartState.idle,
139150
VoidCallback? onEnd,
140151
BooleanCallback? playIf,
141152
BooleanCallback? skipIf,
@@ -148,7 +159,7 @@ extension AnimatedEffectExt on Widget? {
148159
repeat: repeat,
149160
reverse: reverse,
150161
resetValues: resetValues,
151-
waitForLastAnimation: false,
162+
interruptable: true,
152163
delay: delay,
153164
onEnd: onEnd,
154165
playIf: playIf,
@@ -182,11 +193,10 @@ extension AnimatedEffectExt on Widget? {
182193
/// When false, the animation will animate from the previous effect state
183194
/// towards the current state.
184195
///
185-
/// The [waitForLastAnimation] parameter is used to determine whether the
186-
/// animation should be reset on subsequent triggers. If this animation is
187-
/// re-triggered, it will reset the current active animation and re-drive
188-
/// from the beginning. Setting this to true will force the animation to
189-
/// wait for the last animation in the chain to finish before starting.
196+
/// The [interruptable] parameter is used to determine whether the animation
197+
/// should be reset on subsequent triggers. If this animation is re-triggered,
198+
/// it will reset the current active animation and re-drive from the
199+
/// beginning.
190200
///
191201
/// The [delay] parameter is used to set a delay before the animation starts.
192202
///
@@ -204,7 +214,7 @@ extension AnimatedEffectExt on Widget? {
204214
int repeat = 0,
205215
bool reverse = false,
206216
bool resetValues = false,
207-
bool waitForLastAnimation = false,
217+
bool interruptable = true,
208218
Duration delay = Duration.zero,
209219
VoidCallback? onEnd,
210220
BooleanCallback? playIf,
@@ -219,7 +229,7 @@ extension AnimatedEffectExt on Widget? {
219229
repeat: repeat,
220230
reverse: reverse,
221231
resetValues: resetValues,
222-
waitForLastAnimation: waitForLastAnimation,
232+
interruptable: interruptable,
223233
delay: delay,
224234
playIf: playIf,
225235
skipIf: skipIf,
@@ -296,7 +306,7 @@ class AnimatedEffect extends StatefulWidget {
296306
/// and re-drive from the beginning.
297307
/// Setting this to true will force the animation to wait for the last
298308
/// animation in the chain to finish before starting.
299-
final bool waitForLastAnimation;
309+
final bool interruptable;
300310

301311
/// A delay before the animation starts.
302312
final Duration delay;
@@ -324,7 +334,7 @@ class AnimatedEffect extends StatefulWidget {
324334
this.repeat = 0,
325335
this.reverse = false,
326336
this.resetValues = false,
327-
this.waitForLastAnimation = false,
337+
this.interruptable = true,
328338
this.delay = Duration.zero,
329339
this.playIf,
330340
this.skipIf,
@@ -479,7 +489,7 @@ class AnimatedEffectState extends State<AnimatedEffect>
479489

480490
/// Drives the animation.
481491
Future<void> drive() async {
482-
if (widget.waitForLastAnimation && driveFuture != null) {
492+
if (!widget.interruptable && driveFuture != null) {
483493
await driveFuture;
484494
}
485495

0 commit comments

Comments
 (0)