不确定我应该在动画中使用哪个属性

Question

我正在Windows 8中创建一个kiosk应用程序，但它将作为8.1中指定的访问应用程序使用。我想为广告制作一个动画。动画的想法是以图像的形式附加到这个线程中。基本上会有6-10个L形状的图像(右边是列，底部是一行)。现在右下角有一个广告是固定的。列中的广告将像HTML的标题栏一样遍历并到达行，此时行中的广告将遍历并到达列。这样，广告就会保持按时钟方向移动的趋势。如何在我的C#/XAML应用程序中实现这一点？

请不要将广告永远不会显示在顶部或左边。广告是<Image />，源是互联网网址。所有的广告都在ItemsControl上。

​

​

Answer 1

恶心，让我们从我有多讨厌这个应用程序开始吧。

现在给出答案.

我不认为你真的需要动画片。你可能只会经常改变广告。简单地改变他们的立场，而不是转变他们的立场，似乎就足够了。

尝试如下：

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

祝你好运！