本文告诉大家,在后台代码,对 TranslateTransform 做动画的方法

今天小伙伴问我一个问题,说为什么相同的代码,如果设置到按钮上,是可以让按钮的某个属性变更,但是如果设置给 TranslateTransform 的 X 或 Y 就不会有任何值变更

在 WPF 中,通过 官方文档 里面的描述,对于 Freezable 类型的对象,如 SolidColorBrush 和 RotateTransform 和 GradientStop 等类型,都是不支持直接的动画,也就是如以下代码是不能触发动画

假定有 XAML 界面如下,期望在点击按钮时,修改按钮的 TranslateTransform 做动画

  1. <Grid>
  2. <Button x:Name="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Content="按钮" Click="Button_OnClick">
  3. <Button.RenderTransform>
  4. <TranslateTransform x:Name="ButtonTranslateTransform"></TranslateTransform>
  5. </Button.RenderTransform>
  6. </Button>
  7. </Grid>

如果直接对使用 Storyboard 的 SetTarget 方法给对象设置 DoubleAnimation 将会是无效的,也就是说如以下的代码做的 TranslateTransform 动画是无效的,没有反应的

  1. private void Button_OnClick(object sender, RoutedEventArgs e)
  2. {
  3. var storyboard = new Storyboard();
  4. var doubleAnimation = new DoubleAnimation();
  5. Storyboard.SetTarget(doubleAnimation, ButtonTranslateTransform);
  6. Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(TranslateTransform.XProperty));
  7. doubleAnimation.To = 100;
  8. doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
  9. storyboard.Children.Add(doubleAnimation);
  10. storyboard.Begin();
  11. }

如果想要给 Freezable 类型的对象做动画,可以通过间接的方法,也就是通过 Freezable 类型的对象所在的元素,使用点的方式写出来具体的代码

  1. private void Button_OnClick(object sender, RoutedEventArgs e)
  2. {
  3. var storyboard = new Storyboard();
  4. var doubleAnimation = new DoubleAnimation();
  5. Storyboard.SetTarget(doubleAnimation, Button);
  6. Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));
  7. doubleAnimation.To = 100;
  8. doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
  9. storyboard.Children.Add(doubleAnimation);
  10. storyboard.Begin();
  11. }

写法就是通过某个元素的某个属性加上某个类型的某个属性。如上面代码使用的是 UIElement 的 RenderTransform 属性,这个属性的值的类型是 TranslateTransform 类型,设置这个类型的 X 属性

上面的 PropertyPath 有可以换成如下方式写

  1. var propertyChain = new object[]
  2. {
  3. UIElement.RenderTransformProperty,
  4. TranslateTransform.XProperty
  5. };
  6. Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(0).(1)", propertyChain));

我更推荐使用这个写法,因为这样就不会写错命名

而如果只是为了修改 TranslateTransform 的 X 属性,最简单的写法就是通过 BeginAnimation 的方式,如下面代码

  1. private void Button_OnClick(object sender, RoutedEventArgs e)
  2. {
  3. ButtonTranslateTransform.BeginAnimation(TranslateTransform.XProperty, new DoubleAnimation()
  4. {
  5. To = 100,
  6. Duration = new Duration(TimeSpan.FromSeconds(1))
  7. });
  8. }

以上代码可以看到很清真

这里的 Duration 其实可以通过 TimeSpan 转换,而不需要创建 Duration 对象。然而在 WPF 依然定义 Duration 类的原因是为了支持 Duration.Automatic 和 Duration.Forever 特殊的定义

如果是需要有多个属性开始做动画,不想使用 BeginAnimation 的方式,可以通过在后台代码用 SetTargetName 的方法指定,如下面代码

  1. private void Button_OnClick(object sender, RoutedEventArgs e)
  2. {
  3. var storyboard = new Storyboard();
  4. var doubleAnimation = new DoubleAnimation();
  5. Storyboard.SetTargetName(doubleAnimation, nameof(ButtonTranslateTransform));
  6. Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(TranslateTransform.XProperty));
  7. doubleAnimation.To = 100;
  8. doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
  9. var storyboardName = "s" + storyboard.GetHashCode();
  10. // 加入到字典,让 Storyboard 和 ButtonTranslateTransform 在相同的一个 NameScope 里
  11. Resources.Add(storyboardName, storyboard);
  12. storyboard.Children.Add(doubleAnimation);
  13. storyboard.Begin();
  14. }

在后台代码做动画,如果使用 SetTargetName 就需要让 Storyboard 和对应的元素在相同的一个 NameScope 里,不然将会提示 System.InvalidOperationException 不存在可解析名称“xx”的适用名称领域,如下面代码

  1. System.InvalidOperationException:“不存在可解析名称“ButtonTranslateTransform”的适用名称领域。”

上面代码通过将动画加入到资源字典的方式,让动画和元素在相同的 NameScope 而让动画能找到元素。但是上面代码将会在资源字典加入一个 Storyboard 而没有释放,如果在你的实际代码,我推荐在动画完成之后,删除资源字典的动画

我特别翻了 WPF 编程宝典,发现宝典里面没有这部分知识,也就是没有告诉大家为什么直接给 TranslateTransform 的属性做动画将会失效。好在官方文档里面有说到这点

本文代码还请到 githubgitee 上阅读代码

可以通过如下方式获取本文的源代码,先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码,即可获取到本文的代码

  1. git init
  2. git remote add origin https://gitee.com/lindexi/lindexi_gd.git
  3. git pull origin 78f63c1c076065d1891559f5af2cb29f10a39f8b

