10. Xamarin中ViewExtension实现平移(包含有弹簧的渐变效果)旋转缩放动画

1. 平移动画

ViewExtension中的TranslateTo方法实现平移

• 具体参数四个
• x:水平方向移动距离
• y:垂直方向移动距离
• length:平移动画所用时间,单位毫秒
• easing:平移动画在移动过程中的动画方式,具体值可以看其枚举,有:慢进快出,慢进,慢出,弹簧效果进入,弹框效果退出等

/// The view to tanslate.
    /// The x component of the final translation vector.
    /// The y component of the final translation vector.
    /// The duration of the animation in milliseconds.
    /// The easing of the animation.
    /// 
Animates an elements TranslationX and TranslationY properties from their current values to the new values.
    /// To be added.
    /// Translate to is particular useful for animations because it is applied post-layout. Translation animations will not conflict with managed layouts and thus are ideal for doing slide in/out style animations.
    public static Task TranslateTo(this VisualElement view, double x, double y, uint length = 250, Easing easing = null)
    {

• 示例:

Task.Delay(10000).ContinueWith((b) =>
            {
                Device.BeginInvokeOnMainThread(() =>
                {
                    UnlockView.TranslateTo(animateDelta, 0,length:4000, easing: Easing.BounceOut);
                    Task.Delay(2000).ContinueWith((c) =>
                    {
                        ViewExtensions.CancelAnimations(UnlockView);
                        Task.Delay(3000).ContinueWith((a) =>
                        {
                            Device.BeginInvokeOnMainThread(() =>
                            {
                                UnlockView.TranslateTo(0, 0, easing: Easing.SinOut);
                            });
                        });
                    });
                });
            });

2. 动画过程中取消动画CancelAnimations

  ViewExtensions.CancelAnimations(UnlockView);

3. 此外还有其他动画效果,例如旋转,缩放等有时间再补充,看下图

Paste_Image.png

更详细信息请阅读官方ViewExtensions介绍,链接.

4. 动画结束后的监听,执行某些操作

动画会返回一个Task对象,然后调用ContinueWith就可以添加此Task结束后执行的任务

UnlockView.TranslateTo(0, 0, easing: Easing.BounceOut).ContinueWith((_) =>
                    {
                        // 添加动画执行完毕后的代码
                        // task结束,会执行此匿名函数
                    });