Silverlight: animare e / o padella un'immagine

Question

Ho un cliente che richiede un'immagine animata / stroncato da aggiungere al loro sito web. In sostanza, si tratta di un'immagine di dimensioni standard, vuole mettere in una cornice leggermente più stretto e hanno la padella immagine da sinistra a destra come elemento visivo sul suo sito web. Non c'è cliccando e trascinando richiesto; è solo fondamentalmente un tegame animata da sinistra a destra, poi ri-iniziare con un altro quadro.

Questa è una pagina di .NET, e io ho una pila di libri Silverlight seduti qui con l'idea che ho intenzione di imparare. Immagino che ora è un momento buono come qualsiasi, dal momento che ora io in realtà ho un reale utilizzo-live per esso. Per la cronaca, io sono uno sviluppatore .NET esperienza, ma non ho giocato molto con Silverlight al di là leggere i primi due capitoli di un paio di libri.

Quindi ... prima domanda, sto assumendo questo è possibile a che fare con Silverlight, mi sbaglio su questo?

Seconda domanda, se posso farlo, qualcuno mi può puntare nella giusta direzione per quanto riguarda ciò funzione / controllo / tecnologia è necessario per fare questo? Sto leggendo su zoom profondo, ma che non sembra essere piuttosto quello che voglio. Ho solo bisogno di prendere un / file standard di formato jpeg gif / qualunque cosa e hanno lentamente pan da sinistra a destra. Quali caratteristiche di Silverlight ho bisogno di studiare / trascorrere del tempo di apprendimento, al fine di fare questo?

Answer 1

Questa è certamente fattibile. Sarà in sostanza avere un'immagine seduto su una tela e ti gestire gli eventi MouseMove su quella tela. Come le tracce del mouse da un lato all'altro, si applica una traduzione per l'immagine per spostarla da un lato all'altro.

Il seguente codice dovrebbe iniziare:

Aggiungi una tela con l'immagine di MainPage.xaml (notare il MouseMove / Enter / Leave eventi)

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

Nel codice dietro, aggiungere MouseMove / Enter / Lascia eventi

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

E il gioco è fatto. Ora, quando si sposta il mouse sopra l'immagine, l'immagine sarà tradotto sia da sinistra a destra o da destra a sinistra. Quando si lascia l'immagine, tornerà nella sua posizione originale.

Answer 2

Credo che si può fare. Leggere il capitolo sul tuo libro su animazioni e vedrete come è possibile spostare facilmente l'immagine. E leggere di posizionare un controllo come immagine in un pannello di layout come una tela.

Answer 3

Quello che stai cercando è chiamato a trasformare una proiezione.

Alcune buone fonti sono:

Silverlight 3 PlaneProjection Primer da Jaime Rodriguez

MSDN documentazione di PlaneProjection

Fondazione Silverlight 3 Animazione da Jeff Paries

In sostanza quello che stai andando a fare è quello di creare un'animazione che verrà applicata una rotazione lungo l'asse Y.