Помогите с анимацие на Xaml для Android

Question

Вот мой код хамл, мне надо сделать анимацию для объекта mur.png , что бы он двигался по заданной мне траектории , точнее по "рельсам",которые представлены в мокапе, мокап представлен в фото к этому сообщению, объясните как писать анимацию для андроид на хамл, потому что везде информация только по WPF, либо скиньте источник, где про это можно почитать

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Hello.MainPage"           
         BackgroundColor="#000000">

<AbsoluteLayout>
    <Label Text="My PD" FontSize="20" TextColor="#FFFFFF"
           AbsoluteLayout.LayoutBounds="170, 110, 100, 80" />
    <Label Text="Bill Customer" FontSize="15" TextColor="#FFFFFF"
           AbsoluteLayout.LayoutBounds="72, 45, 200, 80" />
    <Label Text="[email protected]" FontSize="10" TextColor="#707070"
           AbsoluteLayout.LayoutBounds="72, 70, 200, 80" FontFamily="Times New Roman" />
    <Label Text="N/A" FontSize="16" TextColor="#707070"
           AbsoluteLayout.LayoutBounds="160, 180, 200, 80" FontFamily="Times New Roman" />
    <Label Text="N/A" FontSize="16" TextColor="#707070"
           AbsoluteLayout.LayoutBounds="220, 180, 200, 80" FontFamily="Times New Roman" />
    <Label Text="N/A" FontSize="17" TextColor="#707070"
           AbsoluteLayout.LayoutBounds="190, 713, 200, 80" FontFamily="Times New Roman" />
    <Label Text="N/A" FontSize="17" TextColor="#707070"
           AbsoluteLayout.LayoutBounds="67, 348, 200, 80" FontFamily="Times New Roman" />
    <Label Text="N/A" FontSize="17" TextColor="#707070"
           AbsoluteLayout.LayoutBounds="84, 610, 200, 80" FontFamily="Times New Roman" />
    <Label Text="N/A" FontSize="17" TextColor="#707070"
           AbsoluteLayout.LayoutBounds="294, 610, 200, 80" FontFamily="Times New Roman" />
    <Image Source="ellipse.png" 
           AbsoluteLayout.LayoutBounds="0.035, 0.039, 50, 80" 
           AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="bolt.png" 
        AbsoluteLayout.LayoutBounds="0.8, 0.053, 32, 60" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="menu.png" 
        AbsoluteLayout.LayoutBounds="0.94, 0.052, 34, 60" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="settings.png" 
        AbsoluteLayout.LayoutBounds="0.95, 0.12, 40, 80" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="err.png" 
        AbsoluteLayout.LayoutBounds="0.64, 0.13, 28, 64" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="box.png" 
        AbsoluteLayout.LayoutBounds="0.72, 0.13, 28, 64" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="modem.png" 
        AbsoluteLayout.LayoutBounds="0.27, 0.13, 20, 65" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="wifi.png" 
        AbsoluteLayout.LayoutBounds="0.182, 0.13, 20, 65" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="dol.png" 
        AbsoluteLayout.LayoutBounds="0.35, 0.13, 34, 65" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="rec9.png" 
        AbsoluteLayout.LayoutBounds="0.5, 0.8, 150, 100" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="rec8.png" 
        AbsoluteLayout.LayoutBounds="0.5, 0.82, 200, 150" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="palka.png" 
        AbsoluteLayout.LayoutBounds="0.326, 0.41, 100, 150" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="rec6.png" 
        AbsoluteLayout.LayoutBounds="0.61, 0.41, 100, 150" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="rocket.png" 
        AbsoluteLayout.LayoutBounds="0.63, 0.93, 22, 60" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="smart.png" 
        AbsoluteLayout.LayoutBounds="0.5, 0.65, 235, 300" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="off.png" 
        AbsoluteLayout.LayoutBounds="0.835, 0.55, 58, 70" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="rule.png" 
        AbsoluteLayout.LayoutBounds="0.835, 0.64, 54, 70" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="mon.png" 
        AbsoluteLayout.LayoutBounds="0.18, 0.42, 34, 65" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="socket.png" 
        AbsoluteLayout.LayoutBounds="0.22, 0.785, 34, 65" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="drop.png" 
        AbsoluteLayout.LayoutBounds="0.5, 0.93, 41, 65" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="chart.png" 
        AbsoluteLayout.LayoutBounds="0.23, 0.55, 23, 50" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="battery.png" 
        AbsoluteLayout.LayoutBounds="0.38, 0.93, 22, 60" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="adres.png" 
        AbsoluteLayout.LayoutBounds="0.21, 0.64, 53, 70" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="e9.png" 
        AbsoluteLayout.LayoutBounds="0.582, 0.325, 10, 10" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="e10.png" 
        AbsoluteLayout.LayoutBounds="0.443, 0.325, 10, 10" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="e12.png" 
        AbsoluteLayout.LayoutBounds="0.5, 0.862, 10, 10" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="e13.png" 
        AbsoluteLayout.LayoutBounds="0.69, 0.765, 10, 10" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="e14.png" 
        AbsoluteLayout.LayoutBounds="0.31, 0.765, 10, 10" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="grid.png" 
        AbsoluteLayout.LayoutBounds="0.44, 0.29, 20, 60" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="tower.png" 
        AbsoluteLayout.LayoutBounds="0.5, 0.26, 45, 60" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="peak.png" 
        AbsoluteLayout.LayoutBounds="0.59, 0.29, 45, 68" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="heating.png" 
        AbsoluteLayout.LayoutBounds="0.773, 0.785, 30, 68" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="e11.png" 
        AbsoluteLayout.LayoutBounds="0.27, 0.425, 10, 10" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <Image Source="mur.png" 
        AbsoluteLayout.LayoutBounds="0.4, 0.425, 15, 15" 
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    
</AbsoluteLayout>

Answer 1

Насколько я знаю, анимации в maui реализованы в пространстве имен Microsoft.Maui.Controls, а точнее в расширении ViewExtensions. Передвижения элемента реализуется с помощью TranslateTo. Возможности анимировать элементы прямо из xaml нету, если не затрагивать сторонние библиотеки.

В вашем случае, можно сделать так:

Добавить имя вашей картинке

<Image Source="mur.png" 
       x:Name="MurImage" 
       ... />

Обратится к ней из .cs файла страницы

MurImage.TranslateTo(x, y, lenght);

// x - перемещение по оси x, относительно начального положения
// y - перемещение по оси y, относительно начального положения
// lenght - длительность анимации в миллисекундах

Насчет движения по "рельсам", например я бы брал высоту "рельсы", то есть Rail.Height, и относительно этого числа, передвигал бы изображение с помощью, выше описанного, TranslateTo. Тут все зависит только от фантазии.

Вообще у майкрософт отличная документация об анимациях.

БЛОГ НА HUSL

Помогите с анимацие на Xaml для Android

Ответы (1 шт):