benchmark animation performance of Opacity widget (#54903)

dev/benchmarks/macrobenchmarks/lib/common.dart

@@ -12,3 +12,4 @@ const String kLargeImagesRouteName = '/large_images';
 const String kTextRouteName = '/text';
 const String kAnimatedPlaceholderRouteName = '/animated_placeholder';
 const String kColorFilterAndFadeRouteName = '/color_filter_and_fade';
+const String kFadingChildAnimationRouteName = '/fading_child_animation';

dev/benchmarks/macrobenchmarks/lib/main.dart

@@ -12,6 +12,7 @@ import 'src/animated_placeholder.dart';
 import 'src/backdrop_filter.dart';
 import 'src/cubic_bezier.dart';
 import 'src/cull_opacity.dart';
+import 'src/filtered_child_animation.dart';
 import 'src/post_backdrop_filter.dart';
 import 'src/simple_animation.dart';
 import 'src/text.dart';
@@ -40,6 +41,7 @@ class MacrobenchmarksApp extends StatelessWidget {
         kTextRouteName: (BuildContext context) => TextPage(),
         kAnimatedPlaceholderRouteName: (BuildContext context) => AnimatedPlaceholderPage(),
         kColorFilterAndFadeRouteName: (BuildContext context) => ColorFilterAndFadePage(),
+        kFadingChildAnimationRouteName: (BuildContext context) => const FilteredChildAnimationPage(FilterType.opacity),
       },
     );
   }
@@ -124,6 +126,13 @@ class HomePage extends StatelessWidget {
               Navigator.pushNamed(context, kColorFilterAndFadeRouteName);
             },
           ),
+          RaisedButton(
+            key: const Key(kFadingChildAnimationRouteName),
+            child: const Text('Fading Child Animation'),
+            onPressed: () {
+              Navigator.pushNamed(context, kFadingChildAnimationRouteName);
+            },
+          ),
         ],
       ),
     );

