为什么创建非故事板动画不流畅
本文关键字:动画 创建 故事 为什么 | 更新日期: 2023-09-27 18:33:51
我需要创建一个动画,当用户滚动时,按钮会按照滚动方向向右或向左动画。我需要对此动画进行大量控制,因为用户可以在动画发生时滚动。因此,我决定在不使用故事板的情况下创建自己的动画。这是我为创建动画所做的:
项目类
class Item : INotifyPropertyChanged
{
Thickness _M;
public Thickness M
{
get
{
return _M;
}
set
{
_M = value;
OnPropertyChanged("M");
}
}
// properties needed to animate the control
public double MarginLeft
{
get
{
return _M.Left;
}
set
{
_M.Left = value;
OnPropertyChanged("M");
}
}
// implement INotifyPropertyChanged interface
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
// the control that we will be animating
public Button Btn { get; set; }
//Constructor that takes care of initializing the button and then setting
// a binding so that we could update the button's position on separate threads
public Item()
{
Binding b = new Binding("M")
{
Source = this
};
Btn = new Button()
{
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Top,
Width = 100,
Height = 30
};
Btn.SetBinding(Button.MarginProperty, b);
}
double x = 0;
volatile int threadCounter = 0;
object _rightLock = new object();
// method to animate the button
public void MoveHorizontaly(double speed)
{
x += speed;
threadCounter++;
Task.Factory.StartNew(() =>
{
lock (_rightLock)
{
while (Math.Abs(x) > .3)
{
MarginLeft += x;
x *= .97;
Thread.Sleep(2);
if (threadCounter > 1) // if a new animation will take place exit from this one
break;
}
threadCounter--;
}
});
}
}
主窗口 xaml:
<Window x:Class="WpfApplication1.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" Loaded="Window_Loaded" PreviewMouseWheel="Window_PreviewMouseWheel">
<Grid>
<Grid Height="241" Margin="12,58,12,0" Name="grid1" VerticalAlignment="Top" Background="#FFFF9999"></Grid>
</Grid>
</Window>
主窗口代码隐藏:
public partial class MainWindow : Window
{
Item item1 = new Item();
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
grid1.Children.Add(item1.Btn);
}
// event that fires when user scrolls on the main window
private void Window_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
item1.MoveHorizontaly(e.Delta/50);
}
}
如何改进此动画? 还不错,但是在故事板上创建的动画更流畅......
这似乎是一种复杂的动画制作方式。 这样的东西会更好吗?
哈姆勒
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:app="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525" PreviewMouseWheel="Window_PreviewMouseWheel">
<Grid>
<Grid Height="241" Margin="12,58,12,0" Name="grid1" VerticalAlignment="Top" Background="#FFFF9999">
<Button Content="Test" Height="20" Width="60">
<Button.RenderTransform>
<TranslateTransform x:Name="_transform" />
</Button.RenderTransform>
</Button>
</Grid>
</Grid>
</Window>
代码隐藏
public partial class MainWindow : Window
{
DoubleAnimation _animation;
public MainWindow()
{
InitializeComponent();
_animation = new DoubleAnimation();
_animation.Duration = new Duration(TimeSpan.FromMilliseconds(150));
_animation.FillBehavior = FillBehavior.HoldEnd;
}
private void Window_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
double x = _transform.X;
_transform.BeginAnimation(TranslateTransform.XProperty, null);
_transform.SetValue(TranslateTransform.XProperty, x);
_animation.To = _transform.X + (e.Delta / 2);
_transform.BeginAnimation(TranslateTransform.XProperty, _animation);
}
}