动画方法

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

您无需使用示例中显示的调度程序内容。您可以使用常规任务并等待它们：

while(pulse)
{
    await Task.Delay(TimeSpan.FromMilliseconds(200));
    AnimateCircularPulseAt(0);
    await Task.Delay(TimeSpan.FromMilliseconds(400));
    AnimateCircularPulseAt(1);
    await Task.Delay(TimeSpan.FromMilliseconds(500));
    AnimateCircularPulseAt(2);

    await Task.Delay(TimeSpan.FromMilliseconds(500));
}

当pulse为true时，这会不断使动画产生脉动。

Answer 2

当您使用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);         
    });

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

动画方法

2 个答案: