Maui: [Spec] Переходы

Созданный на 18 мая 2020 · 7Комментарии · Источник: dotnet/maui

Переходы

У Maui уже есть полный API анимации, позволяющий создавать живой и плавный контент на странице. Однако что происходит при переходе между страницами?

Эта спецификация определяет API переходов Мауи. У нас есть два типа хорошо дифференцированных переходов:

Традиционные переходы : Традиционно переходы между разными страницами включали переходы входа и выхода, которые анимировали целые иерархии представлений независимо друг от друга.
Переходы общих элементов : часто существуют элементы, общие для обоих действий, и предоставление возможности перемещать эти общие элементы по отдельности подчеркивает непрерывность между переходами и нарушает границы действий, когда пользователь перемещается по приложению.

shared_transitions

API

Традиционные переходы

Для традиционных переходов нам понадобится новое перечисление с поддерживаемыми переходами:

public enum NavigationTransitionType
{
    None,
    Fade,
    Flip,
    Scale,
    SlideFromLeft,
    SlideFromRight,
    SlideFromTop,
    SlideFromBottom,
    Turnstile
}

И включите новые свойства на странице, чтобы разрешить переходы между страницами с помощью NavigationPage и Shell:

TransitionType : используемый эффект перехода.
TransitionDuration : продолжительность перехода в миллисекундах.

public static readonly BindableProperty TransitionTypeProperty =
     BindableProperty.Create(nameof(TransitionType), typeof(NavigationTransitionType),   typeof(NavigationPage), PageTransitionType.None,
     BindingMode.TwoWay, null);

public NavigationTransitionType TransitionType
{
    get { return (NavigationTransitionType)GetValue(TransitionTypeProperty); }
    set { SetValue(TransitionTypeProperty, value); }
}

public static readonly BindableProperty TransitionDurationProperty =
     BindableProperty.Create(nameof(TransitionDuration), typeof(double), typeof(NavigationPage), 500d,
     BindingMode.TwoWay, null);

public double TransitionDuration
{
    get { return (double)GetValue(TransitionDurationProperty); }
    set { SetValue(TransitionDurationProperty, value); }
}

Общие переходы элементов

С другой стороны, нам нужен способ разрешить переходы общих элементов. Ключ - это способ _ "связать" _ один и тот же элемент, доступный на двух разных страницах.

У нас будет прикрепленное свойство TransitionTag к поддерживаемым элементам, унаследованным от View:

public static readonly BindableProperty TransitionTagProperty =    
     BindableProperty.CreateAttached("TransitionTag", typeof(int), typeof(Transition), 0,
propertyChanged: OnPropertyChanged);

Использование будет:

<Image Source="xamarin.jpg" TransitionTag="logo" WidthRequest="100" />

Отметьте элемент управления для перехода на исходной странице.

<Image Source="xamarin.jpg" TransitionTag="logo" WidthRequest="300" />

И пометьте элемент управления для перехода на целевой странице.

Сценарии

Посмотрим на несколько примеров.

Пример XAML

Пример использования переходов между страницами:

<ContentPage
     TransitionType=“SlideFromBottom”
     TransitionDuration="750" />

Пример использования общих элементов переходов:

Страница 1:

<Image  
     Source="xamagon_preview.png"
     TransitionTag="xamagon"/>

Страница 2:

<Image  
     Source="xamagon.png"
     TransitionTag="xamagon"/>

Примечания

Чтобы отобразить переход, TransitionTag на исходной и целевой страницах должны совпадать.
Вы можете анимировать несколько представлений одновременно, но каждый TransitionTag на странице должен быть уникальным.

Уровень сложности: средний

animation 🎬 enhancement proposal-open

Источник

jsuarezruiz

👍21 ❤8

Самый полезный комментарий

Что касается общих переходов, обратите внимание, что если вы хотите сделать переход из списка элементов (например, Collectionview), свойства «TransitionTag» может быть недостаточно для идентификации представления, которое вы хотите анимировать.

Представьте себе DataTemplate со списком элементов, содержащих изображение и текст, каждое изображение отличается, но TransitionTag всегда один и тот же (например: «ImageToTransition»).

Когда вы касаетесь элемента, средство визуализации навигации должно точно знать, какой элемент нужно перевести, и если у вас есть один тег для всех ваших изображений в CollectionView, это может быть проблемой.

В моем плагине я решил использовать свойство TransitionGroup, которое я использую для идентификации элемента для перевода.

Я хотел бы внести свой вклад в эту функцию, но мой код для Android недостаточно стабилен (есть проблемы с ChildFragments при использовании TabbedPages / MasterPage, но в оболочке, я думаю, все в порядке), также в iOS я подаю в суд на некоторые хаки, чтобы сделать хорошую форму переходов .

Я переработал много кода из первой версии и теперь выглядит лучше, но я не думаю, что он достаточно хорош для использования в ядре, но я готов помочь и внести свой вклад в случае необходимости
https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions

GiampaoloGabba 19 мая 2020

❤8

Все 7 Комментарий

Предположение

Возможно, свойство, которое получает анимацию вместо enum ?
Чтобы иметь возможность расширять и получать настраиваемые анимации, необходимо реализовать некоторый интерфейс ITransitionAnimation .
И некоторые предопределенные анимации для использования в шрифтах, например NamedSize

Пример:

<ContentPage
     Transition=“{local:MyCustomTransition}"
     TransitionDuration="750" />

Или предопределенные «Именованные переходы»

<ContentPage
     Transition=“Fade"
     TransitionDuration="750" />

felipebaltazar 19 мая 2020

👍2

GiampaoloGabba 19 мая 2020

❤8

Кстати, большую часть моего кода можно было бы значительно упростить, если бы некоторые свойства могли быть интегрированы в основное ядро.

GiampaoloGabba 19 мая 2020

❤2

@felipebaltazar Это может быть что-то похожее на предложение о создании пользовательских переходов в TabView https://github.com/xamarin/Xamarin.Forms/issues/10773 Я проведу несколько тестов, а после мы рассмотрим спецификацию.

@GiampaoloGabba Было бы здорово получить ваши отзывы об этом API. Если вы хотите внести свой вклад, как в Xamarin.Forms, мы примем PR, и я буду рад вам помочь. Насчет того параметра, который вы указываете для коллекций, я просмотрел, и вы правы. Mnn, мы можем добавить дополнительное свойство для покрытия этих случаев ( TransitionGroup ) или, возможно, внутренне, если родительский элемент является коллекцией, создать группу автоматически.

jsuarezruiz 21 мая 2020

❤3

или, возможно, внутренне, если родительский элемент является коллекцией, создать группу автоматически.

Я пробовал этот подход, но это было немного сложно. Например, в обзоре коллекции мы можем запустить навигацию на основе изменения SelectedItem.
Гораздо проще было «хлопнуть» свойство для группировки, а затем позволить пользователю решать, когда и как его использовать :)

Кстати, я планирую написать здесь небольшой документ, охватывающий базовую архитектуру, которую я использовал для разработки (как отслеживать переходы и как сделать это в iOS, потому что для этого нет встроенной поддержки, и мне пришлось разрабатывать все вручную , в то время как в Android это намного проще, если исключить дочерние фрагменты, созданные с помощью tappedpage и MasterDetail)

На всякий случай, может быть, есть какие-то хорошие идеи, которые можно перенести сюда и исключить плохие, которых, я уверен, будет много :)

GiampaoloGabba 21 мая 2020

❤2

Звучит хорошо, @GiampaoloGabba , спасибо!

jsuarezruiz 21 мая 2020