WPF PointAnimationUsingKeyFrames 影片

 點擊鏈接加入群聊

想到昨天去健身房，我拿啞鈴練肱二頭肌，旁邊有一女的

時不時的側著臉來看我，還嘴角帶著笑，媽的嘲笑我練的重量小嗎，

我拿12kg在練，那女的拿個2.5kg在那舉著玩，還好意思笑我？

前言 

前幾天逛Gayhub看到一篇CSS 的影片，然后就想著用WPF實作，

下方是CSS中的效果：

描述下我實作中所走的彎路，

第一次實驗：我新創建 Rectangle 然后其創建了一個裝飾器 Adorner

然后在裝飾器畫了一個Pen ，像移動X軸  然后轉換角度 接著走Y軸，事實給了我一記響亮的嘴巴，

Pen renderPen = new Pen(new SolidColorBrush(Colors.Red), 2.5);
 drawingContext.DrawLine(renderPen, new Point(0, 0), new Point(AdornedElement.RenderSize.Width / 10, 0));


 var translateTransform = new TranslateTransform();
            var rotateTransform = new RotateTransform();
            var transformGroup = new TransformGroup();
            transformGroup.Children.Add(translateTransform);
            transformGroup.Children.Add(rotateTransform);
            this.RenderTransformOrigin = new Point(0.5,0.5);
            this.RenderTransform = transformGroup;
            var doubleAnimationX = new DoubleAnimation
            {
                To = AdornedElement.RenderSize.Width - AdornedElement.RenderSize.Width / 10,
                Duration = new Duration(TimeSpan.FromSeconds(2))
            };
            TranslateTransform t = transformGroup.Children[0] as TranslateTransform;
            t.BeginAnimation(TranslateTransform.XProperty, doubleAnimationX);

            var doubleAnimationAngle = new DoubleAnimation
            {
                To = 90,
                Duration = new Duration(TimeSpan.FromSeconds(.1))
            };
            RotateTransform t2 = transformGroup.Children[1] as RotateTransform;
            t2.BeginAnimation(RotateTransform.AngleProperty, doubleAnimationAngle);

上當時的效果圖，

(⊙﹏⊙) 是不是就像探照燈一樣，

我再次嘗試畫了一個圓設定Clip發現還是錯誤的，

開始上原始碼

嘗試PointAnimationUsingKeyFrames發現可行o(*￣▽￣*)ブ

<Window.Resources>
        <Storyboard x:Key="Storyboard1" RepeatBehavior="Forever">
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)" 
                                          Storyboard.TargetName="rectangle">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value=https://www.cnblogs.com/yanjinhua/archive/2021/01/29/"0.855,0.148"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value=https://www.cnblogs.com/yanjinhua/archive/2021/01/29/"0.852,0.855"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value=https://www.cnblogs.com/yanjinhua/archive/2021/01/29/"0.148,0.855"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value=https://www.cnblogs.com/yanjinhua/archive/2021/01/29/"0.144,0.149"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value=https://www.cnblogs.com/yanjinhua/archive/2021/01/29/"0,0"/>
                
            </PointAnimationUsingKeyFrames>
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)" 
                                          Storyboard.TargetName="rectangle">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value=https://www.cnblogs.com/yanjinhua/archive/2021/01/29/"0.145,0.852"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value=https://www.cnblogs.com/yanjinhua/archive/2021/01/29/"0.148,0.145"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value=https://www.cnblogs.com/yanjinhua/archive/2021/01/29/"0.852,0.145"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value=https://www.cnblogs.com/yanjinhua/archive/2021/01/29/"0.856,0.851"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value=https://www.cnblogs.com/yanjinhua/archive/2021/01/29/"0,1"/>
                
            </PointAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>

        <Rectangle x:Name="rectangle" Width="200" Height="200"
                   HorizontalAlignment="Center" VerticalAlignment="Center" 
                   StrokeThickness="3">
            <Rectangle.Stroke>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity=".6">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="#FF025F20" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Stroke>

        </Rectangle>

    </Grid>

成品圖：

如果大佬有更好的方式歡迎交流，

  點擊鏈接加入群聊

blogs

Github

標籤：.NET技术

上一篇：比EntityFramework簡單很多的SOD框架動態創建表的方法

下一篇：淺析 record 使用場景