Skip to content

Commit 48321e6

Browse files
amalChandranamalChandran
committed
Merge branch 'fx_5'
* fx_5: fx5 - Vinyl clean ups Images and two side support added! Animation loop added center align by the first item on the stack Just before adding vinyl it resembles the original in some angle now curves updated! i have no idea why this works! reseting animation before starting the next set seem to have worked! working code after some minor refactor Top jump and move timing changes! looks a bit decent now some what decent! Combined animation made working now Fitst commit from Vinyl widget viewer
2 parents 383c85c + 4676016 commit 48321e6

14 files changed

+1423
-77
lines changed

‎assets/images/tracing_cards.png

521 KB
Loading

‎assets/images/vinyl/cover_1.png

687 KB
Loading

‎assets/images/vinyl/cover_2.png

83.2 KB
Loading

‎assets/images/vinyl/cover_3.png

545 KB
Loading

‎assets/images/vinyl/vinyl.png

200 KB
Loading

‎assets/images/vinyl/vinyl_half.png

104 KB
Loading

‎lib/circles_selector/CirclesHomeWidget.dart

-75
Original file line numberDiff line numberDiff line change
@@ -98,15 +98,6 @@ class _PannableCircleGridState extends State<PannableCircleGrid>
9898
);
9999
},
100100
),
101-
// CustomPaint( //Enable for debugging
102-
// painter: DebugPainter(
103-
// tapPosition: _tapPosition,
104-
// gridOffset: _offset,
105-
// circleSize: _circleSize,
106-
// spacing: _spacing,
107-
// columns: _columns,
108-
// ),
109-
// ),
110101
],
111102
),
112103
),
@@ -156,72 +147,6 @@ class _PannableCircleGridState extends State<PannableCircleGrid>
156147
),
157148
);
158149
}
159-
// @override
160-
// Widget build(BuildContext context) {
161-
// return GestureDetector(
162-
// onPanUpdate: _handlePan,
163-
// onPanEnd: _handlePanEnd,
164-
// child: Container(
165-
// // Added Container for background color
166-
// color: Colors.black,
167-
// child: ClipRect(
168-
// child: Stack(
169-
// children: [
170-
// AnimatedBuilder(
171-
// animation:
172-
// Listenable.merge(_animationControllers.values.toList()),
173-
// builder: (context, child) {
174-
// return CustomPaint(
175-
// painter: CircleGridPainter(
176-
// offset: _offset,
177-
// circleSize: _circleSize,
178-
// selectedCircleMultiplier: _selectedCircleMultiplier,
179-
// spacing: _spacing,
180-
// selectedIndex: _selectedIndex,
181-
// columns: _columns,
182-
// animationControllers: _animationControllers,
183-
// ),
184-
// child: GestureDetector(
185-
// onTapUp: _handleTap,
186-
// ),
187-
// );
188-
189-
// // Stack(
190-
// // children: [
191-
192-
// // ],
193-
// // );
194-
// },
195-
// ),
196-
// CustomPaint(
197-
// painter: DebugPainter(
198-
// tapPosition: _tapPosition,
199-
// gridOffset: _offset,
200-
// circleSize: _circleSize,
201-
// spacing: _spacing,
202-
// columns: _columns,
203-
// ),
204-
// ),
205-
// Positioned(
206-
// bottom: 0,
207-
// child: Container(
208-
// height: 100,
209-
// width: double.infinity,
210-
// decoration: BoxDecoration(
211-
// gradient: LinearGradient(
212-
// colors: [Colors.blue, Colors.green],
213-
// begin: Alignment.centerLeft,
214-
// end: Alignment.centerRight,
215-
// ),
216-
// ),
217-
// ),
218-
// )
219-
// ],
220-
// ),
221-
// ),
222-
// ),
223-
// );
224-
// }
225150

