第二十一章：变换（十二）

这两个问题都在非最小的BoxViewClock中得到解决。 XAML文件与MinimalBoxViewClock非常相似&＃xff0c;但代码隐藏文件更为广泛。 它以名为HandParams的小结构开始&＃xff0c;该结构定义每只手相对于半径的大小&＃xff0c;但也包括偏移值。 这是手的总长度的一部分&＃xff0c;表示它与钟面中心对齐的位置。 它也成为旋转的AnchorY值&＃xff1a;

public partial class BoxViewClockPage : ContentPage
{// Structure for storing information about the three hands.struct HandParams{public HandParams(double width, double height, double offset) : this(){Width &＃61; width;Height &＃61; height;Offset &＃61; offset;}public double Width { private set; get; } // fraction of radiuspublic double Height { private set; get; } // dittopublic double Offset { private set; get; } // relative to center pivot}static readonly HandParams secondParams &＃61; new HandParams(0.02, 1.1, 0.85);static readonly HandParams minuteParams &＃61; new HandParams(0.05, 0.8, 0.9);static readonly HandParams hourParams &＃61; new HandParams(0.125, 0.65, 0.9);BoxView[] tickMarks &＃61; new BoxView[60];public BoxViewClockPage(){InitializeComponent();// Create the tick marks (to be sized and positioned later).for (int i &＃61; 0; i }

钟面周围的刻度线也是BoxView元素&＃xff0c;但其中有60个具有两种不同的尺寸&＃xff0c;它们使用您已经看过的技术定位。 考虑到没有Xamarin.Forms图形系统&＃xff0c;视觉效果出奇的好&＃xff1a;

最重要的是&＃xff0c;你实际上可以告诉时间。
这个时钟有另一个有趣的功能&＃xff0c;使手的运动相当迷人。 秒针既不会从第二个滑动到第二个也不会产生离散跳跃; 相反&＃xff0c;它有一个更复杂的运动。 它略微向后拉&＃xff0c;然后向前跳&＃xff0c;但略微超过它的标记&＃xff0c;
然后备份并休息。 这是怎么做到的&＃xff1f;
在下一章中&＃xff0c;您将看到Xamarin.Forms实现了几个缓动函数&＃xff0c;这些函数可以通过更改动画“速度”来加速动画并加速动画&＃xff0c;从而为动画添加真实感。。 这样的缓动函数已经成为整个计算机行业的标准&＃xff0c;而Xamarin.FormsBook.Toolkit包含一个值转换器&＃xff0c;它实现了一个称为后退缓动的缓动函数&＃xff1a;

namespace Xamarin.FormsBook.Toolkit
{public class SecondBackEaseConverter : IValueConverter{public object Convert(object value, Type targetType,object parameter, CultureInfo culture){int seconds &＃61; (int)((double)value / 6); // 0, 1, 2, ... 60double t &＃61; (double)value / 6 % 1; // 0 --> 1double v &＃61; 0; // 0 --> 1// Back-ease in and out functions from http://robertpenner.com/easing/if (t <0.5){t *&＃61; 2;v &＃61; 0.5 * t * t * ((1.7 &＃43; 1) * t - 1.7);}else{t &＃61; 2 * (t - 0.5);v &＃61; 0.5 * (1 &＃43; ((t - 1) * (t - 1) * ((1.7 &＃43; 1) * (t - 1) &＃43; 1.7) &＃43; 1));}return 6 * (seconds &＃43; v);}public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){return (double)value;}}
}

BoxViewClock XAML文件中引用了此转换器&＃xff1a;

您将在下一章中看到更多的缓动函数。