conganguo 2020-01-18
在MVVM模式下,数据的显示都是通过绑定来实现的。当我们在ViewModel里修改数据时,View里面的界面会瞬间变化。但是如果我们希望这个变化有一个动画效果,应该怎么做呢?
可能一开始我们会想到DoubleAnimation、StoryBoard这些东西,但我们很快就会发现,它们只能操作View里面的元素,我们无法在ViewModel里使用它们。
我们在这里使用的方法是:创建一个类似DoubleAnimation的类,它的操作对象就是普通的double类型。在某一个时间段内,double类型的属性连续变化,View里的元素也会显示出一个动画的效果。
首先我们在View里放一个小正方形:
<Canvas> <Rectangle Width="10" Height="10" Fill="Red" Canvas.Left="{Binding RectLeft}"/> </Canvas>
我们看到,正方形的Canvas.Left属性绑定了一个名为RectLeft的属性。而ViewModel也相当简单:
[ImplementPropertyChanged] public class ViewModel { public double RectLeft { get; set; } }
我们这里用到了Fody.PropertyChanged,所以不用写RaisePropertyChanged那些代码。相关的资料可到百度上搜索。
好了,我们现在只要在某个时间段内,让RectLeft从一个值缓缓地变到另一个值,小正方形就会动起来了。
我们新建一个同样名叫DoubleAnimation的自定义类,然后我们这样来使用它:
DoubleAnimation ani = new DoubleAnimation(10, 700, 1000, (v) => { RectLeft = v; }); ani.BeginAnimation();
第一个参数是From,第二个参数是To,第三个参数是时间,第四个参数是一个委托,用来改变RectLeft的值。由于RectLeft是一个属性,我们没办法用ref标记把它作为引用参数,只能用这种方法去改变它。
好了,我们现在就来看DoubleAnimation的实现,上代码:
public class DoubleAnimation { /// <summary> /// 最小时间单元 /// </summary> private const int MinTimeUnit = 40; private int Segments; private double[] MidValues; /// <summary> /// 构造DoubleAnimation /// </summary> /// <param name="from">起始点</param> /// <param name="to">结束点</param> /// <param name="interval">周期,单位毫秒</param> /// <param name="setvalue">设值函数</param> public DoubleAnimation(double from, double to, int interval, Action<double> setvalue) { From = from; To = to; Interval = interval; SetValue = setvalue; } /// <summary> /// 起始点 /// </summary> private double From { get; set; } /// <summary> /// 结束点 /// </summary> private double To { get; set; } /// <summary> /// 周期,单位毫秒 /// </summary> private int Interval { get; set; } /// <summary> /// 设值函数 /// </summary> private Action<double> SetValue; /// <summary> /// 完成函数 /// </summary> public Action Completed; /// <summary> /// 缓动方法 /// </summary> public EasingMethod EasingMethod { get; set; } = EasingMethod.Linear; /// <summary> /// 开始动画 /// </summary> public void BeginAnimation() { Segments = Interval / MinTimeUnit; if (Segments == 0) { Segments = 1; } MidValues = new double[Segments + 1]; MidValues[0] = From; MidValues[Segments] = To; CalcMidValues(); new Thread(() => { for (int i = 0; i < Segments; i++) { SetValue(MidValues[i]); Thread.Sleep(MinTimeUnit); } SetValue(MidValues[Segments]); Completed?.Invoke(); }).Start(); } /// <summary> /// 计算中间值 /// </summary> private void CalcMidValues() { if (EasingMethod == EasingMethod.Linear) { double gap = (To - From) / Segments; double current = From; for (int i = 1; i < Segments; i++) { current += gap; MidValues[i] = current; } } } }
代码其实很简单,我们分步骤看:
(1)我们设置好起点From、终点To,时间Interval。
(2)我们知道,1/24秒是一般电影的帧率,也就是差不多40ms一帧,在这个频率下,人眼会觉得动画是连续的。
(3)我们把总时间进行分段,例如是1s,这里面应该有1000/40=25段,端点就是26个。我们计算出26个端点的值。
(4)最普遍也最简单的计算就是线性插值了。我们知道,.NET里面的Animation提供了大量的EasingFunction,它们的作用就是在这里插值用的。这个日后可以完善,慢慢加到类里面。
(5)好了,最重要的一步,就是不断地改变RectLeft的值。在这里,我们是40ms改变一次。可以考虑使用定时器或是线程来做,我们这里用线程去做。代码确实简单,就是一个for循环,改变一次值之后,“睡”40ms。完了之后如果有需要的,可以调用一个Completed的事件。
<ListBox Name="sideMenu" SelectedIndex="{Binding MenuSelectedIndex}" ItemsSource="{Binding MenuList}