以上使用的是 gitee 的源,如果 gitee 不能访问,请替换为 github 的源

  1. git remote remove origin
  2. git remote add origin https://github.com/lindexi/lindexi_gd.git

获取代码之后,进入 KayceefiwhearHaijanihukere 文件夹

Storyboards Overview - WPF .NET Framework

WPF 后台代码做 TranslateTransform 的动画的更多相关文章

  1. How do I duplicate a resource reference in code behind in WPF?如何在WPF后台代码中中复制引用的资源?

    原文 https://stackoverflow.com/questions/28240528/how-do-i-duplicate-a-resource-reference-in-code-behi ...

  2. WPF后台代码实现TextBlock滚动条

    方法一: 常规的WPF操作: <ScrollViewer Width=" VerticalScrollBarVisibility="Auto" Horizontal ...

  3. C# Wpf 后台代码设定UIElement的Canvas位置属性值

    后台in-code设定元件UIElement的Canvas位置属性的两种方法: 1.UIElement.SetValue()方法 uiElement.SetValue(Canvas.TopProper ...

  4. 7.7 WPF后台代码绑定如果是属性,必须指定一下数据上下文才能实现,而函数(click)就不用

    如: private bool _IsExportWithImage; /// <summary> /// 是否选择导出曲线图 /// </summary> public bo ...

  5. WPF MVVM 架构 Step By Step(4)(添加bindings - 完全去掉后台代码)

    之前的改进已经挺棒的,但是我们现在知道了后台代码的问题,那是否可能把后台代码全部去除呢?这时候就该WPF binding 和 commands 来做的事情了. WPF就是以超吊的binding,com ...

  6. WPF后台动画DoubleAnimation讲解

    WPF后台动画,使用DoubleAnimation做的. 1.移动动画 需要参数(目标点离最上边的位置,目标点离最左边的位置,元素名称) Image mImage = new Image(); Flo ...

  7. WPF内嵌代码和后台代码简单混合使用

    下面实例展示了WPF内嵌代码和后台代码混合使用,一个简单基础的实例: xaml文件: <Window x:Class="WPF内嵌代码和后台代码混合使用.MainWindow" ...

  8. WPF MVVM 架构 Step By Step(3)(把后台代码移到一个类中)

    我觉得大部分开发者应该已经知道怎么去解决这个问题.一般都是把后台代码(GLUE code)移动到一个类库.这个类库用来代表UI的属性和行为.任何代码当被移到一个类库中时都可以被编译成一个DLL,然后可 ...

  9. wpf 分别用 xaml 和后台代码实现 色彩渐变

    xaml 方法: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.micros ...

随机推荐

  1. 初探 Git Submodules

    之前一直想将一个 Git 仓库放到另一个 Git 仓库,有 Maven 多模块项目(Maven Multimodule Project)和 Gradle 多项目构建(Gradle Multiproje ...

  2. 【python】Leetcode每日一题-二叉搜索迭代器

    [python]Leetcode每日一题-二叉搜索迭代器 [题目描述] 实现一个二叉搜索树迭代器类BSTIterator ,表示一个按中序遍历二叉搜索树(BST)的迭代器: BSTIterator(T ...

  3. Pytest自动化测试-简易入门教程(03)

    今天分享内容的重点,和大家来讲一下我们的测试框架--Pytest 讲到这个框架的话呢,可能有伙伴就会问老师,我在学习自动化测试过程中,我们要去学一些什么东西? 第一个肯定要学会的是一门编程语言,比如说 ...

  4. 分布式ID

    需求 全局唯一 高性能 高可用 简单易用 UUID 优点: 唯一 不依赖于任何第三方服务 缺点: 是字符串类型而非数字,不满足数字ID的需求 字符串太长了,DB查询效率受影响 数据库自增ID 如果使用 ...

  5. Linux 内核调度器源码分析 - 初始化

    导语 上篇系列文 混部之殇-论云原生资源隔离技术之CPU隔离(一) 介绍了云原生混部场景中CPU资源隔离核心技术:内核调度器,本系列文章<Linux内核调度器源码分析>将从源码的角度剖析内 ...

  6. java面试一日一题:java中垃圾回收算法有哪些

    问题:请讲下在java中有哪些垃圾回收算法 分析:该问题主要考察对java中垃圾回收的算法以及使用场景 回答要点: 主要从以下几点去考虑, 1.GC回收算法有哪些 2.每种算法的使用场景 3.基于垃圾 ...

  7. 消息队列RabbitMQ(三):消息确认机制

    引言 RabbitMQ的模型是生产者发送信息到 Broker (代理),消费者从 Broker 中取出信息.但是生产者怎么知道消息是否真的发送到 Broker 中了呢?Broker 又怎么知道消息到底 ...

  8. CRM系统实现自动化的“三部曲”

    在了解CRM系统的自动化的时候,我们先来看一下CRM能干什么. 从上面的流程图我们就可以看出,CRM可以管理售前,售中和售后的整个客户生命周期. 为什么在复杂的客户生命周期中需要自动化呢? 当然是为了 ...

  9. primary key

    只要使用innodb就要为表指定主键: 如果不指定mysql就会自己找不为空且为一的作为主键,如果找不到,就会使用默认的(软件自己预定好的)作为主键: 主键分为单列主键和复合主键,用法和单列唯一,联合 ...

  10. 24.Qt Quick QML-Canvas和Context2D详解

    1.Canvas介绍Canvas是一个允许绘制直线和曲线.简单和复杂的形状.图形和引用的图形图像.它还可以添加文本.颜色.阴影.渐变和图案,并执行低级别像素操作.Canvas输出可以另存为图像文件或序 ...