4

私は WPF でアニメーションを作成しようとしていますが、どこにすべてを配置するかについてかなり混乱しています.自分自身を描くように、成長する円が必要です。

そうするために、うまく設計された円があります (下にぼやけたストロークの円がある 1 つのストロークの円) 次に、StrokeDashArray を使用した別の円があります。この円を最初の円の opacityMask として使用し、StrokeDashArray をアニメーション化して円を明らかにする予定です。

私は遊んでいて、StrokeDashArray を [0, 100] から [50 100] に変更することができ、円を覆う成長する線を取得します (0 100 と 50 100 がどこから来たのか本当にわかりません..見栄えがするまで試しました。

だから今私の問題は、ものをどこに配布するかです。

これまでの私のコードは次のようになります。

<UserControl bla bla bla bla>
    <!-- The mask that should be animated -- >
    <Ellipse Name="Mask" Stroke="White"StrokeThickness="13" StrokeDashArray="10 100"/>
    <!-- StrokeDashArray should be animated from "0 100" to "50 100"  -->

    <!-- The Blurry shadow of the line -->
    <Ellipse Name="blurry" Stroke="#FF7CA2CE" StrokeThickness="5">
        <Ellipse.Effect>
            <BlurEffect/>
        </Ellipse.Effect>
        <Ellipse.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=Mask}"/>
        </Ellipse.OpacityMask>
    </Ellipse>

    <!-- The line itself -->
    <Ellipse Name="core" Stroke="Blue" StrokeThickness="1">
        <Ellipse.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=Mask}"/>
        </Ellipse.OpacityMask>
    </Ellipse>
</UserControl>

そのため、StrokeDashArray の最初の要素に対してアニメーションを実行し、コード ビハインド (C#) から開始する必要があります。また、アニメーションをリソースとしてどこかに置いて、コードから開始するか、コード内でアニメーション全体を実行することもできます。気にしませんが、コードを追加する場所を具体的に教えてください.. 迷っています。

また、ぼやけた線とコア ラインを 1 つのグリッドに追加してから、それに VisualBrush を適用しようとしました (つまり、2 回ではなく 1 回だけ適用します)。ふふふになりたい

すっごく、何か助けて?!?!?!?!?!

4

3 に答える 3

6

これは少しトリッキーなStrokeDashArrayのでDoubleCollection、内部の値を実際にアニメーション化して UI に反映させることはできません。

1 つのオプションは、プロパティをアニメーション化し、にバインドされdoubleた新しい を作成することです。DoubleCollectionStrokeDashArray

これが実際の例です：

Xaml:

<Window x:Class="WpfApplication21.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="211.75" Width="213" Name="UI">

    <Grid DataContext="{Binding ElementName=UI}">

        <Ellipse x:Name="lo" Stroke="White" StrokeThickness="13" StrokeDashArray="{Binding StrokeArray}" />

        <Ellipse Name="blurry" Stroke="#FF7CA2CE" StrokeThickness="5">
            <Ellipse.Effect>
                <BlurEffect/>
            </Ellipse.Effect>
            <Ellipse.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=lo}"/>
            </Ellipse.OpacityMask>
        </Ellipse>

        <!-- The line itself -->
        <Ellipse Name="core" Stroke="Blue" StrokeThickness="1">
            <Ellipse.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=lo}"/>
            </Ellipse.OpacityMask>
        </Ellipse>

        <Button Content="Start" HorizontalAlignment="Left" Height="49" Margin="29,65,0,0" VerticalAlignment="Top" Width="150" Click="Button_Click_1"/>

    </Grid>
</Window>

コード：

namespace WpfApplication21
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        public double StrokeValue
        {
            get { return (double)GetValue(StrokeValueProperty); }
            set { SetValue(StrokeValueProperty, value); }
        }

        public static readonly DependencyProperty StrokeValueProperty =
            DependencyProperty.Register("StrokeValue", typeof(double), typeof(MainWindow)
            , new PropertyMetadata(0.0, new PropertyChangedCallback(OnStrokeValueChanged)));

        private static void OnStrokeValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as MainWindow).StrokeArray = new DoubleCollection { (double)e.NewValue, 100 };
        }


        public DoubleCollection StrokeArray
        {
            get { return (DoubleCollection)GetValue(StrokeArrayProperty); }
            set { SetValue(StrokeArrayProperty, value); }
        }

        public static readonly DependencyProperty StrokeArrayProperty =
            DependencyProperty.Register("StrokeArray", typeof(DoubleCollection), typeof(MainWindow)
            , new PropertyMetadata(new DoubleCollection { 0, 100 }));


    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        var storyboard = new Storyboard();
        var animation = new DoubleAnimation(0,50,new Duration(TimeSpan.FromSeconds(5)));
        storyboard.Children.Add(animation);
        Storyboard.SetTarget(animation, this);
        Storyboard.SetTargetProperty(animation,new PropertyPath( MainWindow.StrokeValueProperty));
        storyboard.Begin();
    }

    }
}
于 2013-04-10T11:25:18.580 に答える