WPF实现上下扫码动画效果

使用WPF实现上下扫码的动态效果

前端代码：

<Grid>
        <Image Source="/RenderTransform/Finger.png"></Image>
        <Line x:Name="lineScan" X1="393" Y1="60" X2="393" Y2="20"  StrokeEndLineCap="Flat"  StrokeThickness="230">
            <Line.Stroke>
                <!--线性渐变画刷:沿对角方向进行
                StartPoint 是被绘制区域的左上角值为（0,0） 的 Point，
                EndPoint 是被绘制区域的右下角值为（1,1）-->
                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                    <GradientStop Color="#00bfe0"/>
                    <GradientStop Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
    </Grid>

后端代码：

public ScanAnimation()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Window1_Loaded);
        }

        void Window1_Loaded(object sender, RoutedEventArgs e)
        {
            this.lineScan.RenderTransform = new TranslateTransform();

            this.lineScan.Name = "button1";
            this.Name = "window1";
            NameScope.SetNameScope(this, new NameScope());
            this.RegisterName(this.lineScan.Name, this.lineScan);

            DoubleAnimation xAnimation = new DoubleAnimation();
            xAnimation.From = 0;
            xAnimation.To = 200;
            xAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));

            DependencyProperty[] propertyChain = new DependencyProperty[]
            {
                Line.RenderTransformProperty,
                TranslateTransform.YProperty
            };

            Storyboard story = new Storyboard();
            story.AutoReverse = false;
            story.RepeatBehavior = RepeatBehavior.Forever;
            story.Children.Add(xAnimation);

            Storyboard.SetTargetName(xAnimation, this.lineScan.Name);
            Storyboard.SetTargetProperty(xAnimation, new PropertyPath("(0).(1)", propertyChain));

            story.Begin(this);
        }

效果：