Come disegnare un arco in winRT con animazione?

Question

Sono un novizio di WinRT e Blend e ho bisogno di disegnare cifre 1, 2 ecc. Con effetto disegno nella mia applicazione WinRT. Il requisito è come se l'applicazione disegnasse la cifra.

Qualsiasi aiuto sarà molto apprezzato.

Grazie in anticipo.

Answer 1

Penso che avresti bisogno di mettere insieme un paio di storyboard per realizzarlo, e ti consiglio davvero di usare Blend per questo!

Aprire un progetto vuoto, sotto oggetti e cronologia c'è un plus, fare clic su di esso e aggiungere una nuova scheda di storia. Spostare la barra gialla della linea storyboard in avanti di alcuni millisecondi. Disegna un pezzo dell'animazione, fai clic su Inizia registrazione e sposta quel pezzo un po '. Interrompe la registrazione. Continua a fare quel pezzo per pezzo finché non hai ciò che vuoi. AS per l'imitazione del disegno. Analizza come vuoi che sia, crea tutti i pezzi separati in cui sarà composta la cifra e imposta la loro opacità a O. Ti consigliamo di utilizzare sia il fotogramma chiave (per il movimento) che la doppia animazione per l'opacità.

ecco un breve demo di un pezzo di percorso che segue una linea curva, ho fatto questo veramente veloce quindi è lontano dall'essere perfetto, ma è di dimostrare la start e stop e come si guardano insieme:

<Page 
x:Class="App10.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:App10" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" FontFamily="Global User Interface"> 
<Page.Resources> 
    <Storyboard x:Name="StoryboardA"> 
     <PointAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.StartPoint)" Storyboard.TargetName="path"> 
      <EasingPointKeyFrame KeyTime="0:0:0.3" Value="107.647,394.591"/> 
      <EasingPointKeyFrame KeyTime="0:0:0.6" Value="147.75,352.713"/> 
      <EasingPointKeyFrame KeyTime="0:0:0.9" Value="197.45,311.391"/> 
      <EasingPointKeyFrame KeyTime="0:0:1.2" Value="268.45,251.392"/> 
      <EasingPointKeyFrame KeyTime="0:0:1.4" Value="346.45,196.392"/> 
      <EasingPointKeyFrame KeyTime="0:0:1.6" Value="417.45,151.392"/> 
      <EasingPointKeyFrame KeyTime="0:0:1.8" Value="503.841,99.7321"/> 
      <EasingPointKeyFrame KeyTime="0:0:2" Value="604.45,53.3924"/> 
      <EasingPointKeyFrame KeyTime="0:0:2.3" Value="705.45,13.392"/> 
     </PointAnimationUsingKeyFrames> 
     <PointAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" Storyboard.TargetName="path"> 
      <EasingPointKeyFrame KeyTime="0:0:0.3" Value="55.8129,445.539"/> 
      <EasingPointKeyFrame KeyTime="0:0:0.6" Value="95.9156,403.661"/> 
      <EasingPointKeyFrame KeyTime="0:0:0.9" Value="139.796,364.539"/> 
      <EasingPointKeyFrame KeyTime="0:0:1.2" Value="198.646,311.319"/> 
      <EasingPointKeyFrame KeyTime="0:0:1.4" Value="266.536,258.09"/> 
      <EasingPointKeyFrame KeyTime="0:0:1.6" Value="330.282,210.352"/> 
      <EasingPointKeyFrame KeyTime="0:0:1.8" Value="408.248,157.542"/> 
      <EasingPointKeyFrame KeyTime="0:0:2" Value="500.776,106.108"/> 
      <EasingPointKeyFrame KeyTime="0:0:2.3" Value="597.831,60.216"/> 
     </PointAnimationUsingKeyFrames> 
    </Storyboard> 
</Page.Resources> 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <Path Data="M73.5,639.5 C73.5,639.5 539.5,33.5 1289.5,79.5 L1535,101.5" HorizontalAlignment="Left" Height="572.492" Margin="68.5,72.008,-174,0" Stretch="Fill" Stroke="Red" StrokeThickness="10" UseLayoutRounding="False" VerticalAlignment="Top" Width="1471.5"/> 
    <Path x:Name="path" HorizontalAlignment="Left" Height="507.972" Margin="66.05,137.358,0,0" Stroke="#FFFFE100" StrokeThickness="15" UseLayoutRounding="False" VerticalAlignment="Top" Width="712.95"> 
     <Path.Data> 
      <PathGeometry> 
       <PathFigure StartPoint="53.45,448.392"> 
        <LineSegment Point="7.50001,500.472"/> 
       </PathFigure> 
      </PathGeometry> 
     </Path.Data> 
    </Path> 
