Ytukyg

I have a component:

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

This component is located in AbsoluteLayout in the right corner. When I click on the picture, my object goes from right to left. But it works jerky. Here is my animation:

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

}

How can I fix this? How to achieve smoothness?

Below is an example of animation. Panel leaves from right to left.

Maybe there are other solutions to this problem?

And also after the animation has completed, Entry does not respond to tap. What can it be connected with and how to fix it?

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

I created component 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# code:

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

    }