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

【问题标题】：Xamarin.Forms. How to make animation Slide show & Fade for search?Xamarin.Forms。如何制作动画幻灯片和淡入淡出以进行搜索？
【发布时间】：2019-04-24 01:25:47
【问题描述】：

我有一个组件：

<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>

【问题讨论】：

抱歉，我看不出动画有什么问题。或者 GIF 不是您的实际动画，而是一个示例它的外观？
@PaulKertscher GIF - 外观示例

标签： animation xamarin.forms slideshow

【解决方案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";
    }

【讨论】：