226151
void _handlePan(DragUpdateDetails details) {
227152
setState(() {

‎lib/main.dart

+9-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
22
import 'package:fx_2_folder/books/books.dart';
33
import 'package:fx_2_folder/circles_selector/CirclesHomeWidget.dart';
44
import 'package:fx_2_folder/folder_shape/folder_home.dart';
5+
import 'package:fx_2_folder/vinyl/vinyl.dart';
56
import 'package:google_fonts/google_fonts.dart';
67

78
void main() => runApp(const AnimationShowcaseApp());
@@ -12,6 +13,7 @@ class AnimationShowcaseApp extends StatelessWidget {
1213
@override
1314
Widget build(BuildContext context) {
1415
return MaterialApp(
16+
debugShowCheckedModeBanner: false,
1517
title: 'fx-widget Showcase',
1618
theme: ThemeData.dark().copyWith(
1719
primaryColor: const Color(0xFF1E1E1E),
@@ -55,6 +57,11 @@ class HomeScreen extends StatelessWidget {
5557
builder: (context) => const CirclesHomeWidget(),
5658
appBarColor: Colors.black,
5759
),
60+
AnimationExample(
61+
title: '3D Vinyl',
62+
builder: (context) => const VinylHomeWidget(),
63+
appBarColor: Colors.black,
64+
),
5865
];
5966

6067
HomeScreen({super.key});
@@ -87,8 +94,8 @@ class HomeScreen extends StatelessWidget {
8794
onTap: () => Navigator.push(
8895
context,
8996
MaterialPageRoute(
90-
builder: (context) =>
91-
DetailScreen(example: examples[index]),
97+
builder: (context) => DetailScreen(
98+
key: UniqueKey(), example: examples[index]),
9299
),
93100
),
94101
child: Column(

‎lib/vinyl/examples/spring_examples.dart

+268
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
import 'package:flutter/material.dart';
2+
import 'dart:math' as math;
3+
4+
class SpringAnimationsPage extends StatelessWidget {
5+
@override
6+
Widget build(BuildContext context) {
7+
return Scaffold(
8+
appBar: AppBar(
9+
title: Text('Spring Animations'),
10+
),
11+
body: GridView.count(
12+
crossAxisCount: 2,
13+
padding: EdgeInsets.all(16),
14+
childAspectRatio: 3,
15+
mainAxisSpacing: 16,
16+
crossAxisSpacing: 16,
17+
children: [
18+
SpringButton(
19+
text: 'Elastic Gentle',
20+
curve: Curves.easeOutBack,
21+
duration: Duration(milliseconds: 800),
22+
),
23+
SpringButton(
24+
text: 'Bouncy Wobble',
25+
curve: _BouncyWobbleCurve(),
26+
duration: Duration(milliseconds: 1200),
27+
),
28+
SpringButton(
29+
text: 'Quick Oscillation',
30+
curve: _QuickOscillationCurve(),
31+
duration: Duration(milliseconds: 600),
32+
),
33+
SpringButton(
34+
text: 'Slow Rebound',
35+
curve: _SlowReboundCurve(),
36+
duration: Duration(milliseconds: 1500),
37+
),
38+
SpringButton(
39+
text: 'Snappy Elastic',
40+
curve: _SnappyElasticCurve(),
41+
duration: Duration(milliseconds: 700),
42+
),
43+
SpringButton(
44+
text: 'Soft Bounce',
45+
curve: _SoftBounceCurve(),
46+
duration: Duration(milliseconds: 900),
47+
),
48+
SpringButton(
49+
text: 'Vibrating Spring',
50+
curve: _VibratingSpringCurve(),
51+
duration: Duration(milliseconds: 1000),
52+
),
53+
SpringButton(
54+
text: 'Smooth Overshoot',
55+
curve: _SmoothOvershootCurve(),
56+
duration: Duration(milliseconds: 850),
57+
),
58+
SpringButton(
59+
text: 'Elastic Snap',
60+
curve: _ElasticSnapCurve(),
61+
duration: Duration(milliseconds: 750),
62+
),
63+
SpringButton(
64+
text: 'Gentle Wobble',
65+
curve: _GentleWobbleCurve(),
66+
duration: Duration(milliseconds: 1100),
67+
),
68+
SpringButton(
69+
text: 'Bouncy',
70+
curve: Curves.bounceOut,
71+
duration: Duration(milliseconds: 500),
72+
),
73+
SpringButton(
74+
text: 'Elastic',
75+
curve: Curves.elasticOut,
76+
duration: Duration(milliseconds: 1000),
77+
),
78+
SpringButton(
79+
text: 'Quick Snap',
80+
curve: Curves.easeOutBack,
81+
duration: Duration(milliseconds: 300),
82+
),
83+
SpringButton(
84+
text: 'Slow Spring',
85+
curve: Curves.elasticInOut,
86+
duration: Duration(milliseconds: 1500),
87+
),
88+
SpringButton(
89+
text: 'Overshoot',
90+
curve: Curves.easeOutCirc,
91+
duration: Duration(milliseconds: 600),
92+
),
93+
SpringButton(
94+
text: 'Gentle',
95+
curve: Curves.easeOutSine,
96+
duration: Duration(milliseconds: 400),
97+
),
98+
SpringButton(
99+
text: 'Sharp',
100+
curve: Curves.easeOutExpo,
101+
duration: Duration(milliseconds: 350),
102+
),
103+
SpringButton(
104+
text: 'Wobble',
105+
curve: _WobbleCurve(),
106+
duration: Duration(milliseconds: 800),
107+
),
108+
SpringButton(
109+
text: 'Bouncy Elastic',
110+
curve: _BouncyElasticCurve(),
111+
duration: Duration(milliseconds: 1200),
112+
),
113+
SpringButton(
114+
text: 'Damped',
115+
curve: _DampedSpringCurve(),
116+
duration: Duration(milliseconds: 1000),
117+
),
118+
],
119+
),
120+
);
121+
}
122+
}
123+
124+
class SpringButton extends StatefulWidget {
125+
final String text;
126+
final Curve curve;
127+
final Duration duration;
128+
129+
SpringButton({
130+
required this.text,
131+
required this.curve,
132+
required this.duration,
133+
});
134+
135+
@override
136+
_SpringButtonState createState() => _SpringButtonState();
137+
}
138+
139+
class _SpringButtonState extends State<SpringButton>
140+
with SingleTickerProviderStateMixin {
141+
late AnimationController _controller;
142+
late Animation<double> _animation;
143+
144+
@override
145+
void initState() {
146+
super.initState();
147+
_controller = AnimationController(
148+
vsync: this,
149+
duration: widget.duration,
150+
);
151+
_animation = Tween<double>(begin: 0, end: 1).animate(
152+
CurvedAnimation(parent: _controller, curve: widget.curve),
153+
);
154+
}
155+
156+
@override
157+
void dispose() {
158+
_controller.dispose();
159+
super.dispose();
160+
}
161+
162+
@override
163+
Widget build(BuildContext context) {
164+
return GestureDetector(
165+
onTap: () {
166+
_controller.forward(from: 0);
167+
},
168+
child: AnimatedBuilder(
169+
animation: _animation,
170+
builder: (context, child) {
171+
return Transform.rotate(
172+
angle: math.sin(_animation.value * math.pi) * 10 * math.pi / 180,
173+
child: ElevatedButton(
174+
onPressed: () {
175+
_controller.forward(from: 0);
176+
},
177+
child: Text(widget.text),
178+
),
179+
);
180+
},
181+
),
182+
);
183+
}
184+
}
185+
186+
class _WobbleCurve extends Curve {
187+
@override
188+
double transform(double t) {
189+
return math.sin(t * math.pi * 4) * (1 - t);
190+
}
191+
}
192+
193+
class _BouncyElasticCurve extends Curve {
194+
@override
195+
double transform(double t) {
196+
return -math.pow(math.e, -8 * t) * math.cos(t * 12) + 1;
197+
}
198+
}
199+
200+
class _DampedSpringCurve extends Curve {
201+
@override
202+
double transform(double t) {
203+
return 1 - math.pow(math.e, -3 * t) * math.cos(t * 10);
204+
}
205+
}
206+
207+
class _BouncyWobbleCurve extends Curve {
208+
@override
209+
double transform(double t) {
210+
return -math.pow(math.e, -5 * t) * math.cos(t * 15) + 1;
211+
}
212+
}
213+
214+
class _QuickOscillationCurve extends Curve {
215+
@override
216+
double transform(double t) {
217+
return math.sin(t * math.pi * 6) * (1 - t) + t;
218+
}
219+
}
220+
221+
class _SlowReboundCurve extends Curve {
222+
@override
223+
double transform(double t) {
224+
return (1 - math.pow(math.cos(t * math.pi / 2), 3)).toDouble();
225+
}
226+
}
227+
228+
class _SnappyElasticCurve extends Curve {
229+
@override
230+
double transform(double t) {
231+
return -math.pow(2, -10 * t) * math.sin((t - 0.1) * 5 * math.pi) + 1;
232+
}
233+
}
234+
235+
class _SoftBounceCurve extends Curve {
236+
@override
237+
double transform(double t) {
238+
return 1 - math.pow(1 - t, 3) * math.cos(t * math.pi * 2);
239+
}
240+
}
241+
242+
class _VibratingSpringCurve extends Curve {
243+
@override
244+
double transform(double t) {
245+
return math.sin(t * 15) * math.pow(1 - t, 2) + t;
246+
}
247+
}
248+
249+
class _SmoothOvershootCurve extends Curve {
250+
@override
251+
double transform(double t) {
252+
return t * t * (3 - 2 * t) + math.sin(t * math.pi * 2) * 0.1;
253+
}
254+
}
255+
256+
class _ElasticSnapCurve extends Curve {
257+
@override
258+
double transform(double t) {
259+
return math.pow(2, -8 * t) * math.sin(t * 8 * math.pi) + 1;
260+
}
261+
}
262+
263+
class _GentleWobbleCurve extends Curve {
264+
@override
265+
double transform(double t) {
266+
return t + math.sin(t * math.pi * 3) * 0.1 * (1 - t);
267+
}
268+
}

0 commit comments

Comments
 (0)