wpf 作动图

desperaso 2020-04-13 03:28:15

看着好麻烦啊

...全文

284 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

desperaso 2020-04-18

打赏
举报

引用 3 楼 Dear200892 的回复:

原图js搞得，那能看到计算方式？

引用 6 楼 lindexi_gd 的回复:

其实对我来说，这个绘制的难度好像一点都不高，但是需要一些时间才能做出来

是的，难度不大，就是麻烦
前台



<Window x:Class="DT_8.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:DT_8"

        mc:Ignorable="d"

        Title="MainWindow" Height="750" Width="1000">

    <Grid>

        <Canvas x:Name="mainBox"/>

    </Grid>

</Window>

后台



using System;

using System.Threading;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Threading;



namespace DT_8

{

    public partial class MainWindow : Window

    {

        private Storyboard story_circle, story_x, story_y;

        private LineGeometry line;

        private double delay = 8;

        private TranslateTransform translate;

        private Polyline polyline;

        private Thread thread;

        private Button button;



        public MainWindow()

        {

            InitializeComponent();



            polyline = new Polyline() { Stroke = Brushes.Red, StrokeThickness = 1};

            Draw_Init(mainBox);

            button = new Button() { Width = 80, Height = 25, Content = "开始" };

            Canvas.SetLeft(button, 850);

            Canvas.SetTop(button, 50);

            button.Click += Button_Click;

            mainBox.Children.Add(button);

        }



        private void Button_Click(object sender, RoutedEventArgs e)

        {

            button.IsEnabled = false;

            polyline.Points.Clear();

            thread = new Thread(Modify_Draw);

            thread.Start();

            story_circle.Begin(this, true);

            story_x.Begin(this, true);

            story_y.Begin(this, true);

        }



        private void Modify_Draw()

        {

            while (true)

            {

                this.Dispatcher.Invoke(DispatcherPriority.Normal, (ThreadStart)delegate ()

                {

                    polyline.Points.Add(new Point(translate.X+ line.EndPoint.X-100, translate.Y+ line.EndPoint.Y-50));

                });

                Thread.Sleep(5);

            }

        }



        public void Draw_Init(Canvas obj)

        {

            Canvas box_view = new Canvas() { Width = 800, Height = 600 };

            Canvas.SetLeft(box_view, 100);

            Canvas.SetTop(box_view,50);

            obj.Children.Add(box_view);

            Draw_Line(box_view, new Point(100, 300), new Point(700, 300), Colors.LightSlateGray, 1);

            Draw_Line(box_view, new Point(400, 0), new Point(400,600), Colors.LightSlateGray, 1);

            for (int i = 0; i < 7; i++)

            {

                Draw_Line(obj, new Point(200 + i * 100, 350 - 5), new Point(200 + i * 100, 350 + 5), Colors.LightSlateGray, 1);

                Draw_Line(obj, new Point(495, 50+i * 100), new Point(505, 50+i * 100), Colors.LightSlateGray, 1);

            }

            Canvas draw_border = new Canvas() { Width = 800, Height = 600 };

            Canvas.SetLeft(draw_border, 100);

            Canvas.SetTop(draw_border, 50);

            obj.Children.Add(draw_border);

            Canvas.SetLeft(polyline, 600);

            Canvas.SetTop(polyline, 300);

            draw_border.Children.Add(polyline);

            Path path_border = new Path() { Stroke = Brushes.LightSlateGray, StrokeThickness = 1, Data = Geometry.Parse("M 0,0 A 300,300 45 1 1 0,1 Z") };

            Canvas.SetLeft(path_border, 100);

            Canvas.SetTop(path_border, 300);

            box_view.Children.Add(path_border);

            Path path_box = new Path() { StrokeThickness = 1, Data = Geometry.Parse("M 0,0 A 200,200 45 1 0 0,1 Z") };

            Canvas.SetLeft(path_box, 600);

            Canvas.SetTop(path_box, 300);

            box_view.Children.Add(path_box);

            Canvas move_block = new Canvas() { Width = 100, Height = 100 };

            Canvas.SetLeft(move_block, 150);

            Canvas.SetTop(move_block, 250);

            box_view.Children.Add(move_block);

            Path path_center = new Path() { Stroke = Brushes.Blue, StrokeThickness = 1, Data = Geometry.Parse("M 200,50 A 100,100 45 1 1 200,49 Z") };

            Canvas.SetLeft(path_center, 350);

            Canvas.SetTop(path_center,0);

            move_block.Children.Add(path_center);

            translate = new TranslateTransform() { X = 0, Y = 0 };

            obj.RegisterName("MyTranslateTransform", translate);

            TransformGroup group = new TransformGroup();

            group.Children.Add(translate);

            move_block.RenderTransform = group;

            PathGeometry geometry = new PathGeometry() { Figures = PathFigureCollection.Parse("M 0,0 A 200,200 45 1 0 0,1 Z") };

            Set_AnimationPath(geometry, "MyTranslateTransform", "X", PathAnimationSource.X);

            Set_AnimationPath(geometry, "MyTranslateTransform", "Y", PathAnimationSource.Y);

            line = new LineGeometry() { StartPoint = new Point(100, 50), EndPoint = new Point(200,50) };

            Path path_line = new Path() { Stroke = Brushes.Black, StrokeThickness = 1, Data = line };

            Canvas.SetLeft(path_line, 350);

            Canvas.SetTop(path_line,0);

            obj.RegisterName("Line_Move", line);

            move_block.Children.Add(path_line);

            PointAnimationUsingPath pointAnimationUsingPath = new PointAnimationUsingPath()

            {

                Duration = new Duration(TimeSpan.FromSeconds(delay/2)),

                RepeatBehavior = RepeatBehavior.Forever,

            };

            PathGeometry pathGeometry = new PathGeometry() { Figures = PathFigureCollection.Parse("M 200,50 A 100,100 45 1 1 200,49 Z") };

            pointAnimationUsingPath.PathGeometry = pathGeometry;



            story_circle = new Storyboard();

            Storyboard.SetTargetName(pointAnimationUsingPath, "Line_Move");

            Storyboard.SetTargetProperty(pointAnimationUsingPath, new PropertyPath("EndPoint"));

            story_circle.Children.Add(pointAnimationUsingPath);

            story_circle.Begin(obj, true);

            story_circle.Pause(obj);

        }



        private void Set_AnimationPath(PathGeometry geo, string targetname, string value, PathAnimationSource source)

        {

            DoubleAnimationUsingPath usingPath = new DoubleAnimationUsingPath()

            {

                Duration = new Duration(TimeSpan.FromSeconds(delay)),

                Source = source,

            };

            usingPath.PathGeometry = geo;



            Storyboard.SetTargetName(usingPath, targetname);

            Storyboard.SetTargetProperty(usingPath, new PropertyPath(value));

            if (value == "X") { story_x = new Storyboard(); story_x.Children.Add(usingPath); }

            if (value == "Y") 

            { 

                story_y = new Storyboard(); 

                story_y.Children.Add(usingPath);

                story_y.Completed += Story_Completed;

            }

        }



        private void Story_Completed(object sender, EventArgs e)

        {

            Thread.Sleep(10);

            story_circle.Stop(this);

            thread.Abort();

            button.IsEnabled = true;

        }



        private void Draw_Line(Canvas obj, Point begin, Point end, Color stroke, double thickness)

        {

            LineGeometry line = new LineGeometry() { StartPoint = begin, EndPoint = end };

            Path line_path = new Path() { Stroke = new SolidColorBrush(stroke), StrokeThickness = thickness, Data = line };

            obj.Children.Add(line_path);

        }

    }

}