windows-phone-7 - アニメーションを使用してwinRTで円弧を描く方法は?

Question

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

どんな助けでも本当に感謝します。

前もって感謝します。

Answer 1

それを実現するには、いくつかのストーリーボードをつなぎ合わせる必要があると思います。そのために Blend を使用することを強くお勧めします!

空白のプロジェクトを開き、オブジェクトとタイムラインの下にプラスがあり、それをクリックして新しいストーリー ボードを追加します。ストーリーボード行の黄色のバーを数ミリ秒進めます。アニメーションの一部を描き、[記録を開始] をクリックして、その部分を少し動かします。録音を停止します。必要なものが得られるまで、それを少しずつ続けます。絵を真似るための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>

これがどのように見えるかのイメージです。動く黄色いものです。曲線の動きは、組み合わせて必要な動きを作成できることを示す例にすぎません。イージング関数と呼ばれるものでこれを行うこともできます。下の画像を参照してください。

使用可能なイージング関数を次に示します。それらを試して、ストーリーボードのアイテムと組み合わせて、目的の効果を作成します。

さまざまなイージング関数については、MSD Nで詳しく説明されています。

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

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

大変な作業で、時間がかかります。その前に、Blend の使用方法とストーリーボードの操作方法を学んでおくことをお勧めします。そこには多くの優れたチュートリアルがあり、時間をかける価値があります。個人的には、上のストーリーボードでわかるように、デザイナーにアニメーションを手伝ってもらう傾向があります。私はアニメーションのプロではありません。特にアプリのパフォーマンスに関しては、覚えておくべきことがたくさんあります。

また、Windows ストア アプリに必要なデザイン言語であるモダン UI の背後にある主なアイデアのいくつかを指摘したいと思います。それは、真のデジタル性を維持することです。アプリは現実のものを模倣するべきではありません。これはアプリであり「現実」ではないため、意味がありません。

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にはRingSliceがありますStartAngle/EndAngle を使用してアニメーション化することもできるコントロールを使用して、円弧を円に変えるアニメーションを簡単に作成できます。ただし、これと Iris のソリューションの両方で、アニメーションに EnableDependentAnimation を設定する必要があることに注意してください。これは、UI スレッドでコードを実行する必要があり、特に複雑なシーンで遅いレイアウトの再計算が発生するため、パフォーマンスが低下する可能性があることを示す安全策です。遅いことが判明した場合 (特に ARM のような遅いデバイスの場合) に試したいことの 1 つは、同じ中心点を持つ小さな弧を重ね合わせ、その中心点を中心に RenderTransform アニメーションで回転させて同じ効果を得ることです。これは少し複雑になりますが、より高速に実行できる可能性があります。UI スレッドでアニメーション化するコストと、

Answer 3

カスタム コントロールを作成し、その依存関係プロパティをアニメーション化する必要がある場合は、 http://danielgary.net/animating-custom-dependencyproperties/で役立つブログ投稿を書きました。

その要点は、依存関係プロパティが変更されたときにイベントを接続し、その中のレイアウト コードを更新することです。