アニメーションでwinRTで円弧を描くにはどうすればいいですか？

Question

私はWinRTとBlendの初心者です。WinRTアプリケーションで描画効果を持つ数字1,2などを描画する必要があります。要件は、アプリケーションが数字を描画するようなものです。

本当にありがとうございます。

ありがとうございます。

Answer 1

私はあなたがそれを達成するためにいくつかのストーリーボードをまとめなければならないと思っています。それにBlendを使うことを本当にお勧めします！

空白のプロジェクトを開き、オブジェクトとタイムラインの下にプラスがあり、それをクリックして新しいストーリーボードを追加します。ストーリーボードラインの黄色のバーを数ミリ秒前に移動します。アニメーションの一部を描き、録音を開始してその部分を少し動かす。録音を停止します。あなたが望むものがあるまで、その作品を1曲ずつ続けてください。 図面を模倣するためのAS。どのようにしたいかを分割し、桁が構成されているすべての分割部分を作成し、不透明度をOに設定します。不透明度のキーフレームと動きの両方を使用することをお勧めします。ここで

は曲線次のパスの一部を簡単にデモである、それは遠く離れて完璧からだが、それはスタートを実証し、停止することだとどのように彼らは一緒に見えるので、私は本当に速いこれを作った：

<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> 

ここで

が、それは、どのように見えるかの画像でその移動黄色の事 - 曲がった動きは、あなたが望む任意の動きを作成するためにつなぎ合わせることができます表示するにはあくまでも一例です。イージング機能と呼ばれるものは、あなたのためにこれを行うこともできます。下の画像を参照してください。

利用可能なイージング機能は、ストーリーボード内のアイテムと組み合わせて使用​​して、目的の効果を作ります。

The different easing functions are well explained here on MSD N

あり、上記の例には二重のアニメーションはありませんが、彼らは次のようになります。

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

それは大きな仕事だし、時間がかかります。そして、あなたが座って、Blendを使い、それをする前にストーリーボードで作業する方法を学ぶことをお勧めします。そこに多くの素晴らしいチュートリアルがあり、それは時間の価値があるでしょう。個人的に私はデザイナーにアニメーションを手伝ってもらう傾向があります。上記のストーリーボードに見られるように、私はアニメーションでプロではありません。特に、アプリケーションのパフォーマンスに関しては、心に留めておくべきことがたくさんあります。

また、現代のUIの背後にある主なアイデア、つまりWindows Store Appsに必要なデザイン言語を指摘したいと思います。アプリは現実のものを模倣すべきではなく、アプリであり「現実」ではないので意味がない。 MSDNから

： は本物のデジタル ては、デジタルメディアをフル活用してください。 物理的な境界を削除して、現実よりも効率的で簡単な体験を作成します。 我々は画面上のピクセルであるという事実を受け入れます。 実世界の素材の限界を超えて、大胆で、活気があり鮮明な色とイメージを持つデザイン。見る価値

ビデオ：http://channel9.msdn.com/Events/Ch9Live/Channel-9-Live-at-Tech-Ed-Europe-2012/Panel-Modern-UI-Development

は、だからそれを考えると、多分あなたは、描画運動を必要としません。そのような中に多分ちょうど速いフェードは、：

<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あなたも簡単に円に回す弧をアニメーション化するために使用し、そのstartAngleの/ EndAngleをアニメーション化できRingSliceコントロールを持っています。このアイリスのソリューションでは、UIスレッドでコードを実行する必要があり、特に複雑なシーンでは遅いレイアウトの再計算が行われるため、パフォーマンスがあまり良くない可能性があるという警告をアニメーションでEnableDependentAnimationに設定する必要があります。遅い場合（特にARMのような遅いデバイスの場合）は、同じ中心点を持つ小さな円弧を重ね合わせて、その中心点の周りのRenderTransformアニメーションで回転させて、同じ効果を得ることです。これはもう少し複雑ですが、より速く走るチャンスがあります。 UIスレッドのアニメーション化と複数のアークのオーバーレイとアニメーションシーケンスのオーケストレーションのコストをバランスさせることができます。

独立したアニメーションを使用することができるようになるので、おそらくスムーズに実行することになる弧を描くための別の一般的な解決策は、 RectangleGeometry Clipでクリッピングされた2つのオーバーレイの楕円を使用してアークを明らかにするために、クリップの Transformをアニメーション化することであろう

Answer 3

徐々に。それらのうちの2つが、弧の始点と終点をキャップ（終点）を任意の角度に持つようにする必要があります。

数字を含む任意の形状または要素の描画をすばやくシミュレートすることも簡単な方法です。カスタムコントロールを構築し、それのための依存関係プロパティをアニメーション化する必要がある場合は

Answer 4

、私はhttp://danielgary.net/animating-custom-dependencyproperties/

それの要点はあなたの依存関係プロパティのためのイベントをワイヤである

で支援するブログ記事を書きましたそこのレイアウトコードを変更して更新します。