WPF关键帧动画

2024-01-24 08:20
文章标签 动画 wpf 关键帧

本文主要是介绍WPF关键帧动画,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

背景:要实现动画已经有关键动画了,但是关键动画如果动画比较复杂,那么就需要重复写多个DoubleAnimation。如果使用上关键帧就可以少写几遍Storyboard里面的属性

普通动画:

<DoubleAnimation From="0" To="30" Duration="0:0:2" BeginTime="0:0:3"Storyboard.TargetName="" Storyboard.TargetProperty="">

使用上关键帧的动画:

<Rectangle x:Name="myRect" Width="50" Height="50" HorizontalAlignment="Left" Fill="Blue"><Rectangle.RenderTransform><TranslateTransform x:Name="myTranslate" X="0" Y="0"/></Rectangle.RenderTransform><Rectangle.Triggers><EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown"><BeginStoryboard><Storyboard><DoubleAnimationUsingKeyFrames Storyboard.TargetName="myTranslate" Storyboard.TargetProperty="X"Duration="0:0:10"><LinearDoubleKeyFrame Value="100" KeyTime="30%"/><LinearDoubleKeyFrame Value="300" KeyTime="60%"/><LinearDoubleKeyFrame Value="700" KeyTime="70%"/></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers>
</Rectangle>

        -- 这里体现的是关键帧作用于X坐标

更加细节可以看痕迹大神的文章:https://www.cnblogs.com/zh7791/p/12897696.html

这篇关于WPF关键帧动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/639081

相关文章

用Microsoft.Extensions.Hosting 管理WPF项目.

首先引入必要的包: <ItemGroup><PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" /><PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" /><PackageReference Include="Serilog

ArkTS开发系列之导航 (2.7动画)

上篇回顾: ArkTS开发系列之导航 (2.6 图形) 本篇内容:动画的学习使用 一、 知识储备 1. 布局更新动画 包含显式动画(animateTo)和属性动画(animation) 动画类型名称特点显式动画闭包内的变化都会触发动画执行, 可以做较复杂的动画属性动画属性变化时触发动画执行, 设置简单 说白了,显示动画就是靠闭包事件触发,属性动画是挂在组件身上的属性变化触发 显式动画

Android 扇形网络控件 - 无网络视图(动画)

前言 一般在APP没有网络的情况下,我们都会用一个无网络的提示图标,在提示方面为了统一app的情况,我们一般使用简单的提示图标,偶尔只需要改变一下图标的颜色就一举两得,而不需要让PS来换一次颜色。当然app有图标特殊要求的就另当别论了。 效果图 当你第一眼看到这样的图,二话不说直接让UI给你切一张图标来的快对吧,我其实开始也是这么想的,但是到了做的app越来越多的时候,你就会发现就算是用

PriorityQueue详解(含动画演示)

目录 PriorityQueue详解1、PriorityQueue简介2、PriorityQueue继承体系3、PriorityQueue数据结构PriorityQueue类属性注释完全二叉树、大顶堆、小顶堆的概念☆PriorityQueue是如何利用数组存储小顶堆的?☆利用数组存储完全二叉树的好处? 4、PriorityQueue的`offer`方法动画演示offer插入过程: 5、Pri

LVGL8.3动画图像(太空人)

LVGL8.3 动画图像 1. 动画图像本质 我们知道电影属于视频,而电影的本质是将一系列动作的静态图像进行快速切换而呈现出动画的形式,也就是说动画本质是一系列照片。所以 lvgl 依照这样的思想而定义了动画图像,所以在 lvgl 中动画图像类似于普通的静态图像对象。 唯一的区别是,动画图像设置了一个由多个源图像组成的数组,而不仅仅指定一个源图像。 2. 设置动画图像图片来源 不过在此之前

vuejs3用gsap实现动画

效果 gsap官网地址: https://gsap.com/ 安装gsap npm i gsap 创建Gsap.vue文件 <script setup>import {reactive, watch} from "vue";import gsap from "gsap";const props = defineProps({value:{type:Number,default

C# 唯一性进程的方法封装(Winform/WPF通用)

C#唯一进程封装 C# 唯一性进程的方法封装 public class UniqueProcess{/// <summary>/// 焦点切换指定的窗口,并将其带到前台/// </summary>/// <param name="hWnd"></param>/// <param name="fAltTab"></param>[DllImport("user32.dll")]public st

Android面试题之动画+事件处理篇

================================================================= 1、Android 中的动画有哪几类 帧动画、补间动画、属性动画 2、动画能组合在一起使用么? 可以将动画组合在一起使用AnimatorSet, AnimatorSet.play() 播放当前动画的同时可以 .with() :将现有动画和传入

动画与帧率

先看视频,同样的代码,左侧是240刷显示器,右侧是60刷显示器,但是动画中粒子的运动速度不同。 原因是机器的帧率导致了基于帧的动画显示效果不同。 动画的移动距离是相同的,但是在240刷的显示器上,每秒移动240次,在60刷的显示器上,每秒移动60次。这就导致了在高刷显示器上,动画移动的更快。 解决办法是更换基于时间的JS动画库即可。 下面给出复现示例,meethigher/animatio

Flutter-实现头像叠加动画效果

实现头像叠加动画效果 在这篇文章中,我们将介绍如何使用 Flutter 实现一个带有透明度渐变效果和过渡动画的头像叠加列表。通过这种效果,可以在图片切换时实现平滑的动画,使 UI 更加生动和吸引人。 需求 我们的目标是实现一个头像叠加列表,在每隔 2 秒时切换头像,并且在切换过程中,前一个头像逐渐消失,新进入的头像逐渐显示,同时有一个从右向左的移动过渡效果。 具体需求包括: 支持头像圆形