第二十二章：动画（二）

我就是我 2022-02-14 14:19 238阅读 0赞

# 探索基本动画 #

让我们来看一个名为AnimationTryout的小程序。 XAML文件只包含一个居中的按钮：

对于本练习，让我们忽略Button可能在应用程序中执行的实际基本功能。 除了希望按钮执行该功能之外，假设您想在用户点击它时将其旋转一圈。 代码隐藏文件中的Clicked处理程序可以通过调用名为RotateTo的方法来实现，该方法的参数为360，表示要旋转的度数：

public partial class AnimationTryoutPage : ContentPage
    {
        public AnimationTryoutPage()
        {
            InitializeComponent();
        }
        void OnButtonClicked(object sender, EventArgs args)
        {
            button.RotateTo(360);
        }
    }

RotateTo方法是一个以Button的Rotation属性为目标的动画。 但是，RotateTo方法未在VisualElement类中定义，如Rotation属性。 相反，它是ViewExtensions类中定义的扩展方法。  
当您运行此程序并点击按钮时，RotateTo方法会动画按钮以在完整的360度圆圈中旋转。 这里正在进行中：  
![2019\_02\_19\_092703][2019_02_19_092703]  
完整的旅程需要250毫秒（四分之一秒），这是此RotateTo动画的默认持续时间。  
但是，这个程序有一个缺陷。 在您看到按钮旋转后，尝试再次点击它。 它不旋转。  
该程序漏洞揭示了内部发生的一些问题：在第一次调用OnButtonClicked时，RotateTo方法获取当前的Rotation属性，该属性为0，然后将Rotation属性的动画从该值定义为 RotateTo的参数，即360.当动画在四分之一秒后结束时，Rotation属性保留为360。  
下次按下该按钮时，当前值为360，RotateTo的参数也为360.在内部，动画仍然出现，但Rotation属性不会移动。 它停留在360。

[2019_02_19_092703]: /images/20220214/c61886017fc544648956958aa1726461.png