dev/benchmarks/macrobenchmarks/lib/src/filtered_child_animation.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:math';
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+enum FilterType {
+  opacity, rotateTransform, rotateFilter,
+}
+
+class FilteredChildAnimationPage extends StatefulWidget {
+  const FilteredChildAnimationPage(
+      this._filterType,
+      [
+        this._complexChild = true,
+        this._useRepaintBoundary = true,
+      ]);
+
+  final FilterType _filterType;
+  final bool _complexChild;
+  final bool _useRepaintBoundary;
+
+  @override
+  _FilteredChildAnimationPageState createState() => _FilteredChildAnimationPageState(_filterType, _complexChild, _useRepaintBoundary);
+}
+
+class _FilteredChildAnimationPageState extends State<FilteredChildAnimationPage> with SingleTickerProviderStateMixin {
+  _FilteredChildAnimationPageState(this._filterType, this._complexChild, this._useRepaintBoundary);
+
+  AnimationController _controller;
+  bool _useRepaintBoundary;
+  bool _complexChild;
+  FilterType _filterType;
+  final GlobalKey _childKey = GlobalKey(debugLabel: 'child to animate');
+  Offset _childCenter = Offset.zero;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      final RenderBox childBox = _childKey.currentContext.findRenderObject() as RenderBox;
+      final Offset localCenter = childBox.paintBounds.center;
+      _childCenter = childBox.localToGlobal(localCenter);
+    });
+    _controller = AnimationController(vsync: this, duration: const Duration(seconds: 2));
+    _controller.repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _setFilterType(FilterType type, bool selected) {
+    setState(() => _filterType = selected ? type : null);
+  }
+
+  String get _title {
+    switch (_filterType) {
+      case FilterType.opacity: return 'Fading Child Animation';
+      case FilterType.rotateTransform: return 'Transformed Child Animation';
+      case FilterType.rotateFilter: return 'Matrix Filtered Child Animation';
+      default: return 'Static Child';
+    }
+  }
+
+  static Widget _makeChild(int rows, int cols, double fontSize, bool complex) {
+    final BoxDecoration decoration = BoxDecoration(
+      color: Colors.green,
+      boxShadow: complex ? <BoxShadow>[
+        const BoxShadow(
+          color: Colors.black,
+          blurRadius: 10.0,
+        ),
+      ] : null,
+      borderRadius: BorderRadius.circular(10.0),
+    );
+    return Stack(
+      alignment: Alignment.center,
+      children: <Widget>[
+        Column(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: List<Widget>.generate(rows, (int r) => Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: List<Widget>.generate(cols, (int c) => Container(
+              child: Text('text', style: TextStyle(fontSize: fontSize)),
+              decoration: decoration,
+            )),
+          )),
+        ),
+        const Text('child',
+          style: TextStyle(
+            color: Colors.blue,
+            fontSize: 36,
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _animate({Widget child, bool protectChild}) {
+    if (_filterType == null) {
+      _controller.reset();
+      return child;
+    }
+    _controller.repeat();
+    Widget Function(BuildContext, Widget) builder;
+    switch (_filterType) {
+      case FilterType.opacity:
+        builder = (BuildContext context, Widget child) => Opacity(
+          opacity: (_controller.value * 2.0 - 1.0).abs(),
+          child: child,
+        );
+        break;
+      case FilterType.rotateTransform:
+        builder = (BuildContext context, Widget child) => Transform(
+          transform: Matrix4.rotationZ(_controller.value * 2.0 * pi),
+          alignment: Alignment.center,
+          child: child,
+        );
+        break;
+      case FilterType.rotateFilter:
+        builder = (BuildContext context, Widget child) => ImageFiltered(
+          imageFilter: ImageFilter.matrix((
+              Matrix4.identity()
+                ..translate(_childCenter.dx, _childCenter.dy)
+                ..rotateZ(_controller.value * 2.0 * pi)
+                ..translate(- _childCenter.dx, - _childCenter.dy)
+          ).storage),
+          child: child,
+        );
+        break;
+    }
+    return RepaintBoundary(
+      child: AnimatedBuilder(
+        animation: _controller,
+        child: protectChild ? RepaintBoundary(child: child) : child,
+        builder: builder,
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(_title),
+      ),
+      body: Center(
+        child: _animate(
+          child: Container(
+            key: _childKey,
+            color: Colors.yellow,
+            width: 300,
+            height: 300,
+            child: Center(
+              child: _makeChild(4, 3, 24.0, _complexChild),
+            ),
+          ),
+          protectChild: _useRepaintBoundary,
+        ),
+      ),
+      bottomNavigationBar: BottomAppBar(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                const Text('Opacity:'),
+                Checkbox(
+                  value: _filterType == FilterType.opacity,
+                  onChanged: (bool b) => _setFilterType(FilterType.opacity, b),
+                ),
+                const Text('Tx Rotate:'),
+                Checkbox(
+                  value: _filterType == FilterType.rotateTransform,
+                  onChanged: (bool b) => _setFilterType(FilterType.rotateTransform, b),
+                ),
+                const Text('IF Rotate:'),
+                Checkbox(
+                  value: _filterType == FilterType.rotateFilter,
+                  onChanged: (bool b) => _setFilterType(FilterType.rotateFilter, b),
+                ),
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                const Text('Complex child:'),
+                Checkbox(
+                  value: _complexChild,
+                  onChanged: (bool b) => setState(() => _complexChild = b),
+                ),
+                const Text('RPB on child:'),
+                Checkbox(
+                  value: _useRepaintBoundary,
+                  onChanged: (bool b) => setState(() => _useRepaintBoundary = b),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

dev/benchmarks/macrobenchmarks/test_driver/fading_child_animation_perf.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter_driver/driver_extension.dart';
+import 'package:macrobenchmarks/main.dart' as app;
+
+void main() {
+  enableFlutterDriverExtension();
+  app.main();
+}

dev/benchmarks/macrobenchmarks/test_driver/fading_child_animation_perf_test.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:macrobenchmarks/common.dart';
+
+import 'util.dart';
+
+void main() {
+  macroPerfTest(
+    'fading_child_animation_perf',
+    kFadingChildAnimationRouteName,
+    pageDelay: const Duration(seconds: 1),
+    duration: const Duration(seconds: 10),
+  );
+}

dev/devicelab/bin/tasks/fading_child_animation_perf__timeline_summary.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:async';
+
+import 'package:flutter_devicelab/tasks/perf_tests.dart';
+import 'package:flutter_devicelab/framework/adb.dart';
+import 'package:flutter_devicelab/framework/framework.dart';
+
+Future<void> main() async {
+  deviceOperatingSystem = DeviceOperatingSystem.android;
+  await task(createFadingChildAnimationPerfTest());
+}

dev/devicelab/lib/tasks/perf_tests.dart

@@ -189,6 +189,14 @@ TaskFunction createColorFilterAndFadePerfTest() {
   ).run;
 }
 
+TaskFunction createFadingChildAnimationPerfTest() {
+  return PerfTest(
+    '${flutterDirectory.path}/dev/benchmarks/macrobenchmarks',
+    'test_driver/fading_child_animation_perf.dart',
+    'fading_child_animation_perf',
+  ).run;
+}
+
 /// Measure application startup performance.
 class StartupTest {
   const StartupTest(this.testDirectory, { this.reportMetrics = true });

dev/devicelab/manifest.yaml

@@ -201,6 +201,12 @@ tasks:
     stage: devicelab
     required_agent_capabilities: ["mac/android"]
 
+  fading_child_animation_perf__timeline_summary:
+    description: >
+      Measures the runtime performance of opacity filter with fade on Android.
+    stage: devicelab
+    required_agent_capabilities: ["mac/android"]
+
   flavors_test:
     description: >
       Checks that flavored builds work on Android.