[Android 10] Activity zoom transition by shihaohong · Pull Request #41935 · flutter/flutter

shihaohong · 2019-10-03T21:14:45Z

Description

Implement the Android 10 Zoom transition.

Edit: The yellow tinge in the gif is an artifact from creating the gif.

To use this transition, add it your app's theme. For example, this is how you would do this with MaterialApp for Android devices:

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: PageTransitionsTheme(
      builders: {
        TargetPlatform.android: ZoomPageTransitionsBuilder(),
      },
    ),
  ),
  // ...
);

Related Issues

Fixes #39812
Related to #40258
Related to #39858

Tests

I added the following tests:

A test to ensure that the ZoomPageTransition is used if specified in PageTransitionsTheme.

Checklist

Before you create this PR confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]). This will ensure a smooth and quick review process.

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I signed the CLA.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I updated/added relevant documentation (doc comments with ///).
All existing and new tests are passing.
The analyzer (flutter analyze --flutter-repo) does not report any problems on my PR.
I am willing to follow-up on review comments in a timely manner.

Breaking Change

Does your PR require Flutter developers to manually update their apps to accommodate your change?

Yes, this is a breaking change (Please read Handling breaking changes). Replace this with a link to the e-mail where you asked for input on this proposed change.
No, this is not a breaking change.

TODO: implement reverse curve and further improve fastOutExtraSlowIn curve to look more like native transition

fluttergithubbot · 2019-10-03T21:14:46Z

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

…ions

shihaohong · 2019-10-15T22:18:04Z

I created a separate issue (#42802) to track setting page transition duration to a value other than 300ms, since the Android 10 activity transition is supposed to be over 400ms.

Zazo032 · 2019-10-15T23:24:09Z

Should this be the default behavior when this PR is merged? https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#widget-libraries-follow-the-latest-oem-behavior

shihaohong · 2019-10-15T23:30:43Z

@Zazo032 I was thinking of making this the default transition in a separate PR. Making that change would be breaking and involve some code and documentation changes. I would prefer to distinguish between the implementation details of the transition from making it the default Android transition for this PR.

HansMuller

LGTM. Just a few comments about small stuff.

HansMuller · 2019-10-17T19:09:50Z

packages/flutter/lib/src/animation/tween_sequence.dart

+///
+/// This tween sequence assumes that the evaluated result has to be a double
+/// between 0.0 and 1.0.
+class FlippedTweenSequence extends TweenSequence<double> {


Maybe we should also provide (separate PR) a FlippedTween, like ReverseTween:

class FlipTween<T> extends Tween<T> { FlipTween(this.parent) : assert(parent != null), super(begin: parent.end, end: parent.begin); final Tween<T> parent; @override T lerp(double t) => 1.0 - parent.lerp(1.0 - t); }

Created an issue to track this: #43011

HansMuller · 2019-10-17T19:11:25Z

packages/flutter/lib/src/animation/tween_sequence.dart

+      super(items);
+
+  @override
+  double transform(double t) {


Why isn't this just

double transform(double t) => 1 - super.transform(1 - t);

This is indeed just that. Updated it

HansMuller · 2019-10-17T19:19:28Z

packages/flutter/lib/src/material/page_transitions_theme.dart

+    end: 0.60,
+  );
+
+  // A curve sequence similar to the 'fastOutExtraSlowIn' curve used in the


similar => that's similar

HansMuller · 2019-10-17T19:22:02Z

packages/flutter/lib/src/material/page_transitions_theme.dart

 ///  * [OpenUpwardsPageTransitionsBuilder], which defines a page transition
 ///    that's similar to the one provided by Android P.
+///  * [ZoomPageTransitionsBuilder], which defines a page transition similar
+///    to the one provided in Android Q.


HansMuller · 2019-10-17T19:30:10Z

packages/flutter/lib/src/material/page_transitions_theme.dart

+
+  @override
+  Widget build(BuildContext context) {
+    final Animation<double> _forwardScrimOpacityAnimation = _ZoomPageTransition._scrimOpacityTween


You could write these animations in terms of Animation.drive. For example:

final Animation<double> _forwardScrimOpacityAnimation = widget.animation.drive( CurveTween(curve: const Interval(0.2075, 0.4175)), );

Is there a difference having these animations in terms of Animation.drive vs using Tween.animate?

Animation.drive is consider to be a little easier to read. They're functionally the same.

HansMuller · 2019-10-17T19:35:57Z

packages/flutter/lib/src/material/page_transitions_theme.dart

+    });
+  }
+
+  bool get _transitionWasInterrupted {


This would be a good place to explain why we're checking if the transition was interrupted.

* Android 10 zoom transition

shihaohong added 2 commits October 2, 2019 18:01

(WIP) - Android 10 zoom transition

6df2e7a

WIP - Implement overall activity transitions

172cc48

TODO: implement reverse curve and further improve fastOutExtraSlowIn curve to look more like native transition

shihaohong added platform-android Android applications specifically framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. work in progress; do not review labels Oct 3, 2019

googlebot added the cla: yes label Oct 3, 2019

shihaohong added 6 commits October 3, 2019 14:49

Add flipped curves

8719252

Merge branch 'master' of github.com:flutter/flutter into zoom-transit…

e325579

…ions

Add interrupted animation behavior

b58e1e6

Add appropriate source code comments

92fe866

Add ZoomPageTransition test

6932c86

Comment on FlippedTweenSequence

fd683f2

shihaohong changed the title ~~WIP - [Android 10] Activity zoom transition~~ [Android 10] Activity zoom transition Oct 14, 2019

shihaohong removed the work in progress; do not review label Oct 14, 2019

shihaohong requested a review from HansMuller October 14, 2019 23:38

HansMuller approved these changes Oct 17, 2019

View reviewed changes

Code review feedback

e86172d

HansMuller mentioned this pull request Oct 18, 2019

Upcoming Material Library Features #43035

Closed

4 tasks

shihaohong added the waiting for tree to go green label Oct 22, 2019

shihaohong mentioned this pull request Oct 22, 2019

Make Android 10 Activity Animation the default animation #43277

Closed

shihaohong merged commit 547b86a into flutter:master Oct 22, 2019

shihaohong deleted the zoom-transitions branch October 22, 2019 19:09

Inconnu08 pushed a commit to Inconnu08/flutter that referenced this pull request Nov 26, 2019

[Android 10] Activity zoom transition (flutter#41935)

11df934

* Android 10 zoom transition

max-hk mentioned this pull request May 23, 2020

Implement Android 10 transition animation pd4d10/git-touch#94

Closed

AlexV525 mentioned this pull request May 31, 2020

[PageTransitionsBuilder] ZoomPageTransition causing widget rebuild three times #58345

Closed

shihaohong mentioned this pull request Jun 29, 2020

[Android Q] New push route animation on Android Q #34675

Closed

MrNegativeTW mentioned this pull request Jul 17, 2020

導入 Android 10 的 Default Activity Transition RoadReport/RoadReport_AndroidClient#8

Closed

github-actions bot locked as resolved and limited conversation to collaborators Aug 3, 2021

Conversation

shihaohong commented Oct 3, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issues

Tests

Checklist

Breaking Change

Uh oh!

fluttergithubbot commented Oct 3, 2019

Uh oh!

shihaohong commented Oct 15, 2019

Uh oh!

Zazo032 commented Oct 15, 2019

Uh oh!

shihaohong commented Oct 15, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

shihaohong commented Oct 3, 2019 •

edited

Loading

shihaohong commented Oct 15, 2019 •

edited

Loading