wpf实现仿苹果水平滑动效果

最新推荐文章于 2022-06-02 16:27:55 发布

Just4life

最新推荐文章于 2022-06-02 16:27:55 发布

阅读量1.2w

点赞数 1

分类专栏： WPF编程技术文章标签： wpf object class

本文链接：https://blog.csdn.net/lassewang/article/details/7173407

版权

WPF编程技术专栏收录该内容

51 篇文章 5 订阅

订阅专栏

cs文件源码:

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;
using System.Windows.Media.Animation;

namespace FlashPrac2
{
      ///
      /// MainWindow.xaml 的交互逻辑
      ///
      public partial class MainWindow : Window
      {
            public MainWindow()
            {
                  InitializeComponent();
            }
            
            
            
            ///
            /// 完成缓冲效果
            ///
            /// 起始位置
            /// 目标位置
            /// 加速加速度
            /// 减速加速度
            /// 持续时间
            private void DoMove(DependencyProperty dp, double to, double ar, double dr, double duration)
            {
                  DoubleAnimation doubleAnimation = new DoubleAnimation();//创建双精度动画对象
                  
                  doubleAnimation.To = to;//设置动画的结束值
                  doubleAnimation.Duration = TimeSpan.FromSeconds(duration);//设置动画时间线长度
                  doubleAnimation.AccelerationRatio = ar;//动画加速
                  doubleAnimation.DecelerationRatio = dr;//动画减速
                  doubleAnimation.FillBehavior = FillBehavior.HoldEnd;//设置动画完成后执行的操作
                  
                  grdTransfer.BeginAnimation(dp, doubleAnimation);//设置动画应用的属性并启动动画
            }
            
            
            
            private double pressedX;
            
            ///
            /// 点击鼠标，记录鼠标单击的位置
            ///
            ///
            ///
            private void grdTest_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                  获得鼠标点击的X坐标
                  pressedX = e.GetPosition(cvsGround).X;
                  
            }
            
            
            
            鼠标释放时的操作
            
            private void grdTest_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                  double transferLeft = Convert.ToDouble(grdTransfer.GetValue(Canvas.LeftProperty));
                  btn1.Content = transferLeft.ToString();
                  if (transferLeft > 0)
                  {
                        transferLeft = 0;
                  }
                  if (this.Width - transferLeft > cvsGround.Width)
                  {
                        transferLeft = this.Width - cvsGround.Width;
                  }
                  
                  获得鼠标释放时的位置
                  
                  double releasedX = e.GetPosition(cvsGround).X;
                  
                  获得距离间隔
                  double interval = releasedX - pressedX;
                  pressedX = 0;
                  计算出传送带要的目标位置
                  double to = transferLeft + interval;
                  移动
                  
                  btn1.Content = transferLeft.ToString() + " " + to.ToString();
                  // btn1.Content = transferLeft.ToString() + " " + to.ToString();
                  DoMove(Canvas.LeftProperty, to, 0.1, 0.5, 0.5);
            }
            
      }
}

xaml文件源码

<Window x:Class="FlashPrac2.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">
<Canvas Width="1500" x:Name="cvsGround">
<StackPanel Width="1500" Height="525" x:Name="grdTransfer" Canvas.Left="0"
Background="SkyBlue" PreviewMouseLeftButtonDown="grdTest_PreviewMouseLeftButtonDown"
PreviewMouseLeftButtonUp="grdTest_PreviewMouseLeftButtonUp" Orientation="Horizontal">
<Button Width="300" Height="525" x:Name="btn1" Background="SkyBlue" />
<Button Width="300" Height="525" x:Name="btn2" Background="Orange" />
<Button Width="300" Height="525" x:Name="btn3" Background="Red" />
<Button Width="300" Height="525" x:Name="btn4" Background="Green" />
<Button Width="300" Height="525" x:Name="btn5" Background="Yellow" />
</StackPanel>

</Canvas>

</Window>