Xamarin.Forms项目中如何在Xamarin.iOS端正确使用UIViewPropertyAnimator

原有方案的问题根源 #

Xamarin.Forms有独立的布局管理引擎，所有VisualElement的布局属性（位置、大小、变换等）都由Forms层统一维护，直接修改原生视图的Transform属性时，Forms层感知不到这个变更，下次Forms触发布局重绘（比如页面旋转、视图大小变化、其他控件触发布局更新）时，就会把原生视图的状态冲回Forms层记录的旧值，导致UI异常、状态不同步。

核心实现思路 #

不要直接修改原生视图的布局属性，所有动画状态变更统一操作Xamarin.Forms的可绑定属性，让Forms布局引擎自动同步到原生视图，保证两端状态完全一致。

具体实现步骤 #

• 第一步：在共享项目中定义依赖服务接口

public interface ICustomViewAnimator
{
    /// <param name="view">要执行动画的Forms视图</param>
    /// <param name="duration">动画时长，单位秒</param>
    /// <param name="targetTranslationX">目标横向偏移值</param>
    void AnimateHorizontalTranslation(VisualElement view, double duration, double targetTranslationX);
}

• 第二步：在iOS平台项目中实现依赖服务

using UIKit;
using CoreGraphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
// 注册依赖服务
[assembly: Dependency(typeof(YourAppNamespace.iOS.CustomViewAnimator_iOS))]
namespace YourAppNamespace.iOS
{
    public class CustomViewAnimator_iOS : ICustomViewAnimator
    {
        public void AnimateHorizontalTranslation(VisualElement view, double duration, double targetTranslationX)
        {
            // 先验证渲染器存在，避免空引用异常
            var renderer = Platform.GetRenderer(view);
            if (renderer?.NativeView == null) return;

            // 构造贝塞尔曲线时序参数
            var timingParams = new UICubicTimingParameters(new CGPoint(0.4, 0), new CGPoint(0.2, 1));
            var animator = new UIViewPropertyAnimator(duration, timingParams);

            animator.AddAnimations(() =>
            {
                // 直接修改Forms的可绑定属性，由Forms自动同步到原生视图
                view.TranslationX = targetTranslationX;
            });

            // 动画结束后强制同步最终状态，避免动画中断导致的状态偏差
            animator.AddCompletion(finalPosition =>
            {
                if (finalPosition == UIViewAnimatingPosition.End)
                {
                    view.TranslationX = targetTranslationX;
                    view.ForceLayout();
                }
            });

            animator.StartAnimation();
        }
    }
}

• 第三步：在共享项目中调用依赖服务

// 示例：为名为targetView的控件执行横向位移动画
DependencyService.Get<ICustomViewAnimator>().AnimateHorizontalTranslation(targetView, 0.3, 300);

注意事项 #

• 所有VisualElement属性的修改操作必须在主线程执行，避免跨线程操作UI异常
• 如果需要实现可交互、可中断的动画，可通过UIViewPropertyAnimator的FractionComplete属性控制动画进度，同步修改Forms对应可绑定属性即可
• 不只是位移动画，缩放、旋转、透明度等常见动效都可以通过修改Forms对应可绑定属性（Scale、Rotation、Opacity等）实现，不需要直接操作原生视图属性
• 复杂自定义动效建议封装到自定义Renderer中，在Renderer内部监听Forms属性变更，配合UIViewPropertyAnimator实现过渡效果，状态同步逻辑更可控

内容的提问来源于stack exchange，提问作者user246392