使用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);
        }
    }
}

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

原文地址:https://www.cnblogs.com/lonelyxmas/p/9029552.html

时间: 2024-10-03 12:24:37

使用path制作各类型动画路径的相关文章

[Xcode10 实际操作]六、媒体与动画-(8)使用CATransaction Reveal制作渐显动画

本文将演示如何制作渐显动画. 图片的不透明度逐渐发生了变化,从而产生作渐显动画的效果. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 1 import UIKit 2 3 class ViewController: UIViewController { 4 5 override func viewDidLoad() { 6 super.viewDidLoad() 7 // Do any additional setup after loading the v

理论制作 Windows 开机动画

第一次接触 Windows 开机动画是 2012 年,那时候魔方的版本号还是 3.12,魔方里面有个很酷炫狂霸拽的功能就是替换 Windows 7 的开机动画.一开始我是在IT之家论坛里下载开机动画,久而久之便萌生了自己制作开机动画的想法.经过多方打探,终于明白了魔方的开机动画 .bmp 文件的奥秘.原来网友制作的 .bmp 文件是由 105 个独立的 200*200 像素的图片组成,每一张图片就是一帧,105 张这样的图片顺序连接起来就是魔方支持的 .bmp 文件.(因此我们也可以算出一个合格

CSS3制作网页Banner动画

CSS3特效制作网页Banner动画,CSS3,CSS3动画,Banner,网页Banner . 来源:http://www.huiyi8.com/css3/ CSS3制作网页Banner动画

利用css3-animation来制作逐帧动画

参考:https://www.qianduan.net/css3-animation/ 利用css3-animation来制作逐帧动画 常见用法: animation:mymove 4s ease-out 1s backwards; @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } 解释: mymove :keyframes的名称; 4s:动画的总时间; ease-out:

推荐几款制作网页滚动动画的 JavaScript 库

这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以让网站变得高大上起来. ScrollReveal.js ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置好的动画. 在线演示     立即下载 Sc

Linux系统之在PATH中添加自己的路径

在PATH中添加自己的路径,有几种方法可以使用,本文主要介绍的是通过修改/etc/profile文件来实现: 第一步:通过命令打开profile文件 vim /etc/profile 在文件的最后添加上如下: PATH=$PATH:xxxxxxx; export PATH xxxxxx为自己需要添加的目录路径 第二步:通过输入下面命令来使修改即时生效,否则需要reboot source /etc/profile 通过以上两步修改,即可将自己的目录路径添加到PATH中

利用html5制作一个时钟动画

1 <canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas> 1 var clock=document.getElementById("clock"); 2 var cxt=clock.getContext("2d"); 3 function dra

PHP中文件类型 文件属性 路径以及 文件相关的函数

一: 文件类型判断: 1.is_dir()  判断是不是目录 2.is_file() 判断是不是文件 3.is_executeable() 判断是不是可执行文件 4.is_readable()  判断是不是可读文件 5.is_writable() 判断是不是可写文件 6.is_link()  判断是不是快捷方式 二:文件属性: 1.file_exits()  文件是否存在 2.filesize() 文件大小 3.filectime()  文件创建时间 4.filemtime() 文件修改的时间

Blend制作的下载动画

最近使用Blend制作了一个下载动画,感觉很有意思,所以这篇给各位介绍下如何使用Blend制作一个简单的下载动画的步骤 首先拖出一个圆,参数如下: 选中椭圆后单击Properties面板,选择“Fill”,选择“线性渐变”画笔 选择工具箱中的 ,可以看到椭圆上出现一个渐变箭头. 按照Alt键,拖动渐变的中心点: 调整后,椭圆大约如上所示,下面继续添加长宽均为60,画笔为白色的圆形 选择这两个图像,在“对象”菜单中分别操作对齐|水平居中,对齐|垂直居中命令,这个时候,两者会重叠在一起 在“对象”菜