search

Baseflow / LottieXamarin

Render After Effects animations natively on Android, iOS, MacOS and TvOS for Xamarin
https://baseflow.com
Apache License 2.0
1.21k stars 261 forks source link

Xamarin iOS - animation scaling out of bounds #387

Open barrytheunissen opened 1 year ago

barrytheunissen commented 1 year ago

🐛 Bug Report

If you put an animation in a grid, or a stacklayout, or anything, and set the Scale (or even if you leave the default), it scales right over and outside of the bounds of a StackLayout or Grid entry, even the entire screen sometimes.

Using HeightRequest / WidthRequest also does not seem to be honoured correctly.

It seems line 42 in AnimationViewRenderer for Ios is the problem.

It is forcing ScaleAspectFit.

What if you want any of the other options, like ScaleAspectFill? This is not revealed through the interface although it looks like somebody made some attempt at adding a property for "ScaleType".

What happens if you don't want any scaling? The animation must be "as is" (according to the scale you specified), but must just be "clipped" at the edges where it overflows the size of the StackLayout or Grid entry.

The problem is if you have an animation and you would like to set the scale (to say 2), then it scales, but it goes out of bounds of the cell for a grid...it should be possible to scale, and the scaling should happen, but then the animation should be "clipped" to the bounds it is in...and not overrun outside that and flow all over the screen (into different grid cells, and so forth)

I have attached a sample Xamarin Forms solution where you can see the problem in iOS...(it seems OK in Android, for some reason).

Expected behavior

it should be possible to scale, and the scaling should happen, but then the animation should be "clipped" to the bounds it is in...and not overrun outside that and flow all over the screen (into different grid cells, and so forth)

Reproduction steps

Try this grid in a Xamarin Forms project and run it on an iOS device...you will quickly see the problem...grid row 1, column 1 should not be overflowing the animation into grid row 0 column 1, it should keep the scale of the animation but "clip" the edges when it reaches the boundaries of grid row 1, column 1 :

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="{StaticResource Accent}" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
        <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
            <ContentView Padding="0,40,0,40" VerticalOptions="FillAndExpand">
                <Image Source="xamarin_logo.png" VerticalOptions="Center" HeightRequest="64" />
            </ContentView>
        </StackLayout>
    </StackLayout>

    <StackLayout Grid.Row="0" Grid.Column="1" BackgroundColor="{StaticResource Accent}" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
        <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
            <ContentView Padding="0,40,0,40" VerticalOptions="FillAndExpand">
                <Image Source="xamarin_logo.png" VerticalOptions="Center" HeightRequest="64" />
            </ContentView>
        </StackLayout>
    </StackLayout>

    <StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="{StaticResource Accent}" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
        <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
            <ContentView Padding="0,40,0,40" VerticalOptions="FillAndExpand">
                <Image Source="xamarin_logo.png" VerticalOptions="Center" HeightRequest="64" />
            </ContentView>
        </StackLayout>
    </StackLayout>

    <StackLayout Grid.Row="1" Grid.Column="1" BackgroundColor="{StaticResource Accent}" >
        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <forms:AnimationView
                x:Name="animationView"
                Animation="wind_0.json"
                AnimationSource="EmbeddedResource"
                AutoPlay="True"
                RepeatCount="900"
                RepeatMode="Infinite"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                Scale="1"
            />
        </StackLayout>
    </StackLayout>

</Grid>

Configuration

Version: 1.x

Platform: