第二十二章:动画(十六)

简介: 使用Animation类让我们对Animation类进行一些实验。 这涉及实例化Animation类型的对象,然后调用Commit,它实际上开始动画。 Commit方法不返回Task对象; 相反,Animation类完全通过回调提供通知。

使用Animation类
让我们对Animation类进行一些实验。 这涉及实例化Animation类型的对象,然后调用Commit,它实际上开始动画。 Commit方法不返回Task对象; 相反,Animation类完全通过回调提供通知。
配置Animation对象有几种不同的方法,其中一些可能涉及子动画,这就是演示Animation类的项目称为Con currentAnimations的原因。 但并非该计划中的所有演示都涉及儿童动画。
XAML文件主要定义了一组按钮,用于触发动画并成为这些动画的目标:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ConcurrentAnimations.ConcurrentAnimationsPage">
    <StackLayout>
        <StackLayout.Resources>
            <ResourceDictionary>
                <Style TargetType="Button">
                    <Setter Property="HorizontalOptions" Value="Center" />
                    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                </Style>
            </ResourceDictionary>
        </StackLayout.Resources> 
        <Button Text="Animation 1 (Scale)"
                Clicked="OnButton1Clicked" />
        <Button Text="Animation 2 (Repeated)"
                Clicked="OnButton2Clicked" />
 
        <Button Text="Stop Animation 2"
                Clicked="OnStop2Clicked" />
 
        <Button Text="Animation 3 (Scale up &amp; down)"
                Clicked="OnButton3Clicked" />
 
        <Button Text="Animation 4 (Scale &amp; Rotate)"
                Clicked="OnButton4Clicked" />
         
        <Button Text="Animation 5 (Dots)"
                Clicked="OnButton5Clicked" />
        <Label x:Name="waitLabel"
               FontSize="Large"
               WidthRequest="100" />
 
        <Button Text="Turn off dots"
                Clicked="OnTurnOffButtonClicked" />
 
        <Button Text="Animation 6 (Color)"
                Clicked="OnButton6Clicked" />
    /StackLayout>
</ContentPage>

代码隐藏文件包含每个按钮的事件处理程序。
第一个Button的Clicked处理程序中的代码使用注释来标识Animation构造函数和Commit调用的所有参数。 总共有四种回调方法,每种方法在这里都表示为lambda函数,但没有最简洁的语法:

public partial class ConcurrentAnimationsPage : ContentPage
{
    __
    public ConcurrentAnimationsPage()
    {
        InitializeComponent();
    }
    void OnButton1Clicked(object sender, EventArgs args)
    {
        Button button = (Button)sender;
        Animation animation = new Animation(
            (double value) => 
                {
                    button.Scale = value;
                }, // callback
            1, // start
            5, // end
            Easing.Linear, // easing
            () => 
                {
                    Debug.WriteLine("finished");
                } // finished (but doesn't fire in this configuration)
            );
        animation.Commit(
            this, // owner
            "Animation1", // name
            16, // rate (but has no effect here)
            1000, // length (in milliseconds)
            Easing.Linear, 
            (double finalValue, bool wasCancelled) =>
                {
                    Debug.WriteLine("finished: {0} {1}", finalValue, wasCancelled);
                    button.Scale = 1;
                }, // finished
            () => 
                {
                    Debug.WriteLine("repeat");
                    return false;
                } // repeat
            );
    }
    __
}

Animation构造函数中的回调将Button的Scale属性设置为传递给该回调的值。该值的范围为1到5,如下两个参数所示。
Commit方法将所有者分配给动画。这可以是应用动画的可视元素或其他可视元素,例如页面。如果必须取消动画,则该名称将与所有者合并以唯一标识动画。应该使用相同的所有者来调用AnimationExtensions类中的AnimationIsRunning或AbortAnimation。 (你很快就会看到如何取消动画。)
动画构造函数的最后一个参数名为finished,它是一个应该在动画完成时调用的回调,但在此配置中它不会被调用。幸运的是,Commit方法还有一个带有两个参数的完成回调。第一个应指示最终值(但在此配置中该值始终为1),第二个参数是bool,如果取消动画,则设置为true。
在此示例中,两个完成的回调都会调用Debug.WriteLine,以便您可以确认已调用一个而不是另一个。 Commit调用中包含的完成回调将Scale属性设置回1,因此Button会快速恢复其原始大小。
如果要应用缓动函数,可以在构造函数或Commit方法调用中指定它。
第二个Button的Clicked处理程序与第一个Button非常相似,只是语法更加简洁。构造函数和Commit方法的许多参数都有默认值,构造函数已经利用了这些参数。 lambda函数的语法也已简化:

public partial class ConcurrentAnimationsPage : ContentPage
{
    __
    void OnButton2Clicked(object sender, EventArgs args)
    {
        Button button = (Button)sender;
        Animation animation = new Animation(v => button.Scale = v, 1, 5);
        animation.Commit(this, "Animation2", 16, 1000, Easing.Linear,
                         (v, c) => button.Scale = 1,
                         () => true);
    }
    void OnStop2Clicked(object sender, EventArgs args)
    {
        this.AbortAnimation("Animation2");
    }
    __
}

此Button的代码与上一个Button之间唯一的功能差异涉及重复回调。 当动画完成时 - 也就是说,在将值5传递给回调方法之后 - 调用传递给Commit方法的repeat和finished回调。 如果repeat返回true,则动画从头开始,并在结束时再次调用repeat和finished。
幸运的是,XAML文件包含另一个调用AbortAnimation来终止动画的Button。 AbortAnimation是一个扩展方法,因此必须在与Commit方法的第一个参数传递的相同元素上调用它,在这种情况下,它是页面对象。
如果你想要几个彼此独立运行的并发永久动画,你可以为它们中的每一个创建一个Animation对象,然后在每个动画上使用一个返回true的重复回调调用Commit。

目录
相关文章
|
存储 开发工具 索引
游戏编程之十七 生成简单的动画
游戏编程之十七 生成简单的动画
53 0
|
JavaScript Android开发
第二十二章:动画(二十一)
使用AnimationExtensions为什么ViewExtensions不包含ColorTo动画? 这种方法没有你最初假设的那么明显有三个可能的原因:首先,VisualElement定义的唯一Color属性是BackgroundColor,但通常不是要设置动画的Color属性。
567 0
|
JavaScript Android开发
第二十二章:动画(二十)
实现贝塞尔动画一些图形系统实现动画,该动画沿着贝塞尔曲线移动视觉对象,甚至(可选地)旋转视觉对象,使其保持与曲线相切。Bezier曲线以法国工程师兼数学家PierreBézier的名字命名,他在雷诺工作期间开发了用于汽车车身交互式计算机辅助设计的曲线。
651 0
|
Android开发
第二十二章:动画(十七)
子动画ConcurrentAnimations中的前两个示例是单个动画。 Animation类还支持子动画,这就是标记为“Animation 3”的Button的处理程序。 它首先使用无参数构造函数创建父动画对象。
705 0
|
JavaScript Android开发
第二十二章:动画(十九)
更多你自己的等待方法之前,您已经了解了如何将TaskCompletionSource与Device.StartTimer一起使用来编写自己的异步动画方法。 您还可以将TaskCompletionSource与Animation类结合使用,编写自己的异步动画方法,类似于ViewExtensions类中的方法。
666 0
|
Android开发
第二十二章:动画(十八)
超越高级动画方法你到目前为止看到的ConcurrentAnimations中的例子仅限于Scale和Rotate属性的动画,因此它们没有显示任何你无法做的事情。ViewExtensions类中的方法。
727 0
|
JavaScript Android开发
第二十二章:动画(十五)
深入动画 在第一次遇到时,完整的Xamarin.Forms动画系统可能会有点混乱。 让我们从可用于定义动画的三个公共类的全局视图开始。整理课程除了Easing类之外,Xamarin.Forms动画系统还包含三个公共类。
848 0
|
JavaScript Android开发
第二十二章:动画(十四)
你自己的等待动画在本章的下一节中,您将看到Xamarin.Forms实现的基础动画基础结构。这些底层方法允许您定义自己的动画函数,这些函数返回Task对象,并且可以与await一起使用。在第20章“异步和文件I / O”中,您了解了如何使用静态Task.Run方法创建执行的辅助线程,以执行像Mandelbrot计算这样的密集后台作业。
737 0
|
JavaScript Android开发 iOS开发
第二十二章:动画(十二)
永远的动画在入口动画的相反极端是永远的动画。 应用程序可以实现“永远”或至少在程序结束之前进行的动画。 这种动画的唯一目的通常是展示动画系统的功能,但最好是以令人愉快或有趣的方式。第一个示例称为FadingTextAnimation,并使用FadeTo淡入和淡出两个Label元素。
663 0
|
JavaScript Android开发
第二十二章:动画(十一)
入口动画实际编程中的一种常见类型的动画是在页面首次可见时发生的。 页面上的各种元素可以在进入最终状态之前进行简要动画处理。 这通常被称为入口动画,可能涉及: 翻译,将元素移动到最终位置。 缩放,将元素放大或缩小到最终尺寸。
879 0