Skip to content

[Fabric] Change Switch thumb to use composition animations - #12207

Merged
Tatiana Kapos (TatianaKapos) merged 7 commits into
microsoft:mainfrom
TatianaKapos:tk-switch-animation
Oct 17, 2023
Merged

[Fabric] Change Switch thumb to use composition animations#12207
Tatiana Kapos (TatianaKapos) merged 7 commits into
microsoft:mainfrom
TatianaKapos:tk-switch-animation

Conversation

@TatianaKapos

@TatianaKapos Tatiana Kapos (TatianaKapos) commented Oct 4, 2023

Copy link
Copy Markdown
Contributor

Description

Changes Switch's thumb to use composition animations and adds animation for path

Type of Change

  • New feature (non-breaking change which adds functionality)

Why

First part of #12188, still need to animate thumb increasing in size on hover

What

Add thumb visual to CompositionContextHelper

Screenshots

Before (switch's are styled differently so color is different!)

Playground-composition_O4pUFtItIz.mp4

After

Playground-composition_pzQppcD0qu.mp4

Testing

tested locally on both devbox and laptop to check sizing!

Changelog

no

Microsoft Reviewers: Open in CodeFlow

Comment on lines +113 to +122
[webhosthidden]
[experimental]
interface ISwitchThumbVisual
{
IVisual InnerVisual { get; };
void Size(Windows.Foundation.Numerics.Vector2 size);
void Position(Windows.Foundation.Numerics.Vector2 position);
Boolean IsVisible { get; set; };
void Color(Windows.UI.Color color);
}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a write up anywhere about why/when you need to create these visual wrappers? (as opposed to talking to a generic visual directly) If not, maybe a MD file in the Fabric/Composition directory that describes how to approach this? Is this to enable compositor abstraction (system/lifted/airspace)?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a write-up in the internal One-Note, but's it's very minimal. Once it's filled out more, I can add it as a MD file! :)

pull Bot pushed a commit to waqarahmadweb/react-native-windows that referenced this pull request Oct 10, 2023
…#12207)

* add skeleton code

* adds offset animation

* add color and size with pointscalefactor

* adds ability to switch composition

* remove old code

* Change files

* fix build
@TatianaKapos
Tatiana Kapos (TatianaKapos) merged commit 7e6573b into microsoft:main Oct 17, 2023
@TatianaKapos
Tatiana Kapos (TatianaKapos) deleted the tk-switch-animation branch October 17, 2023 17:53
Yajur Grover (YajurG) pushed a commit to YajurG/react-native-windows that referenced this pull request Oct 18, 2023
…#12207)

* add skeleton code

* adds offset animation

* add color and size with pointscalefactor

* adds ability to switch composition

* remove old code

* Change files

* fix build
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

3 participants