Xamarin.Forms.Как сделать анимацию слайд-шоу и исчезнуть для поиска? - PullRequest
Новая
       21

Xamarin.Forms.Как сделать анимацию слайд-шоу и исчезнуть для поиска?

0 голосов
/ 21 ноября 2018

У меня есть компонент: 

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

Как я могу это исправить?Как добиться плавности?

Ниже приведен пример анимации.Панель уходит справа налево.

slade show & fade

Может быть, есть другие варианты решения этой проблемы?

А также после завершения анимацииВход не реагирует на нажатие.С чем это может быть связано и как это исправить? 

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

1 Ответ

0 голосов
/ 30 ноября 2018

Я создал компонент 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";
    }
...