不確定我應該為動畫使用哪個屬性

Question

我正在Windows 8中創建信息亭應用程序，但它將在8.1中用作分配的訪問應用程序。 我想為廣告制作動畫。 動畫的想法通過該線程作為圖像附加。 基本上會有L形的6-10張圖像（右側為一列，底部為一行）。 現在，右下角的一個廣告將停止播放。 列中的廣告將像HTML的選取框一樣遍歷並到達行，此時行中的廣告將遍歷並到達列。 這樣，廣告將繼續按順時針方向移動。 如何在C＃/ XAML應用程序中實現此目標？

請注意，廣告永遠不會在頂部或左側顯示。 廣告為<Image /> ，來源為Internet URL。 所有廣告都在ItemsControl 。

Answer 1

uck，讓我們從我討厭這個應用程序開始。

現在回答。

我認為您真的不需要動畫。 您可能只會經常更改廣告。 而且，只需簡單地改變他們的立場而不是轉變他們的立場就足夠了。

嘗試這個：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Rectangle Fill="White" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" Grid.RowSpan="3" />
    <Rectangle x:Name="Ad1" Fill="Green" Grid.Column="3" Grid.Row="3" />
    <Rectangle x:Name="Ad2" Fill="IndianRed" Grid.Column="0" Grid.Row="3" />
    <Rectangle x:Name="Ad3" Fill="Red" Grid.Column="1" Grid.Row="3" />
    <Rectangle x:Name="Ad4" Fill="DarkRed" Grid.Column="2" Grid.Row="3" />
    <Rectangle x:Name="Ad5" Fill="Pink" Grid.Column="3" Grid.Row="0" />
    <Rectangle x:Name="Ad6" Fill="HotPink" Grid.Column="3" Grid.Row="1" />
    <Rectangle x:Name="Ad7" Fill="Purple" Grid.Column="3" Grid.Row="2" />
</Grid>

有了這個：

public MainPage()
{
    this.InitializeComponent();
    var timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(1) };
    timer.Tick += (s, e) => Move();
    timer.Start();
}

void Move()
{
    var ads = new Rectangle[] { Ad1, Ad2, Ad3, Ad4, Ad5, Ad6, Ad7 };
    foreach (var item in ads)
    {
        var row = (int)item.GetValue(Grid.RowProperty);
        var col = (int)item.GetValue(Grid.ColumnProperty);
        if (row == 3)
        {
            if (col == 0)
            {
                row = 0;
                col = 3;
            }
            else
                col--;
        }
        else
        {
            if (row == 2)
            {
                row = 3;
                col = 2;
            }
            else
                row++;
        }
        item.SetValue(Grid.RowProperty, row);
        item.SetValue(Grid.ColumnProperty, col);
    }
}

對我來說，這看起來不錯。

但是，如果您必須具有動畫，請嘗試此操作。

void Move()
{
    var ads = new Rectangle[] { Ad1, Ad2, Ad3, Ad4, Ad5, Ad6, Ad7 };
    foreach (var item in ads)
    {
        var row = (int)item.GetValue(Grid.RowProperty);
        var col = (int)item.GetValue(Grid.ColumnProperty);
        var x = item.ActualWidth;
        var y = item.ActualHeight;

        // bottom
        if (row == 3)
        {
            // left-last
            if (col == 0)
            {
                row = 0;
                col = 3;
                x = -x;
                y = 0;
            }
            // others
            else
            {
                col--;
                x = -x;
                y = 0;
            }
        }
       // right
       else
        {
           // bottom-last
           if (row == 2)
            {
                row = 3;
                col = 2;
                x = -x;
            }
            else
            {
                row++;
                x = 0;
            }
        }

        var dr = new Duration(TimeSpan.FromSeconds(.5));
        var tx = item.RenderTransform = new TranslateTransform();

        var ax = new DoubleAnimation { To = x, Duration = dr };
        Storyboard.SetTarget(ax, tx);
        Storyboard.SetTargetProperty(ax, "X");

        var ay = new DoubleAnimation { To = y, Duration = dr };
        Storyboard.SetTarget(ay, tx);
        Storyboard.SetTargetProperty(ay, "Y");

        var st = new Storyboard { FillBehavior = FillBehavior.HoldEnd };
        st.Children.Add(ax);
        st.Children.Add(ay);
        st.Completed += (s, e) =>
        {
            item.SetValue(Grid.RowProperty, row);
            item.SetValue(Grid.ColumnProperty, col);
            st.Stop();
        };
        st.Begin();
    }
}

祝你好運！