i want to animate the charging and discharging of the capacitor ,there is an equation for charging and another equation for discharging but i want when press button, start the new painting from the end point of the previous curve but in this code when press button it start to paint from the initial point again , so the output of my code here:
and this the code :
import 'dart:math';
import 'package:flutter/material.dart';
class Trace extends StatefulWidget {
const Trace({Key? key}) : super(key: key);
@override
State<Trace> createState() => _TraceState();
}
@override
class _TraceState extends State<Trace> with TickerProviderStateMixin {
late AnimationController animation;
bool isCharging = true;
Duration duration = const Duration(seconds: 20);
@override
void didChangeDependencies() {
super.didChangeDependencies();
double screenWidth = MediaQuery.of(context).size.width;
double x = screenWidth / 2;
// Calculate the lower bound based on the screen width
double lowerBound = (x - 80) / (x + 82);
animation = AnimationController(
vsync: this,
duration: duration,
lowerBound: lowerBound,
upperBound: 1,
)..addListener(() {
setState(() {});
});
animation.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(onPressed: () {
setState(() {
isCharging = !isCharging;
});
}),
backgroundColor: Colors.black,
body: InteractiveViewer(
minScale: 0.5,
maxScale: 5,
boundaryMargin: const EdgeInsets.all(double.infinity),
child: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: CustomPaint(
painter: TracePainter(animation, isCharging),
child: Container(),
),
),
),
);
}
}
class TracePainter extends CustomPainter {
TracePainter(this.animation, this.isCharging);
final Animation animation;
final bool isCharging;
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint()
..color = const Color.fromARGB(255, 89, 236, 255)
..style = PaintingStyle.stroke
..strokeWidth = 1.4;
final Paint paintRect = Paint()
..color = Colors.grey
..style = PaintingStyle.stroke
..strokeWidth = 0.5;
double screenWidth = size.width;
double screenheight = size.height;
double x = screenWidth / 2;
double y = (screenheight / 2) - 50;
final path = Path();
double t = x - 80;
double vo = 100;
double c = 2 * 0.000001;
double r = 500000 * 10;
double y1= y - 50;
double y2 = y - 50;
double out = 0;
path.moveTo(x - 80, y1);
for (t; t <= ((x + 82) * (animation.value)); t += 0.01) {
y1 = (y - 50) - vo * (1 - exp((-(t - (x - 80)) / (r * c))));
y2 = (y - 50) - vo * (exp((-(t - (x - 80)) / (r * c))));
if (isCharging) {
out = y1;
} else {
out = y2;
}
path.lineTo(t, out);
}
canvas.drawPath(path, paint);
canvas.drawRect(
Rect.fromCenter(center: Offset(x, y - 100), width: 164, height: 104),
paintRect);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
finally ,i want to modify this code to make the curve like this :
