Severe tearing in animations

[ttjst]

If the shimmer effect is applied to a view that is taller than it is wide in the travel direction of the shimmer a severe tearing effect can be seen.

To visualize this you can test the following layout in portrait & landscape:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/shimmer_test"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:app="http://schemas.android.com/apk/res-auto"
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_weight="2"
                  android:orientation="horizontal">

        <com.facebook.shimmer.ShimmerFrameLayout
            android:id="@+id/shimmer1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:auto_start="true">

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#fd9fe1"/>
        </com.facebook.shimmer.ShimmerFrameLayout>

        <com.facebook.shimmer.ShimmerFrameLayout
            android:id="@+id/shimmer2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:auto_start="true"
            app:angle="cw_90">

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#D0B3CC"/>
        </com.facebook.shimmer.ShimmerFrameLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

basically, it will look like this:

[hussi1]

Any updates on this issue yet @ttjst

[debu-rnpr]

commenting out this line of code canvas.rotate(mMask.tilt, width / 2, height / 2); solves the problem for me

[xiphirx]

This has been resolved in the rewrite that I will plan on release in the coming weeks.