fix: proceed opacity animation

vaetas · May 20, 2022 · 54b33a1 · 54b33a1
1 parent 24772d7
commit 54b33a1
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 69 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -65,6 +65,10 @@ class HomeScreen extends StatelessWidget {
             onPressed: () {
               print('[HomeScreen.build] Opacity pressed');
             },
+            theme: PressableOpacityTheme(
+              curve: Curves.easeOut,
+              opacityFactor: 0.5,
+            ),
             child: const ExampleButton(title: 'Opacity'),
           ),
           Pressable.fill(

diff --git a/lib/src/opacity.dart b/lib/src/opacity.dart
@@ -2,13 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:pressable/pressable.dart';
 import 'package:pressable/src/base.dart';
 
+/// Makes [child] transparent.
 class PressableOpacity extends Pressable {
   const PressableOpacity({
     Key? key,
     required this.child,
     this.onPressed,
     this.onLongPressed,
-    required this.theme,
+    this.theme = const PressableOpacityTheme(),
   }) : super(key: key);
 
   final Widget child;
@@ -21,7 +22,22 @@ class PressableOpacity extends Pressable {
       _PressableOpacityState();
 }
 
-class _PressableOpacityState extends PressableBaseState<PressableOpacity> {
+class _PressableOpacityState extends PressableBaseState<PressableOpacity>
+    with TickerProviderStateMixin {
+  late final AnimationController _controller = AnimationController(
+    duration: theme.duration,
+    vsync: this,
+    value: 1.0,
+    lowerBound: theme.opacityFactor,
+    upperBound: 1.0,
+  );
+
+  late final Animation<double> _animation = CurvedAnimation(
+    parent: _controller,
+    curve: theme.curve,
+    reverseCurve: theme.reverseCurve,
+  );
+
   PressableOpacityTheme get theme {
     return widget.theme ??
         DefaultPressableTheme.of(context)?.opacityTheme ??
@@ -36,13 +52,58 @@ class _PressableOpacityState extends PressableBaseState<PressableOpacity> {
       onTapUp: widget.onPressed != null ? onPressEnded : null,
       onTapCancel: widget.onPressed != null ? onPressCanceled : null,
       onLongPress: widget.onLongPressed,
+      onLongPressStart:
+          widget.onLongPressed != null ? super.onLongPressStarted : null,
+      onLongPressEnd:
+          widget.onLongPressed != null ? super.onLongPressEnded : null,
       behavior: HitTestBehavior.opaque,
-      child: AnimatedOpacity(
-        opacity: isPressed ? theme.opacityFactor : 1.0,
-        duration: theme.duration,
-        curve: theme.curve,
+      excludeFromSemantics: true,
+      child: FadeTransition(
+        opacity: _animation,
         child: widget.child,
       ),
     );
   }
+
+  @override
+  void onPressStarted(TapDownDetails details) {
+    super.onPressStarted(details);
+    _controller.animateTo(0.0);
+  }
+
+  void _revertAnimation() {
+    _controller.animateTo(1.0);
+  }
+
+  /// Wait for animation end before animating back to the default state.
+  ///
+  /// Used when press is too short to make the animation still visible.
+  void _animationFinishedListener() {
+    if (_controller.isCompleted) {
+      _revertAnimation();
+      _controller.removeListener(_animationFinishedListener);
+    }
+  }
+
+  @override
+  void onPressEnded(TapUpDetails details) {
+    super.onPressEnded(details);
+    if (_controller.isAnimating) {
+      _controller.addListener(_animationFinishedListener);
+    } else {
+      _revertAnimation();
+    }
+  }
+
+  @override
+  void onPressCanceled() {
+    super.onPressCanceled();
+    _revertAnimation();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
 }
diff --git a/lib/src/scale.dart b/lib/src/scale.dart
@@ -33,6 +33,7 @@ class _PressableScaleState extends PressableBaseState<PressableScale>
   late final Animation<double> _animation = CurvedAnimation(
     parent: _controller,
     curve: theme.curve,
+    reverseCurve: theme.reverseCurve,
   );
 
   PressableScaleTheme get theme {

diff --git a/lib/src/theme/theme.dart b/lib/src/theme/theme.dart
@@ -1,29 +1,36 @@
 import 'package:flutter/material.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:pressable/pressable.dart';
 
 part 'theme.freezed.dart';
 
+/// Customize pressable animations.
 @freezed
 class PressableTheme with _$PressableTheme {
+  /// Customize [PressableRipple] animations.
   const factory PressableTheme.ripple({
     Color? splashColor,
     Color? highlightColor,
     BorderRadius? borderRadius,
   }) = PressableRippleTheme;
 
+  /// Customize [PressableScale] animations.
   const factory PressableTheme.scale({
     @Default(0.8) double scaleFactor,
     @Default(Duration(milliseconds: 100)) Duration duration,
     @Default(Curves.easeInOut) Curve curve,
+    @Default(Curves.easeInOut) Curve reverseCurve,
   }) = PressableScaleTheme;
 
+  /// Customize [PressableOpacity] animations.
   const factory PressableTheme.opacity({
     @Default(Duration(milliseconds: 100)) Duration duration,
     @Default(0.6) double opacityFactor,
-    @Default(Curves.linear) Curve curve,
-    @Default(Colors.transparent) Color backgroundColor,
+    @Default(Curves.easeInOut) Curve curve,
+    @Default(Curves.easeInOut) Curve reverseCurve,
   }) = PressableOpacityTheme;
 
+  /// Customize [PressableFill] animations.
   const factory PressableTheme.fill({
     @Default(Colors.black38) Color fillColor,
     @Default(BorderRadius.zero) BorderRadius borderRadius,