Marquee Effect

最新推荐文章于 2021-10-27 17:08:39 发布

LuckSeng

最新推荐文章于 2021-10-27 17:08:39 发布

阅读量445

点赞数

分类专栏： Objective-C 文章标签： ios

本文链接：https://blog.csdn.net/jhgfuytr/article/details/47296943

版权

Objective-C 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Marquee Effect

Demo Download Address

Now left us to see the effect

我們可以看到跑马灯的效果，其实是由一条虚实线做循环移动组成的。
如果我们要做这个效果是要把什么地方绘制一个小横线，空一段，这样循环下去吗？？？那移动的动画又要怎样做呢！！好像变得无比复杂。

这个时候，我们就要用到CAShapeLayer这个特殊的Layer。
它有个属性lineDashPhase，我们要利用它做出虚实线。

上代码

[ self setFillColor: [ UIColor clearColor ].CGColor ];
[ self setStrokeColor: [ UIColor whiteColor ].CGColor ];
[ self setLineWidth: 2.F ];
[ self setLineJoin: kCALineJoinRound ];
[ self setLineDashPattern: @[@(10), @(5)] ];

先让填充色为无颜色，再者设置线段实线部分的颜色，设置lineDashPattern这个属性，第一个参数是设置实线的长度，第二个参数是填写虚线部分的长度［即空白的线段长度］。
那此时就是可以了吗？不行，要设置layer的path属性，最终绘制的虚实线，是根据path来绘制的。

上代码

- ( void ) SetAnimationPath
{
    if ( self.superlayer == nil )
    {
        return;
    }

    UIWindow* aTopWindow = [[ UIApplication sharedApplication ].windows lastObject];

    while ( aTopWindow.superview != nil )
    {
        UIView* aView = aTopWindow.superview;
        aTopWindow = (UIWindow*)aView;
    }

    CALayer* aTopLayer      = aTopWindow.layer;
    CGRect aTopFrame        = [ self convertRect: self.bounds toLayer: aTopLayer ];
    CGRect aTopIntersection = CGRectIntersection(aTopFrame, aTopLayer.bounds);
    CGRect aAnimationPath   = [ self convertRect: aTopIntersection fromLayer: aTopLayer ];

    CGMutablePathRef const aPath = CGPathCreateMutable();
    CGPathAddRect(aPath, NULL, aAnimationPath);
    self.path                    = aPath;
    CGPathRelease(aPath);
}

为什么我不直接就根据 CAShapeLayer 这个实例的frame去设置path???

而是用通过顶级Layer去设置Path

其实是因为如果当path过大的时候［超过1024＊1024］，边的样式不是纯实线的时候，将需要很大的性能去计算，如果机子的性能支撑不住就会直接重启。所以我们就需要把path控制到只有整个设备屏幕的区域内，或略大于设备屏幕大小。这样就可以做出区域过大，依然正确显示的假象。
也因为这样，所以当CAShapeLayer移动的时候，需要不断设置frame，以获取当前区域path应该所在的位置

动画

/**
 *
 *
 */
- ( void ) OnStartAnimation
{
    if ( [ self animationForKey: @"linePhase" ] )
    {
        [ self removeAnimationForKey: @"linePhase" ];
    }

    @autoreleasepool
    {
        self.hidden = NO;

        CABasicAnimation* const aDashAnimation = [ CABasicAnimation animationWithKeyPath: @"lineDashPhase" ];
        [ aDashAnimation setFromValue: @( 0.0F ) ];
        [ aDashAnimation setToValue: @( 15 ) ];
        [ aDashAnimation setDuration: 0.75F ];
        [ aDashAnimation setRepeatCount: 100000 ];

        [ self addAnimation: aDashAnimation
                     forKey: @"linePhase" ];
    }
}

/**
 *
 *
 */
- ( void ) OnExitAnimation
{
    if ( [ self animationForKey: @"linePhase" ] )
    {
        [ self removeAnimationForKey: @"linePhase" ];
    }
}

其实动画就是设置lineDashPhase，那lineDashPhase是什么？？其实就是虚线一开始绘制的位置，那动画如何设置能够无缝衔接。我们可以想象一下，就好比我们跑圈一样，如果设置动画起始刚好就是一圈的长度，那就能够无缝结合。那怎样判断一圈的定义长度，其实就是可以看我们的画的虚线长度，实线长度。就是上面我们设置的lineDashPattern，通过这个可以知道我们一圈的长度为15

好啦！！你也动手试试吧