第二十二章:动画(二)

简介: 探索基本动画让我们来看一个名为AnimationTryout的小程序。 XAML文件只包含一个居中的按钮:<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.

探索基本动画

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AnimationTryout.AnimationTryoutPage">
    <Button x:Name="button"
            Text="Tap Me!"
            FontSize="Large"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Clicked="OnButtonClicked" />
 
</ContentPage>

对于本练习,让我们忽略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
完整的旅程需要250毫秒(四分之一秒),这是此RotateTo动画的默认持续时间。
但是,这个程序有一个缺陷。 在您看到按钮旋转后,尝试再次点击它。 它不旋转。
该程序漏洞揭示了内部发生的一些问题:在第一次调用OnButtonClicked时,RotateTo方法获取当前的Rotation属性,该属性为0,然后将Rotation属性的动画从该值定义为 RotateTo的参数,即360.当动画在四分之一秒后结束时,Rotation属性保留为360。
下次按下该按钮时,当前值为360,RotateTo的参数也为360.在内部,动画仍然出现,但Rotation属性不会移动。 它停留在360。

目录
相关文章
|
存储 程序员
七夕快到了,用SwiftUI做一个表达爱意的心形动画
传统的七夕快到了,作为一个程序猿,最浪漫的礼物当然是自己写的啦! 思来想去也不知道写什么好,在某天在某音上学习时看到点赞的动画效果还不错,那不如就做一个表达爱意的动画吧。
288 0
七夕快到了,用SwiftUI做一个表达爱意的心形动画
|
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开发
第二十二章:动画(十五)
深入动画 在第一次遇到时,完整的Xamarin.Forms动画系统可能会有点混乱。 让我们从可用于定义动画的三个公共类的全局视图开始。整理课程除了Easing类之外,Xamarin.Forms动画系统还包含三个公共类。
823 0
|
JavaScript Android开发
第二十二章:动画(十六)
使用Animation类让我们对Animation类进行一些实验。 这涉及实例化Animation类型的对象,然后调用Commit,它实际上开始动画。 Commit方法不返回Task对象; 相反,Animation类完全通过回调提供通知。
705 0
|
JavaScript Android开发
第二十二章:动画(十)
你自己的缓和功能您可以轻松制作自己的缓动功能。所需要的只是一个类型为Func 的方法,它是一个带有double参数和double返回值的函数。这是一个传递函数:它应该为0的参数返回0,并且对于1的参数应该返回1.但是在这两个值之间,任何事情都会发生。
574 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