时间戳

首页 > 解决方案 > 如何使用 xamarin.ios 创建圆形脉冲动画？

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

问题描述

我想在 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");
        }

标签： c#xamarinxamarin.ios

解决方案

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

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这会在is时不断脉冲动画true。

推荐阅读