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

这两个问题都在非最小的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文件中引用了此转换器：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit=
                 "clr-namespace:Xamarin.FormsBook.Toolkit;assembly=Xamarin.FormsBook.Toolkit"
             x:Class="BoxViewClock.BoxViewClockPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="0, 20, 0, 0" />
    </ContentPage.Padding>
    <ContentPage.Resources>
        <ResourceDictionary>
            <toolkit:SecondBackEaseConverter x:Key="secondBackEase" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <AbsoluteLayout x:Name="absoluteLayout"
                    BackgroundColor="White"
                    SizeChanged="OnAbsoluteLayoutSizeChanged">
 
        <AbsoluteLayout.BindingContext>
            <toolkit:AnalogClockViewModel />
        </AbsoluteLayout.BindingContext>
 
        <BoxView x:Name="hourHand"
                 Color="Black"
                 Rotation="{Binding HourAngle}" />
 
        <BoxView x:Name="minuteHand"
                 Color="Black"
                 Rotation="{Binding MinuteAngle}" />
 
        <BoxView x:Name="secondHand"
                 Color="Black"
                 Rotation="{Binding SecondAngle, Converter={StaticResource secondBackEase}}" />
    </AbsoluteLayout>
</ContentPage>

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