Scale animations are blurry

Open

#4,117 opened on Feb 19, 2020 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty: 4/5
Estimated time: 3-5 days
Newbie friendliness: 35/100

Issue type: Bug
Clarity: Mostly clear
Activity status: Stale
Tech stack: javascript, react-native
Domain: desktop, frontend

Research direction

Start by reproducing the scale animation from the issue's React Native example on Windows 10 with the listed React Native Windows and SDK versions. Verify the behavior for both animated and zero-duration transitions; done means text and images are sharp after the animation completes.

Written by the indexing model from the issue text.

Description

Area: Animation Area: Text bug Partner: Stream Workstream: Component Parity

Environment

If you are using latest version:

react-native -v: 0.60.6
react-native run-windows --info:
System:
OS: Windows 10 10.0.18363
CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
Memory: 18.01 GB / 31.84 GB
Binaries:
Node: 10.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.6 => 0.60.6
react-native-windows: 0.60.0-vnext.133 => 0.60.0-vnext.133
rnpm-plugin-windows: 0.3.5 => 0.3.5
Installed UWP SDKs:
10.0.14393.0
10.0.15063.0
10.0.16299.0
10.0.17134.0
10.0.17749.0
10.0.17763.0
10.0.18362.0

Then, specify:

Target Platform Version(s): 10.0.18362.0

Target Device(s): Desktop

Visual Studio Version: 2017

Build Configuration: Debug

Steps to Reproduce

Create a project using react-native-windows that includes a scale animation on a component that includes images and text. Perform the scale animation.

As a sidenote, if a duration of 0 is possible, the animation should not be blurry after the animation is complete as well.

Expected Behavior

The text and images should not be blurry after the animation has completed.

Actual Behavior

Text is blurry after the animation has completed.

Reproducible Example

const animatedValue = Animated.Value(1);
const style = {
        transform: [
            {
                scale: this.animatedValue,
            },
        ],
    };
enlarge = Animated.timing(this.animatedValue, {
        toValue: 1.25,
        duration: 1000,
    });
shrink = Animated.timing(this.animatedValue, {
        toValue: 1,
        duration: 1000,
    });
<View onHoverStart={this.enlarge.start()} onHoverEnd={this.shrink.start()} style={this.style}>
    <Text>Hello, World!</Text>
</View>

Dominant language: C++
Stars: 17.3k
Forks: 1.2k
Avg merge: 1d 13h
Merged PRs (30d): 33

Contributor guide

Open the contributing guide

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.