</Grid> 

Ecco un'immagine di come sembra, è la cosa gialla che si muove - il movimento curvo è solo un esempio per mostrare è possibile mettere insieme per creare qualsiasi movimento che si desidera. Qualcosa chiamato funzione di alleggerimento può anche farlo per te, vedi l'immagine qui sotto.

Qui sono disponibili le funzioni di andamento, giocare con esse, in combinazione con gli elementi nello storyboard per creare l'effetto desiderato.

The different easing functions are well explained here on MSD N

Non v'è alcun doppio di animazione negli esempi precedenti, ma simile a questa:

<Storyboard x:Name="myStoryboard"> 
         <DoubleAnimation Duration="0:0:1"         
          Storyboard.TargetName="myImage"    
          Storyboard.TargetProperty="Opacity"    
          From="0" To="1" /> 
        </Storyboard> 

E 'un grande lavoro, e ci vorrà del tempo. E ti consiglio di sederti e imparare come usare Blend e lavorare con gli storyboard prima di farlo. Ci sono molti fantastici tutorial là fuori, e ne varrà la pena. Personalmente tendo a permettere ad un designer di dare una mano con le animazioni, come puoi vedere nello storyboard di cui sopra, non sono un professionista delle animazioni - c'è molto da tenere a mente, in particolare per quanto riguarda le prestazioni dell'app.

Vorrei anche sottolineare alcune delle idee principali dietro l'interfaccia utente moderna, il linguaggio di progettazione richiesto per le app di Windows Store, e cioè rimanere autenticamente digitali. L'app non deve imitare le cose della vita reale, non ha senso in quanto è un'app e non "realtà".

Da MSDN: essere autenticamente digitale sfruttare appieno del mezzo digitale. Elimina i confini fisici per creare esperienze più efficienti e più semplici della realtà. Abbraccia il fatto che siamo pixel su uno schermo. Design con colori audaci, vivaci e nitidi e immagini che vanno oltre i limiti del materiale del mondo reale.

video vale la pena guardare:http://channel9.msdn.com/Events/Ch9Live/Channel-9-Live-at-Tech-Ed-Europe-2012/Panel-Modern-UI-Development

Quindi pensare che, e forse non hanno bisogno di un movimento di disegno. Forse solo un rapido Dissolvenza in chiusura, in questo modo:

<Page 
x:Class="App10.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:App10" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" FontFamily="Global User Interface"> 
<Page.Resources> 
    <Storyboard x:Name="StoryboardB"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Page.Resources> 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="145" Margin="465,386,0,0" TextWrapping="Wrap" Text="AB" VerticalAlignment="Top" FontSize="50" Width="343"/> 
</Grid> 

Answer 2

WinRT XAML Toolkit ha un controllo RingSlice che si potrebbe anche utilizzare e animare la sua startAngle/endAngle per animare facilmente un arco si trasforma in un cerchio. Nota che entrambe le soluzioni di Iris e di questo richiedono di impostare EnableDependentAnimation su un'animazione che è una protezione che ti dice che potrebbero non funzionare molto bene poiché richiedono il codice in esecuzione sul thread dell'interfaccia utente e causeranno ricalcoli del layout che sono lenti soprattutto nelle scene complicate. Una cosa che proverei se risultasse lenta (specialmente su dispositivi lenti come quelli ARM) sarebbe quella di sovrapporre archi più piccoli con lo stesso punto centrale e ruotarli con animazioni RenderTransform attorno a quel punto centrale per ottenere lo stesso effetto. Questo sarebbe un po 'più complicato, ma ha una possibilità di correre più veloce. Dovresti bilanciare il costo dell'animazione sul thread dell'interfaccia utente rispetto a sovrapporre più archi e orchestrare la sequenza di animazione.

Answer 3

Un'altra soluzione generale per disegnare un arco che permettesse di utilizzare un'animazione indipendente e quindi sarebbe eventualmente funzionare meglio sarebbe usare due ellissi sovrapposte ritagliati con un RectangleGeometryClip e animare la Transform della clip di rivelare l'arco gradualmente. Avresti bisogno di due di quelli per avere l'inizio e la fine dell'arco per avere i loro cappucci (estremità) ad angoli arbitrari.

Sarebbe anche una soluzione semplice per simulare rapidamente il disegno di una forma o di un elemento arbitrario, inclusa una cifra.

Answer 4

Se si crea un controllo personalizzato e la necessità di animare le proprietà di dipendenza per esso, ho scritto un post sul blog per aiutare a http://danielgary.net/animating-custom-dependencyproperties/

L'essenza di esso è il cablaggio di un evento per quando la vostra proprietà di dipendenza cambia e aggiorna il codice del layout lì dentro.