Question

我有一个客户要求将动画/平移图像添加到他们的网站。基本上，它是一个标准尺寸的图像，他想把它放在一个稍微窄一点的框架中，让图像从左到右平移，作为他网站上的视觉元素。不需要点击和拖动;它基本上是一个从左到右的动画平移，然后用另一张图片重新开始。

这是一个.NET页面，我有一堆Silverlight书籍坐在这里，我想要学习它。我觉得现在和任何人一样好，因为现在我真的有一个真实的用途。为了记录，我是.NET开发人员的经验，但除了阅读几本书的前几章之外，还没有在Silverlight上玩过多少。

所以......第一个问题，我假设这可能与Silverlight有关，我错了吗？

第二个问题，如果我能做到，有人可以指出我在正确的方向上做到这一点需要什么功能/控制/技术？我正在阅读深度变焦，但这似乎并不是我想要的。我只需要采用标准尺寸的jpeg / gif /无论文件，并从左到右缓慢平移。为了做到这一点，我需要学习什么Silverlight功能/花一些时间学习？

Answer 1

这当然可行。你将基本上有一个坐在画布上的图像，你将在该画布上处理MouseMove事件。当鼠标从一侧移动到另一侧时，您将对图像应用平移以将其从一侧移动到另一侧。

以下代码可以帮助您入门：

将带有图像的画布添加到MainPage.xaml（注意MouseMove / Enter / Leave事件）

<Canvas x:Name="LayoutCanvas" MouseMove="LayoutCanvas_MouseMove" MouseEnter="LayoutCanvas_MouseEnter" Height="200" Width="200">
     <Image x:Name="imgToMove" Source="myimage.png" />
</Canvas>

在您的代码中，添加MouseMove / Enter / Leave事件

    Point lastMousePos = new Point();
    Point currentMousePos = new Point();
    double amountToMove = 1;
    private void LayoutCanvas_MouseMove(object sender, MouseEventArgs e)
    {
        currentMousePos = e.GetPosition(LayoutCanvas);
        if (lastMousePos.X > currentMousePos.X)
        {
            amountToMove--;
        }
        else
        {
            amountToMove++;
        }
        imgToMove.SetValue(Canvas.LeftProperty, amountToMove);
        lastMousePos = currentMousePos;
    }

    private void LayoutCanvas_MouseEnter(object sender, MouseEventArgs e)
    {
        lastMousePos = e.GetPosition(LayoutCanvas);
    }

    private void LayoutCanvas_MouseLeave(object sender, MouseEventArgs e)
    {
        imgToMove.SetValue(Canvas.LeftProperty, (double)0);
    }

你已经完成了。现在，当您将鼠标移到图像上时，图像将从左向右或从右向左平移。当您离开图像时，它将返回其原始位置。

Answer 2

我认为你可以做到。阅读有关动画的书中的章节，您将看到如何轻松移动图像。并阅读在像Canvas这样的布局面板中定位像Image这样的控件。

Answer 3

您正在寻找的是投影变换。

一些好的消息来源是：

Jaime Rodriguez的

Silverlight 3 PlaneProjection Primer

MSDN Documentation of PlaneProjection

Foundation Silverlight 3 Animation by Jeff Paries

的第7章

基本上你要做的是创建一个沿Y轴旋转的动画。

Silverlight：动画和/或平移图像

3 个答案: