使用path制作各类型动画路径

简介: 原文:使用path制作各类型动画路径 ...
原文: 使用path制作各类型动画路径

<Window x:Class="使用path制作各类型动画路径.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Ellipse Height="32" HorizontalAlignment="Left" Margin="63,61,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top" Width="43" Fill="red">
            <Ellipse.RenderTransform>
                <TransformGroup>
                <TranslateTransform X="-75" Y="-75"/><!--修改这个变换值可以使红色椭圆在固定的椭圆轨道上运转-->
                <MatrixTransform x:Name="mat1"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Page.Loaded">
                    <BeginStoryboard>
                        <Storyboard x:Name="sb1" RepeatBehavior="Forever">
                            <!--MatrixAnimationUsingPath.PathGeometry属性在后台设置-->
                            <MatrixAnimationUsingPath x:Name="matUsePath"
                                Storyboard.TargetName="mat1"
                                Storyboard.TargetProperty="Matrix"
                                Duration="0:0:10"
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
        <Path x:Name="path1" Stroke="Blue">
            <Path.Data>
                <EllipseGeometry x:Name="elipsGeome" Center="220,150" RadiusX="200" RadiusY="100"/>
            </Path.Data>
        </Path>
        <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="416,24,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
       
        <Ellipse Height="32" HorizontalAlignment="Left" Margin="61,60,0,0" Name="ellipse2" Stroke="Black" VerticalAlignment="Top" Width="43" Fill="blue">
            <Ellipse.RenderTransform>
                <TransformGroup>                  
                    <MatrixTransform x:Name="mat2"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Page.Loaded">
                    <BeginStoryboard>
                        <Storyboard x:Name="sb2" RepeatBehavior="Forever">
                            <MatrixAnimationUsingPath
                                Storyboard.TargetName="mat2"
                                Storyboard.TargetProperty="Matrix"
                                Duration="0:0:10"
                                >
                                <!--直接在前台设置MatrixAnimationUsingPath.PathGeometry属性-->
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <!--Figures这个值需要自己去设置【你怎么设置就怎么转】-->
                                    <PathGeometry Figures="M 10,0  C35,-10 105,-20 140,-30 150,-20 200,-10 300,0 C300,100 200,150 150,100 100,50 50,10 10,0"/>
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace 使用path制作各类型动画路径
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            //设置红色椭圆的Storyboard中"MatrixAnimationUsingPath"的PathGeometry
            PathGeometry pg = new PathGeometry();
            pg.AddGeometry(elipsGeome);         
            matUsePath.PathGeometry = pg;
            //ellipse1 开始绕椭圆路径旋转
            sb1.Begin(ellipse1);
        }
    }
}

源代码下载:绕固定的轨道旋转


目录
相关文章
|
编解码 开发框架 Java
Unity 之 打包参数 -- Player面板属性详解
Unity Project Setting Player面板详解,看完这篇文章,彻底搞懂各个选项设置实际作用。
2583 0
Unity 之 打包参数 -- Player面板属性详解
|
7月前
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
149 1
|
7月前
|
编解码 定位技术
【工具分享】如何批量获取图片详细信息,如何把图片的属性信息包括文件路径、文件名、面积尺寸、创建日期、修改日期、水平垂直分辨率、文件大小等图片信息批量提取exel表格中
本文介绍了如何批量提取图片的属性数据到Excel,包括文件名、尺寸、面积、分辨率、GPS信息、创建和修改日期。适合需要处理大量图片信息的工作场景。支持批量导入图片,一键提取各项信息,并能直接导出为表格。
975 0
|
7月前
|
编解码 前端开发 iOS开发
响应式图片的实现(含picture标签、srcset属性、sizes属性的使用方法,设备像素比详解)
响应式图片的实现(含picture标签、srcset属性、sizes属性的使用方法,设备像素比详解)
121 0
|
9月前
|
存储 数据可视化
PS gif修改背景颜色(附加图片)
PS gif修改背景颜色(附加图片)
144 0
|
JavaScript
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
|
编解码 iOS开发
图片,视频上传&视频内容旋转
图片,视频上传&视频内容旋转
|
人工智能 前端开发 JavaScript
canvas 中如何实现自定义路径动画
前言 大家好!!又到周末了,最近项目忙完了,有时间写文章了。之前有粉丝问我, fly哥怎么实现自定义路径动画, 当时给他说的就是路径无非不就是直线 或者曲线。也就这两种, 直线的话 可以用直线方程, 曲线的话稍微复杂点 ,需要用贝塞尔曲线去做lerp。也就是动画的每一幁的算出路径的对应的坐标就可以了。但是这套方案学习成本太高了, 有没有一种更加简单的方式呢?本篇文章大概花费你5分钟, 你可以学到什么呢 svg 的 两个无敌api 后面介绍 封装了一个自定义路径动画函数 创建Path 制作动画前,先要拿到动画的路径,对此我们可以直接使用svg的path定义规则,比如我们定义了一条较为复杂的路径
canvas 中如何实现自定义路径动画
|
图形学 异构计算
Unity 之 纹理类型导入设置和压缩格式介绍
你知道纹理导入正确设置和各平台压缩格式吗?本文教你如何将纹理资源导入到Unity并为其设置为对应平台需要使用的压缩格式,一起来看看吧~
922 0
Unity 之 纹理类型导入设置和压缩格式介绍
没有图片增加默认图片,有图片路径,但是没有图片文件解决方案
没有图片增加默认图片,有图片路径,但是没有图片文件解决方案
176 0