Xamarin.Forms。如何制作动画幻灯片和淡入淡出以供搜索？

Question

我有一个组件：

<Grid VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" x:Name="grid">
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Entry Grid.Row="0" x:Name="textField" Keyboard="Text" BackgroundColor="#a6ffffff" />

    <Image Source="Search.png" HorizontalOptions="StartAndExpand" WidthRequest="25" HeightRequest="25">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="Image_Tapped" />
        </Image.GestureRecognizers>
    </Image>
</Grid>

这个组件位于右上角的AbsoluteLayout中。当我点击图片时，我的对象从右到左。但它工作起来很不稳定。这是我的动画：

void Image_Tapped(object sender, EventArgs e)
{
  var img = sender as Image;

  var animation = new Animation();

  var textFieldTranslate = new Animation(v => textField.TranslationX = v, img.Width img.Width - 300);
  var textFieldChangeWidth = new Animation(v => textField.WidthRequest = v, 0, 300);

  animation.Add(0, 1, textFieldTranslate);
  animation.Add(0, 1, textFieldChangeWidth);

  animation.Commit(this, "Slide", 1000, 500, Easing.Linear);
}

我该如何解决这个问题？如何做到流畅？

下面是一个动画例子。面板从右到左离开。

也许这个问题还有其他解决方案？

而且在动画完成后，Entry 不响应点击。它可以连接什么以及如何修复它？

<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0"
                Padding="{StaticResource ContentPagePadding}" BackgroundColor="#000017">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="9*" />
    </Grid.RowDefinitions>
    <ContentPresenter VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Row="1" Padding="5, 0" />

    <AbsoluteLayout>
        <Image Source="logo.png" AbsoluteLayout.LayoutBounds=".1, 0, .3, 1" AbsoluteLayout.LayoutFlags="All" />

        <Image Source="bookmark.png" AbsoluteLayout.LayoutBounds=".8, .5, .1, .4" AbsoluteLayout.LayoutFlags="All" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer Command="{TemplateBinding BookmarkCommand}" />
            </Image.GestureRecognizers>
        </Image>

        <AbsoluteLayout AbsoluteLayout.LayoutBounds=".9, .4, .1, .4" AbsoluteLayout.LayoutFlags="All">
            <ctrl:SearchView />
        </AbsoluteLayout>
    </AbsoluteLayout>
</Grid>

Answer 1

我创建了组件 HeaderView：

    <AbsoluteLayout>
        <FlexLayout Direction="RowReverse" AbsoluteLayout.LayoutBounds=".1, .5, .9, .5" 
                    AbsoluteLayout.LayoutFlags="All">
            <ctrl:ExtendedEntry x:Name="textField"
                                Style="{StaticResource SearchEntryStyle}"
                                Placeholder="{ext:Translate Search_placeholder}"
                                TextChanged="Handle_TextChanged" />
        </FlexLayout>

        <Image Source="Search.png" x:Name="image"
               AbsoluteLayout.LayoutBounds=".9, .5, .1, .4" AbsoluteLayout.LayoutFlags="All">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Image_Tapped" />
                </Image.GestureRecognizers>
        </Image>
    </AbsoluteLayout>

C#代码：

    void AnimationIn()
    {
        textField.IsVisible = true;
        image.Source = "Search_active.png";

        new Animation(v => textField.WidthRequest = v, 0, EntryWidth)
            .Commit(this, "SlideIn", 1000, ANIMATION_TIME, Easing.CubicIn);
    }

    void AnimationOut()
    {
        new Animation(v => textField.WidthRequest = v, EntryWidth, 0)
            .Commit(this, "SlideOut", 1000, ANIMATION_TIME, Easing.CubicOut);

        image.Source = "Search.png";
    }

Xamarin.Forms。如何制作动画幻灯片和淡入淡出以供搜索？

Xamarin.Forms. How to make animation Slide show & Fade for search?

animation

slideshow

xamarin.forms