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

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

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

  1. d3.js制作连线动画图和编辑器

    此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/11431679.html 连线动画图 编辑器 效果如上图所示.本项目使用主要d3.jsv4制作,分 ...

  2. 用CAKeyframeAnimation构建动画路径

    复杂路径的动画,我们可以借助关键关键帧动画(CAKeyframeAnimation)来实现,给其的path属性设置相应的路径信息即可. 以下为一个红色的小球按照指定的路径运动的动画. 此动画关键在于如 ...

  3. 分享:根据svg节点对象类型和路径值转换坐标值

    功能用处: 对svg文件的路径节点填充时会使用(相邻两个坐标区域内的四边形的填充颜色不重复). 需要对svg文件中的Path节点或者 Polyline 节点做颜色填充.并且相邻的两个区域之间的颜色不允 ...

  4. direct path read/write (直接路径读/写)

    转载:http://www.dbtan.com/2010/04/direct-path-readwrite.html direct path read/write (直接路径读/写): 直接路径读(d ...

  5. [翻译] AnimatedPath 动画路径(持续更新)

    AnimatedPath动画路径 感谢原作者分享精神,有空补上使用教程 https://github.com/twotoasters/AnimatedPath AnimatedPath explore ...

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

    目录:[Swift]Xcode实际操作 本文将演示如何制作渐显动画. 图片的不透明度逐渐发生了变化,从而产生作渐显动画的效果. 在项目导航区,打开视图控制器的代码文件[ViewController.s ...

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

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  8. 理论制作 Windows 开机动画

    第一次接触 Windows 开机动画是 2012 年,那时候魔方的版本号还是 3.12,魔方里面有个很酷炫狂霸拽的功能就是替换 Windows 7 的开机动画.一开始我是在IT之家论坛里下载开机动画, ...

  9. 【Unity 3D】使用 2DToolkit 插件 制作2D精灵动画

    话说博客传图也太麻烦了吧,一个一个文件一个一个传....为什么不能直接粘贴了,自动上传呢... 刚直接粘贴了,结果一张图没有,又重新截一次图,在传了一次...真是太**了 好了,吐槽完了,开始博客吧 ...

随机推荐

  1. Android中动态设置GridView的列数、列宽和行高

    在使用GridView时我们知道,列数是可以通过设计时的属性来设置的,列的宽度则是根据列数和GridView的宽度计算出来的.但是有些时候我们想实现列数是动态改变的效果,即列的宽度保持某个值,列的数量 ...

  2. base64码通过http传输 +号变 空格 问题解决

    通过七牛云base64上传图片,通过官方示例上传成功后,根据示例改了一个controller. 通过前端往后端传base64码形式进行测试.死活不通过,七牛报400. 仔细排查后发现,示例转换的bas ...

  3. POJ 3252 Round Numbers(数位dp&amp;记忆化搜索)

    题目链接:[kuangbin带你飞]专题十五 数位DP E - Round Numbers 题意 给定区间.求转化为二进制后当中0比1多或相等的数字的个数. 思路 将数字转化为二进制进行数位dp,由于 ...

  4. 小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航

    一.页眉 1.添加页眉和页脚 <div data-role="header"> <h1>第 1 页</h1> </div> < ...

  5. 解决“不是有效的win32应用程序”问题

    http://blog.csdn.net/shuaihj/article/details/17096903

  6. ios UI控件的简单整理

    把该文件拷贝到.m文件中就能够方便的查找 /** 匿名类目:能够声明方法和变量,属性为private(不同意在外部调用,且不能被继承 */ /** 发送数据的托付方,接收数据的时代理发(即代理的反向传 ...

  7. 拉伸按钮背景图片:stretchableImageWithLeftCapWidth:

    // 1. 拉伸按钮背景图片 // 1) 登录按钮 UIImage *loginImage = [UIImage imageNamed:@"LoginGreenBigBtn"]; ...

  8. SpringBoot JPA 专题

    Error: Error starting ApplicationContext. To display the auto-configuration report re-run your appli ...

  9. java中的方法返回值使用泛型,实现灵活的返回值类型

    痛点:      使用Mybatis框架的时候,想封装一个底层JDBC控制器,用于提供和Mybatis交互的增删改查接口(公用的接口),但由于公用的查询方法可能是用户自定义的任意一个和表对应的java ...

  10. JAVA SortedMap接口

    SortedMap接口主要提供有序的Map实现. Map的主要实现有HashMap,TreeMap,HashTable,LinkedHashMap. TreeMap实现了SortedMap接口,保证了 ...