第二十一章：变换（十二）-白红宇

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

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 = width;            Height = height;            Offset = offset;        }        public double Width { private set; get; } // fraction of radius        public double Height { private set; get; } // ditto        public double Offset { private set; get; } // relative to center pivot    }    static readonly HandParams secondParams = new HandParams(0.02, 1.1, 0.85);    static readonly HandParams minuteParams = new HandParams(0.05, 0.8, 0.9);    static readonly HandParams hourParams = new HandParams(0.125, 0.65, 0.9);    BoxView[] tickMarks = new BoxView[60];    public BoxViewClockPage()    {        InitializeComponent();        // Create the tick marks (to be sized and positioned later).        for (int i = 0; i < tickMarks.Length; i++)        {            tickMarks[i] = new BoxView { Color = Color.Black };            absoluteLayout.Children.Add(tickMarks[i]);        }    }    void OnAbsoluteLayoutSizeChanged(object sender, EventArgs args)    {        // Get the center and radius of the AbsoluteLayout.        Point center = new Point(absoluteLayout.Width / 2, absoluteLayout.Height / 2);        double radius = 0.45 * Math.Min(absoluteLayout.Width, absoluteLayout.Height);        // Position, size, and rotate the 60 tick marks.        for (int index = 0; index < tickMarks.Length; index++)        {            double size = radius / (index % 5 == 0 ? 15 : 30);            double radians = index * 2 * Math.PI / tickMarks.Length;            double x = center.X + radius * Math.Sin(radians) - size / 2;            double y = center.Y - radius * Math.Cos(radians) - size / 2;            AbsoluteLayout.SetLayoutBounds(tickMarks[index], new Rectangle(x, y, size, size));            tickMarks[index].Rotation = 180 * radians / Math.PI;        }        // Position and size the three hands.        LayoutHand(secondHand, secondParams, center, radius);        LayoutHand(minuteHand, minuteParams, center, radius);        LayoutHand(hourHand, hourParams, center, radius);    }    void LayoutHand(BoxView boxView, HandParams handParams, Point center, double radius)    {        double width = handParams.Width * radius;        double height = handParams.Height * radius;        double offset = handParams.Offset;        AbsoluteLayout.SetLayoutBounds(boxView,            new Rectangle(center.X - 0.5 * width,                          center.Y - offset * height,                          width, height));        // Set the AnchorY property for rotations.        boxView.AnchorY = handParams.Offset;    }}

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

最重要的是，你实际上可以告诉时间。

这个时钟有另一个有趣的功能，使手的运动相当迷人。秒针既不会从第二个滑动到第二个也不会产生离散跳跃; 相反，它有一个更复杂的运动。它略微向后拉，然后向前跳，但略微超过它的标记，

然后备份并休息。这是怎么做到的？

在下一章中，您将看到Xamarin.Forms实现了几个缓动函数，这些函数可以通过更改动画“速度”来加速动画并加速动画，从而为动画添加真实感。。这样的缓动函数已经成为整个计算机行业的标准，而Xamarin.FormsBook.Toolkit包含一个值转换器，它实现了一个称为后退缓动的缓动函数：

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

BoxViewClock XAML文件中引用了此转换器：

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