Xamarin Forms에서 비례하여 boxview의 크기를 조절하는 애니메이션

Question

내 공유 프로젝트에서 버튼 클릭만으로 BoxView의 크기를 조정해야합니다. 일반적으로 공간을 차지하지 않고 화면 크기의 25 %를 비례 적으로 전환해야하는데 보통은 AbsoluteLayout을 사용합니다.

AbsoluteLayout과 LayoutTo을 사용해 보았습니다. 그러나 LayoutTo이 픽셀 단위로 작동하기 때문에 비례하여 크기를 조정할 수 없었습니다.

다음 코드에서 볼 수 있듯이 Grid 및 사용자 지정 애니메이션을 사용하도록 솔루션을 변경했습니다.

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:local="clr-namespace:AnimationTest" 
      x:Class="AnimationTest.MainPage"> 
    <Grid ColumnSpacing="0" RowSpacing="0"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="9*"/> 
      <RowDefinition Height="1*"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="1*" x:Name="LeftColumn"/> 
      <ColumnDefinition Width="3*"/> 
     </Grid.ColumnDefinitions> 

     <BoxView Color="DarkMagenta" Grid.Row="0" Grid.Column="0"/> 

     <Button Text="Animate" Grid.Row="1" Grid.Column="1" Clicked="Button_Clicked"/> 

    </Grid> 
</ContentPage> 

이는하지만 두 가지 문제를 제시하고

namespace AnimationTest 
{ 
    public partial class MainPage : ContentPage 
    { 
     Animation _animation; 
     bool _boxCollapsed = false; 

     public MainPage() 
     { 
      InitializeComponent(); 
     } 

     private void Button_Clicked(object sender, EventArgs e) 
     { 
      switch (_boxCollapsed) 
      { 
       case true: 
        _animation = new Animation(
        (d) => LeftColumn.Width = new GridLength(1, GridUnitType.Star)); 
        _animation.Commit(this, "the animation", 16, 1000, Easing.SinIn, null, null); 
        _boxCollapsed = false; 
        break; 
       case false: 
        _animation = new Animation(
        (d) => LeftColumn.Width = new GridLength(0, GridUnitType.Star)); 
        _animation.Commit(this, "the animation", 16, 1000, Easing.SinIn, null, null); 
        _boxCollapsed = true; 
        break; 
      } 
     } 
    } 
} 

코드 숨김.

현재이 솔루션은 문제가 될 가능성이있는 BoxView뿐 아니라 전체 열의 크기를 분명히 조정합니다. 두 번째 문제는 Easing 매개 변수를 무시하고 실제로 애니메이션을 적용하지 않고 두 개의 너비 사이를 바로 간다는 것입니다.

누군가가 최소한 Easing과 관련된 이슈를 알리거나 다른 희망을 갖고 우아한 해결책을 제시 할 수 있기를 바랍니다.

Answer 1

애니메이션 라인의 코드를 약간 변경해야합니다. 이미 화면 크기의 25 %를 얻는 방법에 대한 힌트를 제공합니다. 희망이 도움이됩니다.

private void Button_Clicked(object sender, EventArgs e) 
    { 
     var twentyFivePercentOfScreen = this.Width * .25; 

     switch (_boxCollapsed) 
     { 
      case true: 
       _animation = new Animation(
        (d) => LeftColumn.Width = d, 0, twentyFivePercentOfScreen); 
       _animation.Commit(this, "the animation", 16, 250, Easing.SinIn, null, null); 
       _boxCollapsed = false; 
       break; 
      case false: 
       _animation = new Animation(
        (d) => LeftColumn.Width = d, twentyFivePercentOfScreen, 0); 
       _animation.Commit(this, "the animation", 16, 250, Easing.SinIn, null, null); 
       _boxCollapsed = true; 
       break; 
     } 
    }