Silverlight: анимация и / или панорамирование изображения

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 events

    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

То, что вы ищете, называется проекционным преобразованием.

Некоторые хорошие источники:

Silverlight 3 PlaneProjection Primer от Хайме Родригеса

MSDN Документация PlaneProjection

Глава 7 из Основа анимации Silverlight 3 Джеффа Париса

По сути, вы собираетесь создать анимацию, которая будет применять вращение вдоль оси Y.

Answer 3

Я думаю, вы можете сделать это. Прочитайте главу в своей книге об анимации, и вы увидите, как легко перемещать изображение. И прочитайте о размещении элемента управления, такого как Image, на панели макета, например, Canvas.