Silverlight 动画 之 平移
前台页面:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<UserControl x:Class="SLPianYi.MainPage" 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" mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800"> <Canvas> <Rectangle x:Name="rect" Fill="Blue" Height="100" Canvas.Left="103" Stroke="Black" Canvas.Top="112" Width="100"> <!--<Rectangle.RenderTransform> <CompositeTransform/> </Rectangle.RenderTransform>--> </Rectangle> <Button Content="Button" Canvas.Left="504" Canvas.Top="215" Width="75" Click="Button_Click_1"/> </Canvas> </UserControl>
后台代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SLPianYi { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } private void CreateStoryboary() { //元素当前所在的坐标点 Point currentPoint = new Point(Canvas.GetLeft(rect), Canvas.GetTop(rect)); //目标点坐标 Point point = new Point(280, 245); //为目标控件(rect)添加此属性 (如果前台页面没有此属性的话) rect.RenderTransform = new CompositeTransform(); //创建动画容器时间线 Storyboard storyboard = new Storyboard(); DoubleAnimation doubleAnimation = new DoubleAnimation(); //创建X轴方向动画 doubleAnimation.From = currentPoint.X; doubleAnimation.To = point.X; doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 1)); Storyboard.SetTarget(doubleAnimation, rect); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)")); storyboard.Children.Add(doubleAnimation); //创建Y轴方向动画 doubleAnimation = new DoubleAnimation(); doubleAnimation.SetValue(DoubleAnimation.FromProperty, currentPoint.Y); doubleAnimation.SetValue(DoubleAnimation.ToProperty, point.Y); doubleAnimation.SetValue(DoubleAnimation.DurationProperty, new Duration(new TimeSpan(0, 0, 1))); Storyboard.SetTarget(doubleAnimation, rect); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateY)")); storyboard.Children.Add(doubleAnimation); storyboard.Begin(); } private void Button_Click_1(object sender, RoutedEventArgs e) { CreateStoryboary(); } } }
在Blend中需要这样:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<UserControl 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" mc:Ignorable="d" x:Class="SLPianYiDemo.MainPage" Width="640" Height="480"> <UserControl.Resources> <Storyboard x:Name="Storyboard1"> <DoubleAnimation Duration="0:0:0.6" To="280" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/> <DoubleAnimation Duration="0:0:0.6" To="280" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/> </Storyboard> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Rectangle x:Name="rectangle" Fill="#FF1010E2" HorizontalAlignment="Left" Height="76" Margin="61,116,0,0" Stroke="Black" VerticalAlignment="Top" Width="155" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <CompositeTransform/> </Rectangle.RenderTransform> </Rectangle> </Grid> </UserControl>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步