c# - 如何使用 xamarin.ios 创建圆形脉冲动画？

Question

我想在 xamarin.iOS 中创建圆形脉冲动画。我引用了这个链接:https://www.iostutorialjunction.com/2018/08/create-pulse-animaion-in-swift-tutorial-step-by-step-guide.html

初始化数组CAShapeLayer[] arrLayerShapes = new CAShapeLayer[2];

并在 C# 中创建相同的代码

void createPulse()
    {
        vwShowAnimation.UserInteractionEnabled = false;

        for (int i = 0; i < 2; i++)
        {
            var centerPoint = new PointF((float)0, (float)0);
            var circularPath = UIBezierPath.FromArc(center: centerPoint, radius: UIScreen.MainScreen.Bounds.Size.Width / 2, startAngle: 0, endAngle: 2 * (float)Math.PI, clockwise: true);
            circularPulseLayer = new CAShapeLayer();
            circularPulseLayer.Path = circularPath.CGPath;
            circularPulseLayer.LineWidth = 2.5f;
            circularPulseLayer.FillColor = UIColor.Clear.CGColor;
            circularPulseLayer.StrokeColor = UIColor.FromRGB(36, 229, 186).CGColor;
            circularPulseLayer.Opacity = 0;
            circularPulseLayer.LineCap = CAShapeLayer.CapRound;
            circularPulseLayer.Position = new CGPoint(vwAnimateLayer.Frame.Size.Width / 2, vwAnimateLayer.Frame.Size.Width / 2);
            vwAnimateLayer.Layer.AddSublayer(circularPulseLayer);
            arrLayerShapes.SetValue(circularPulseLayer, i);
        }

        var popTime = new DispatchTime(DispatchTime.Now, (long)(0.2));
        var popTime2 = new DispatchTime(DispatchTime.Now, (long)(0.4));
        var popTime3 = new DispatchTime(DispatchTime.Now, (long)(0.5));

        //animateCircularPulseAt(0);
        NSTimer.CreateScheduledTimer(2.3, true, (obj) =>
        {
            DispatchQueue.MainQueue.DispatchAfter(popTime, () =>
            {
                animateCircularPulseAt(0);
                DispatchQueue.MainQueue.DispatchAfter(popTime2, () =>
                {
                    animateCircularPulseAt(1);
                });
            });

        });
    }

动画方法

void animateCircularPulseAt(int index)
        {
            arrLayerShapes[index].StrokeColor = UIColor.FromRGB(36, 229, 186).CGColor;
            var scaleAnimation = CABasicAnimation.FromKeyPath("transform.scale.xy");

            scaleAnimation.From = NSNumber.FromFloat(0);
            scaleAnimation.To = NSNumber.FromFloat(0.9f);


            var opacityAnimation = CABasicAnimation.FromKeyPath("opacity");

            opacityAnimation.From = NSNumber.FromFloat(0.9f);
            opacityAnimation.To = NSNumber.FromFloat(0);

            var groupAnimation = new CAAnimationGroup();
            groupAnimation.Animations = new CAAnimation[] { scaleAnimation, opacityAnimation };
            groupAnimation.Duration = 2.3f;
            groupAnimation.RepeatCount = (nint)float.MaxValue;
            groupAnimation.TimingFunction = CAMediaTimingFunction.FromName(CAMediaTimingFunction.EaseOut);
            arrLayerShapes[index].AddAnimation(groupAnimation, "groupanimation");
        }

Answer 1

当您使用 DispatchQueue.MainQueue.DispatchAfter 执行动画时，它是一个会阻塞 MainQueue 的同步函数，因此您将始终看到一个单独的层。将代码更改为 DispatchAsync 即可:

    NSTimer.CreateScheduledTimer(2.3, true, (obj) =>
    {
        DispatchQueue.MainQueue.DispatchAsync(() =>
       {
           animateCircularPulseAt(0);
       });

    });

    NSTimer.CreateScheduledTimer(2.5, true, (obj) =>
    {
        DispatchQueue.MainQueue.DispatchAsync(() =>
        {
            animateCircularPulseAt(1);
        });
    });

我刚刚测试过，发现这样会更好:

    NSTimer.CreateScheduledTimer(2.3, true, async (obj) =>
    {
        await Task.Delay(TimeSpan.FromMilliseconds(200));
        animateCircularPulseAt(0);
        await Task.Delay(TimeSpan.FromMilliseconds(400));
        animateCircularPulseAt(1);         
    });