Question

我正在Windows 8中创建一个自助服务终端应用，但它将在8.1中用作指定的访问应用。我想为广告制作动画。动画的想法作为图像附加到该线程。基本上将有6-10个L形图像（右侧是一列，另一侧是一排）。现在一个极右下角的广告将是静止的。列中的广告将像HTML的选取框一样遍历，并且当时行中的广告将遍历并到达列。通过这种方式，广告将保持以时钟方式移动。如何在我的C＃/ XAML应用程序中实现这一目标？

请注意，广告不会在顶部或左侧显示。广告为<Image />＆amp;来源是互联网网址。所有广告都在ItemsControl。

enter image description here

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

祝你好运！

不确定我应该将哪个属性用于动画

1 个答案: