WPF 实现加速小火箭~
Posted dotNET跨平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WPF 实现加速小火箭~相关的知识，希望对你有一定的参考价值。
WPF开发者QQ群： 340500857
由于微信群人数太多入群请添加小编微信号
yanjinhuawechat 或 W_Feng_aiQ 邀请入群
需备注WPF开发者
PS：有更好的方式欢迎推荐。
01
—
代码如下
一、创建 SpeedRocketsExample.xaml 代码如下。
<Window x:Class="WPFDevelopers.Samples.ExampleViews.SpeedRocketsMini"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d" WindowStyle="None" ShowInTaskbar="False"
WindowState="Maximized" Background="Transparent"
ResizeMode="NoResize" AllowsTransparency="True"
Height="450" Width="800" MaxHeight="x:Static SystemParameters.MaximizedPrimaryScreenHeight">
<Window.Resources>
<local:ActualHeightConverters x:Key="actualHeightConverters"/>
</Window.Resources>
<Grid>
<Button Style="StaticResource PrimaryButton" Content="X"
Width="60" Height="40"
VerticalAlignment="Top" HorizontalAlignment="Right"
Click="Button_Click"/>
<Grid VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Margin="0,0,0,40">
<Grid.Resources>
<Storyboard x:Key="StoryboardMouseDown">
<DoubleAnimation Storyboard.TargetName="rotate_y" To="0" Duration="0:0:0"
Storyboard.TargetProperty="Angle"/>
<DoubleAnimation Storyboard.TargetProperty="(Viewport3D.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"
Storyboard.TargetName="PART_Viewport3D"
Duration="0:0:2" From="0"
To="Binding RelativeSource=RelativeSource AncestorType=x:Type Window,Mode=FindAncestor, Path=ActualHeight,Converter=StaticResource actualHeightConverters"
EasingFunction="StaticResource BackEaseEaseInOut"/>
<RectAnimation Storyboard.TargetProperty="(Ellipse.Clip).(RectangleGeometry.Rect)"
Storyboard.TargetName="Ellipse3"
BeginTime="0:0:.5" To="0,80,100,100"
Duration="0:0:2" From="0,10,100,100" AutoReverse="True"></RectAnimation>
<StringAnimationUsingKeyFrames
Storyboard.TargetName="TextBlock1" Storyboard.TargetProperty="Text"
BeginTime="0:0:.5" AutoReverse="True">
<DiscreteStringKeyFrame Value="90" KeyTime="0:0:0"/>
<DiscreteStringKeyFrame Value="85" KeyTime="0:0:.30" />
<DiscreteStringKeyFrame Value="70" KeyTime="0:0:1" />
<DiscreteStringKeyFrame Value="40" KeyTime="0:0:1.5" />
<DiscreteStringKeyFrame Value="10" KeyTime="0:0:2" />
</StringAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="(Viewport3D.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"
Storyboard.TargetName="PART_Viewport3D"
Duration="0:0:0" BeginTime="0:0:2"
To="0"/>
</Storyboard>
<Storyboard x:Key="StoryboardMouseEnter">
<DoubleAnimation Duration="00:00:.5" BeginTime="00:00:0"
From="0"
Storyboard.TargetName="PART_Viewport3D"
Storyboard.TargetProperty="(Viewport3D.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
To="1"/>
<DoubleAnimation Duration="00:00:.5" BeginTime="00:00:0"
From="0"
Storyboard.TargetName="PART_Viewport3D"
Storyboard.TargetProperty="(Viewport3D.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"
To="1" />
<DoubleAnimation Storyboard.TargetName="rotate_y" From="0" To="360"
BeginTime="00:00:.5" Storyboard.TargetProperty="Angle"
Duration="0:0:1.5" RepeatBehavior="Forever" />
</Storyboard>
<Storyboard x:Key="StoryboardMouseLeave">
<DoubleAnimation Duration="00:00:0" To="0" Storyboard.TargetProperty="Angle" Storyboard.TargetName="rotate_y" />
<DoubleAnimation Duration="00:00:0"
From="1"
Storyboard.TargetName="PART_Viewport3D"
Storyboard.TargetProperty="(Viewport3D.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
To="0"/>
<DoubleAnimation Duration="00:00:0"
From="1"
Storyboard.TargetName="PART_Viewport3D"
Storyboard.TargetProperty="(Viewport3D.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"
To="0" />
</Storyboard>
</Grid.Resources>
<Grid Height="100" Width="100" ToolTip="按下加速~喵 (゜-゜)つロ ">
<Ellipse Fill="White" Stroke="#FFAEABAB" StrokeThickness="1"></Ellipse>
<Ellipse Fill="#FF5F9E74" Margin="4"></Ellipse>
<Ellipse Fill="#FF6BCF77" Margin="8" x:Name="Ellipse3">
<Ellipse.Clip>
<RectangleGeometry Rect="0,10,100,100"></RectangleGeometry>
</Ellipse.Clip>
</Ellipse>
<WrapPanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Foreground="White"
FontSize="30"
FontWeight="Bold" FontFamily="Agency FB"
Text="90"
x:Name="TextBlock1">
</TextBlock>
<TextBlock Foreground="White"
FontSize="30"
Text="%"
FontWeight="Bold" FontFamily="Agency FB">
</TextBlock>
</WrapPanel>
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseDown">
<BeginStoryboard Storyboard="StaticResource StoryboardMouseDown"/>
</EventTrigger>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard Storyboard="StaticResource StoryboardMouseEnter"/>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard Storyboard="StaticResource StoryboardMouseLeave"/>
</EventTrigger>
</Grid.Triggers>
</Grid>
<!--<Ellipse Height="80" Width="80" x:Name="Ellipse1"
StrokeThickness="2" Stroke="StaticResource PrimaryNormalSolidColorBrush"
ToolTip="按下加速~喵 (゜-゜)つロ ">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF7D1A3"/>
<GradientStop Color="#FFF98C0C" Offset="1"/>
<GradientStop Color="#FFF49F39" Offset="0.5"/>
</LinearGradientBrush>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="MouseDown">
<BeginStoryboard Storyboard="StaticResource StoryboardY"/>
</EventTrigger>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard Storyboard="StaticResource StoryboardAngleY"/>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard Storyboard="StaticResource StoryboardNormal"/>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>-->
<Viewport3D Width="60" Height="60"
RenderTransformOrigin=".5,.5"
x:Name="PART_Viewport3D"
IsHitTestVisible="False">
<Viewport3D.RenderTransform>
<TransformGroup>
<TranslateTransform Y="0"/>
<ScaleTransform ScaleX="0" ScaleY="0"/>
</TransformGroup>
</Viewport3D.RenderTransform>
<!--<Viewport3D.Triggers>
<EventTrigger RoutedEvent="Viewport3D.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="rotate_y"
To="0" Duration="0:0:0"
Storyboard.TargetProperty="Angle"/>
<DoubleAnimation Storyboard.TargetProperty="(Viewport3D.RenderTransform).(TranslateTransform.Y)"
Duration="0:0:1"
To="Binding RelativeSource=RelativeSource AncestorType=x:Type Window,Mode=FindAncestor, Path=ActualHeight,Converter=StaticResource actualHeightConverters"
EasingFunction="StaticResource BackEaseEaseInOut"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Viewport3D.MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="Angle">
<DoubleAnimation Storyboard.TargetName="rotate_y" From="0" To="360" Duration="0:0:1.5" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard Storyboard.TargetProperty="Angle" Storyboard.TargetName="rotate_y">
<DoubleAnimation Duration="00:00:0" To="0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Viewport3D.Triggers>-->
<Viewport3D.Camera>
<OrthographicCamera LookDirection="0,0,-50" Position="0,0,50" UpDirection="0,1,0"/>
</Viewport3D.Camera>
<Viewport3D.Children>
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight Color="Transparent"/>
</ModelVisual3D.Content>
</ModelVisual3D>
<ContainerUIElement3D>
<Viewport2DVisual3D>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-1,1,1 -1,-1,1 1,-1,1 1,1,1" TriangleIndices="0 1 2 0 2 3" TextureCoordinates="0,0 0,1 1,1 1,0"/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>
</Viewport2DVisual3D.Material>
<Image Source="/Images/SpeedRockets/飞机.png"/>
</Viewport2DVisual3D>
<Viewport2DVisual3D>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>
</Viewport2DVisual3D.Material>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="1,1,1 1,-1,1 -1,-1,1 -1,1,1"
TextureCoordinates="0,0 0,1 1,1 1,0"
TriangleIndices="0 1 2 0 2 3"/>
</Viewport2DVisual3D.Geometry>
<Image Source="/Images/SpeedRockets/飞机.png"/>
</Viewport2DVisual3D>
<ContainerUIElement3D.Transform>
<Transform3DGroup>
<RotateTransform3D CenterX="0" CenterY="0" CenterZ="1">
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="rotate_y" Axis="0 1 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
</ContainerUIElement3D.Transform>
</ContainerUIElement3D>
</Viewport3D.Children>
</Viewport3D>
</Grid>
</Grid>
</Window>二、SnowCanvas.xamlSpeedRocketsExample.xaml.cs 代码如下
using System;
using System.Windows;
using System.Windows.Data;
namespace WPFDevelopers.Samples.ExampleViews
/// <summary>
/// SpeedRocketsMini.xaml 的交互逻辑
/// </summary>
public partial class SpeedRocketsMini : Window
public SpeedRocketsMini()
InitializeComponent();
private void Button_Click(object sender, RoutedEventArgs e)
Close();
public class ActualHeightConverters : IValueConverter
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
return 0 - (double)value;
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
return null;
02
—
效果预览
鸣谢素材提供者 - 王路飞
源码地址如下
Github：https://github.com/WPFDevelopersOrg
Gitee：https://gitee.com/WPFDevelopersOrg
WPF开发者QQ群： 340500857
Github：https://github.com/WPFDevelopersOrg
出处：https://www.cnblogs.com/yanjinhua
版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
转载请著名作者 出处 https://github.com/WPFDevelopersOrg
扫一扫关注我们，
更多知识早知道！
点击阅读原文可跳转至源代码
以上是关于WPF 实现加速小火箭~的主要内容，如果未能解决你的问题，请参考以下文章
Android仿腾讯手机管家实现桌面悬浮窗小火箭发射的动画效果