第二十二章:动画(八)

简介: 旋转和锚AnchorX和AnchorY属性为“缩放”和“旋转”属性设置缩放或旋转的中心,因此它们也会影响ScaleTo和RotateTo动画。CircleButton程序将一个Button旋转一个圆圈,但不像你之前看到的那样。

旋转和锚
AnchorX和AnchorY属性为“缩放”和“旋转”属性设置缩放或旋转的中心,因此它们也会影响ScaleTo和RotateTo动画。
CircleButton程序将一个Button旋转一个圆圈,但不像你之前看到的那样。 该程序围绕屏幕中心旋转按钮,为此它需要AnchorX和AnchorY。
XAML文件将Button放在AbsoluteLayout中:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CircleButton.CircleButtonPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="0, 20, 0, 0" />
    </ContentPage.Padding>
 
    <AbsoluteLayout x:Name="absoluteLayout"
                    SizeChanged="OnSizeChanged">
        <Button x:Name="button"
                Text="Tap Me!"
                FontSize="Large"
                SizeChanged="OnSizeChanged"
                Clicked="OnButtonClicked" />
    </AbsoluteLayout>
</ContentPage>

此程序为Button使用AbsoluteLayout的唯一原因是将Button精确放置在屏幕上的特定位置。 XAML文件在AbsoluteLayout和Button上设置相同的SizeChanged处理程序。 该事件处理程序将AbsoluteLayout的中心保存为名为center的Point字段,并保存从该中心到最近边缘的距离作为radius字段:

public partial class CircleButtonPage : ContentPage
{
    Point center;
    double radius;
    public CircleButtonPage()
    {
        InitializeComponent();
    }
    void OnSizeChanged(object sender, EventArgs args)
    {
        center = new Point(absoluteLayout.Width / 2, absoluteLayout.Height / 2);
        radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
        AbsoluteLayout.SetLayoutBounds(button,
            new Rectangle(center.X - button.Width / 2, center.Y - radius,
                          AbsoluteLayout.AutoSize,
                          AbsoluteLayout.AutoSize));
    }
    __
}

OnSizeChanged处理程序通过将Button定位在页面的水平中心来结束,但其顶边的半径距离超出AbsoluteLayout的中心:
2019_03_04_094202
回想一下,AnchorX和AnchorY属性必须设置为相对于Button的宽度和高度的数字。 AnchorX值为0表示Button的左边缘,值为1表示右边缘。 类似地,AnchorY值为0表示Button的顶部,值为1表示底部。
要围绕保存为中心的点旋转此按钮,必须将AnchorX和AnchorY设置为基于中心点的值。 Button的中心位于页面中心的正上方,因此AnchorX的默认值为0.5。 但是,AnchorY需要一个从Button顶部到中心点的值,但是以按钮高度为单位:

public partial class CircleButtonPage : ContentPage
{
    __
    async void OnButtonClicked(object sender, EventArgs args)
    {
        button.Rotation = 0;
        button.AnchorY = radius / button.Height;
        await button.RotateTo(360, 1000);
    }
}

然后按钮围绕页面中心完全旋转360度。 这里正在进行中:
2019_03_04_094344

目录
相关文章
|
JavaScript Android开发
第二十二章:动画(二十一)
使用AnimationExtensions为什么ViewExtensions不包含ColorTo动画? 这种方法没有你最初假设的那么明显有三个可能的原因:首先,VisualElement定义的唯一Color属性是BackgroundColor,但通常不是要设置动画的Color属性。
545 0
|
JavaScript Android开发
第二十二章:动画(二十)
实现贝塞尔动画一些图形系统实现动画,该动画沿着贝塞尔曲线移动视觉对象,甚至(可选地)旋转视觉对象,使其保持与曲线相切。Bezier曲线以法国工程师兼数学家PierreBézier的名字命名,他在雷诺工作期间开发了用于汽车车身交互式计算机辅助设计的曲线。
617 0
|
JavaScript Android开发
第二十二章:动画(十九)
更多你自己的等待方法之前,您已经了解了如何将TaskCompletionSource与Device.StartTimer一起使用来编写自己的异步动画方法。 您还可以将TaskCompletionSource与Animation类结合使用,编写自己的异步动画方法,类似于ViewExtensions类中的方法。
629 0
|
Android开发
第二十二章:动画(十八)
超越高级动画方法你到目前为止看到的ConcurrentAnimations中的例子仅限于Scale和Rotate属性的动画,因此它们没有显示任何你无法做的事情。ViewExtensions类中的方法。
702 0
|
Android开发
第二十二章:动画(十七)
子动画ConcurrentAnimations中的前两个示例是单个动画。 Animation类还支持子动画,这就是标记为“Animation 3”的Button的处理程序。 它首先使用无参数构造函数创建父动画对象。
681 0
|
JavaScript Android开发
第二十二章:动画(十)
你自己的缓和功能您可以轻松制作自己的缓动功能。所需要的只是一个类型为Func 的方法,它是一个带有double参数和double返回值的函数。这是一个传递函数:它应该为0的参数返回0,并且对于1的参数应该返回1.但是在这两个值之间,任何事情都会发生。
574 0
|
JavaScript Android开发
第二十二章:动画(十六)
使用Animation类让我们对Animation类进行一些实验。 这涉及实例化Animation类型的对象,然后调用Commit,它实际上开始动画。 Commit方法不返回Task对象; 相反,Animation类完全通过回调提供通知。
705 0
|
JavaScript Android开发
第二十二章:动画(十五)
深入动画 在第一次遇到时,完整的Xamarin.Forms动画系统可能会有点混乱。 让我们从可用于定义动画的三个公共类的全局视图开始。整理课程除了Easing类之外,Xamarin.Forms动画系统还包含三个公共类。
823 0
|
JavaScript Android开发
第二十二章:动画(九)
缓解功能你已经看过以下关键帧动画,它以一种方式摆动Button,然后是其他: async void OnButtonClicked(object sender, EventArgs args) { await button.RotateTo(90, 250); await button.RotateTo(-90, 500); await button.RotateTo(0, 250); } 但动画看起来并不合适。
941 0
|
JavaScript Android开发
第二十二章:动画(十四)
你自己的等待动画在本章的下一节中,您将看到Xamarin.Forms实现的基础动画基础结构。这些底层方法允许您定义自己的动画函数,这些函数返回Task对象,并且可以与await一起使用。在第20章“异步和文件I / O”中,您了解了如何使用静态Task.Run方法创建执行的辅助线程,以执行像Mandelbrot计算这样的密集后台作业。
711 0