flutter 当Transform.scale包裹opacity时，重复缩放动画不起作用,

nzkunb0c  于 10个月前  发布在  Flutter
关注(0)|答案(2)|浏览(90)

重现步骤

  1. 使用Flutter beta
  2. 粘贴代码
  3. 点击正方形，动画按预期工作
  4. 再次点击正方形，缩放不起作用，只有透明度起作用。

预期结果

缩放动画在后续的动画调用中应该起作用，而不仅仅是第一次。

实际结果

当缩放动画被多次调用时，它不起作用，而透明度动画可以。经过热重载后，只渲染缩放动画的最后一帧。有趣的是，如果我们用Transform.scale小部件替换Opacity小部件，一切都按预期工作(当Opacity包裹Transform.scale时，而不是Transform.scale包裹Opacity)。

代码示例

代码示例

  1. class TestAnimation extends StatefulWidget {
  2.   const TestAnimation({super.key});
  4.   @override
  5.   State<TestAnimation> createState() => _TestAnimationState();
  6. }
  8. class _TestAnimationState extends State<TestAnimation>
  9.     with SingleTickerProviderStateMixin {
  10.   late final AnimationController _controller;
  12.   Animation<double> _scale = const AlwaysStoppedAnimation(0);
  13.   Animation<double> _opacity = const AlwaysStoppedAnimation(0);
  15.   @override
  16.   void initState() {
  17.     super.initState();
  18.     _controller = AnimationController(
  19.       vsync: this,
  20.       duration: const Duration(seconds: 2),
  21.     );
  22.     _controller.addListener(() => setState(() {}));
  23.   }
  25.   @override
  26.   void dispose() {
  27.     _controller.dispose();
  28.     super.dispose();
  29.   }
  31.   TickerFuture _animate() {
  32.     _scale = _controller.drive(
  33.       Tween<double>(
  34.         begin: 0,
  35.         end: 1.5,
  36.       ),
  37.     );
  39.     _opacity = _controller.drive(
  40.       Tween<double>(
  41.         begin: 0,
  42.         end: 1,
  43.       ),
  44.     );
  46.     return _controller.forward(from: 0);
  47.   }
  49.   @override
  50.   Widget build(BuildContext context) {
  51.     return GestureDetector(
  52.       behavior: HitTestBehavior.translucent,
  53.       onTap: _animate,
  54.       child: DecoratedBox(
  55.         decoration: BoxDecoration(
  56.           border: Border.all(
  57.             width: 2,
  58.             color: Colors.green,
  59.           ),
  60.         ),
  61.         child: Transform.scale(
  62.           scale: _scale.value,
  63.           child: Opacity(
  64.             opacity: _opacity.value,
  65.             child: Container(
  66.               width: 50,
  67.               height: 50,
  68.               color: Colors.red,
  69.             ),
  70.           ),
  71.         ),
  72.       ),
  73.     );
  74.   }
  75. }

截图或视频

截图/视频演示Screen.Recording.2024-07-14.at.4.27.32.PM.mov

日志

日志

  1. [Paste your logs here]

Flutter Doctor输出

Doctor输出

  1. Doctor summary (to see all details, run flutter doctor -v):
  2. [✓] Flutter (Channel beta, 3.23.0-0.1.pre, on macOS 14.5 23F79 darwin-arm64,
  3. locale en-US)
  4. [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
  5. [✓] Xcode - develop for iOS and macOS (Xcode 15.4)
  6. [✓] Chrome - develop for the web
  7. [✓] Android Studio (version 2022.3)
  8. [✓] VS Code (version 1.90.2)
  9. [✓] Connected device (5 available)
  10. [✓] Network resources
  12. • No issues found!
flutter

2条答案

按热度按时间
ego6inou

ego6inou1#

可复现性：使用上述提供的代码示例
完整代码示例

  1. import 'package:flutter/material.dart';
  3. /// Flutter code sample for [Autocomplete].
  5. void main() => runApp(const AutocompleteExampleApp());
  7. class AutocompleteExampleApp extends StatelessWidget {
  8.   const AutocompleteExampleApp({super.key});
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return const MaterialApp(
  13.       home: TestAnimation(),
  14.     );
  15.   }
  16. }
  18. class TestAnimation extends StatefulWidget {
  19.   const TestAnimation({super.key});
  21.   @override
  22.   State<TestAnimation> createState() => _TestAnimationState();
  23. }
  25. class _TestAnimationState extends State<TestAnimation>
  26.     with SingleTickerProviderStateMixin {
  27.   late final AnimationController _controller;
  29.   Animation<double> _scale = const AlwaysStoppedAnimation(0);
  30.   Animation<double> _opacity = const AlwaysStoppedAnimation(0);
  32.   @override
  33.   void initState() {
  34.     super.initState();
  35.     _controller = AnimationController(
  36.       vsync: this,
  37.       duration: const Duration(seconds: 2),
  38.     );
  39.     _controller.addListener(() => setState(() {}));
  40.   }
  42.   @override
  43.   void dispose() {
  44.     _controller.dispose();
  45.     super.dispose();
  46.   }
  48.   TickerFuture _animate() {
  49.     _scale = _controller.drive(
  50.       Tween<double>(
  51.         begin: 0,
  52.         end: 1.5,
  53.       ),
  54.     );
  56.     _opacity = _controller.drive(
  57.       Tween<double>(
  58.         begin: 0,
  59.         end: 1,
  60.       ),
  61.     );
  63.     return _controller.forward(from: 0);
  64.   }
  66.   @override
  67.   Widget build(BuildContext context) {
  68.     return GestureDetector(
  69.       behavior: HitTestBehavior.translucent,
  70.       onTap: _animate,
  71.       child: Center(
  72.         child: SizedBox(
  73.           height: 100,
  74.           width: 100,
  75.           child: DecoratedBox(
  76.             decoration: BoxDecoration(
  77.               border: Border.all(
  78.                 width: 2,
  79.                 color: Colors.green,
  80.               ),
  81.             ),
  82.             child: Transform.scale(
  83.               scale: _scale.value,
  84.               child: Opacity(
  85.                 opacity: _opacity.value,
  86.                 child: Container(
  87.                   width: 50,
  88.                   height: 50,
  89.                   color: Colors.red,
  90.                 ),
  91.               ),
  92.             ),
  93.           ),
  94.         ),
  95.       ),
  96.     );
  97.   }
  98. }

flutter doctor -v

  1. [✓] Flutter (Channel stable, 3.22.2, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
  2.     • Flutter version 3.22.2 on channel stable at /Users/nexus/dev/sdks/flutter
  3.     • Upstream repository https://github.com/flutter/flutter.git
  4.     • Framework revision 761747bfc5 (6 weeks ago), 2024-06-05 22:15:13 +0200
  5.     • Engine revision edd8546116
  6.     • Dart version 3.4.3
  7.     • DevTools version 2.34.3
  9. [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
  10.     • Android SDK at /Users/nexus/Library/Android/sdk
  11.     • Platform android-34, build-tools 34.0.0
  12.     • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
  13.     • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)
  14.     • All Android licenses accepted.
  16. [✓] Xcode - develop for iOS and macOS (Xcode 15.3)
  17.     • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
  18.     • Build 15E204a
  19.     • CocoaPods version 1.15.2
  21. [✓] Chrome - develop for the web
  22.     • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
  24. [✓] Android Studio (version 2024.1)
  25.     • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents
  26.     • Flutter plugin can be installed from:
  27.       🔨 https://plugins.jetbrains.com/plugin/9212-flutter
  28.     • Dart plugin can be installed from:
  29.       🔨 https://plugins.jetbrains.com/plugin/6351-dart
  30.     • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)
  32. [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
  33.     • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
  34.     • Flutter plugin version 77.2.2
  35.     • Dart plugin version 232.10286
  37. [✓] VS Code (version 1.91.1)
  38.     • VS Code at /Applications/Visual Studio Code.app/Contents
  39.     • Flutter extension version 3.92.0
  41. [✓] Connected device (5 available)
  42.     • Nexus (mobile)                  • 00008020-001875E83A38002E • ios            • iOS 17.5.1 21F90
  43.     • Dean’s iPad (mobile)            • 00008103-000825C811E3401E • ios            • iOS 17.5.1 21F90
  44.     • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
  45.     • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.4.1 23E224 darwin-arm64
  46.     • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 126.0.6478.127
  48. [✓] Network resources
  49.     • All expected network resources are available.
  51. • No issues found!
  1. [!] Flutter (Channel master, 3.24.0-1.0.pre.114, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
  2.     • Flutter version 3.24.0-1.0.pre.114 on channel master at /Users/nexus/dev/sdks/flutters
  3.     ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
  4.     ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
  5.     • Upstream repository https://github.com/flutter/flutter.git
  6.     • Framework revision 82b63ff27d (26 hours ago), 2024-07-14 05:07:36 -0400
  7.     • Engine revision a921637f16
  8.     • Dart version 3.6.0 (build 3.6.0-36.0.dev)
  9.     • DevTools version 2.37.1
  10.     • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
  12. [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
  13.     • Android SDK at /Users/nexus/Library/Android/sdk
  14.     • Platform android-34, build-tools 34.0.0
  15.     • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
  16.     • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)
  17.     • All Android licenses accepted.
  19. [✓] Xcode - develop for iOS and macOS (Xcode 15.3)
  20.     • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
  21.     • Build 15E204a
  22.     • CocoaPods version 1.15.2
  24. [✓] Chrome - develop for the web
  25.     • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
  27. [✓] Android Studio (version 2024.1)
  28.     • Android Studio at /Users/nexus/Applications/Android Studio.app/Contents
  29.     • Flutter plugin can be installed from:
  30.       🔨 https://plugins.jetbrains.com/plugin/9212-flutter
  31.     • Dart plugin can be installed from:
  32.       🔨 https://plugins.jetbrains.com/plugin/6351-dart
  33.     • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)
  35. [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
  36.     • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
  37.     • Flutter plugin version 77.2.2
  38.     • Dart plugin version 232.10286
  40. [✓] VS Code (version 1.91.1)
  41.     • VS Code at /Applications/Visual Studio Code.app/Contents
  42.     • Flutter extension version 3.92.0
  44. [✓] Connected device (5 available)
  45.     • Nexus (mobile)                  • 00008020-001875E83A38002E • ios            • iOS 17.5.1 21F90
  46.     • Dean’s iPad (mobile)            • 00008103-000825C811E3401E • ios            • iOS 17.5.1 21F90
  47.     • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
  48.     • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.4.1 23E224 darwin-arm64
  49.     • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 126.0.6478.127
  51. [✓] Network resources
  52.     • All expected network resources are available.
  54. ! Doctor found issues in 1 category.
展开查看全部
赞(0）分享  回复(0）举报  10个月前
hmtdttj4

hmtdttj42#

似乎在RenderOpacity中存在一个涉及重绘边界逻辑的问题。
当alpha值在零和非零之间转换时，RenderOpacity.isRepaintBoundary会发生变化。当这种情况发生时，会调用markNeedsCompositingBitsUpdate,但出于某种原因，小部件仍然渲染为被裁剪到原始大小的样子。
如果我将_opacity动画更改为从0.01开始，这样alpha值永远不会为零，那么这个渲染就会正确。
@jonahwilliams

赞(0）分享  回复(0）举报  10个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com