swift 跑马灯

作者: xcoffer | 来源:发表于2016-08-28 23:57 被阅读0次

    最近公司项目需要写一个跑马灯的效果,android的直接设置属性就可以了。为啥ios没有呢,我想一定是乔帮主认为跑马灯是个反人类的设计。哈哈,随便扯个蛋,进入正题。实现原理就是使用2个label,一前一后2个label的layer进行平行移动,当后面label的layer移动到前面的位置,动画再复原,重复执行。这样一个基本的跑马灯就实现了,我在此基础上给跑马灯加了,开始,停止,暂停,继续,4个动作。

    动画代码

        // MARK: - 跑马灯动画实现过程
        func marqueeAnimation() {
            let frontAnima = CABasicAnimation()
            frontAnima.keyPath = "position"
            frontAnima.fromValue = NSValue(CGPoint: CGPoint(x:  self.frontLabel.frame.width / 2 , y: self.frame.height / 2))
            frontAnima.toValue = NSValue(CGPoint: CGPoint(x: -1 * self.frontLabel.frame.width / 2, y: self.frame.height / 2))
            frontAnima.duration = self.time
            frontAnima.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
            frontAnima.repeatCount = MAXFLOAT
            
            let behindAnima = CABasicAnimation()
            behindAnima.keyPath = "position"
            behindAnima.fromValue = NSValue(CGPoint: CGPoint(x:  self.frontLabel.frame.width / 2 * 3 , y: self.frame.height / 2))
            behindAnima.toValue = NSValue(CGPoint: CGPoint(x:  self.frontLabel.frame.width / 2, y: self.frame.height / 2))
            behindAnima.duration = self.time
            behindAnima.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
            behindAnima.repeatCount = MAXFLOAT
            
            self.frontLabel.layer.addAnimation(frontAnima, forKey: "frontAnima")
            self.behindLabel.layer.addAnimation(behindAnima, forKey: "behindAnima")
        }
    

    开始

       // MARK: - 开始跑马灯动画
        func start(){
            if isRun == false {
                isRun = true
                isSuspend = false
                frontLabel.layer.timeOffset = 0.0
                behindLabel.layer.timeOffset = 0.0
                frontLabel.layer.speed = 1.0
                behindLabel.layer.speed = 1.0
                frontLabel.layer.beginTime = 0.0
                behindLabel.layer.beginTime = 0.0
                marqueeAnimation()
            }
        }
        
    

    停止

        // MARK: - 停止跑马灯动画
        func stop() {
            if isRun {
                isRun = false
                frontLabel.layer.removeAnimationForKey("frontAnima")
                behindLabel.layer.removeAnimationForKey("behindAnima")
            }
        }
    

    暂停

      // MARK: -  暂停动画
        func suspend() {
            if isRun && isSuspend == false {
                isSuspend = true
                
                let frontPauseTime = frontLabel.layer.convertTime(CACurrentMediaTime(), fromLayer: nil)
                frontLabel.layer.speed = 0.0
                frontLabel.layer.timeOffset = frontPauseTime
    
                let behindPauseTime = behindLabel.layer.convertTime(CACurrentMediaTime(), fromLayer: nil)
                behindLabel.layer.speed = 0.0
                behindLabel.layer.timeOffset = behindPauseTime
                
            }
        }
    

    继续

       // MARK: - 继续动画
        func continuation() {
            if isRun && isSuspend {
                isSuspend = false
                let frontPauseTime = frontLabel.layer.timeOffset
                frontLabel.layer.speed = 1.0
                frontLabel.layer.timeOffset = 0.0
                frontLabel.layer.beginTime = 0.0
                let frontTimeSincePause = frontLabel.layer.convertTime(CACurrentMediaTime(), fromLayer: nil)  - frontPauseTime
                frontLabel.layer.beginTime = frontTimeSincePause
                
                let behindPauseTime = behindLabel.layer.timeOffset
                behindLabel.layer.speed = 1.0
                behindLabel.layer.timeOffset = 0.0
                behindLabel.layer.beginTime = 0.0
                let behindTimeSincePause = behindLabel.layer.convertTime(CACurrentMediaTime(), fromLayer: nil)  - behindPauseTime
                behindLabel.layer.beginTime = behindTimeSincePause
                
            }
        }
    

    总结

    上面就是我实现跑马灯的核心代码。在网上找了一番都没有遇到满意的跑马灯代码,就自己写了一份,欢迎大家前来交流。如果是使用oc的,那就需要你自己翻译成oc代码了_ swift跑马灯代码

    相关文章

      网友评论

        本文标题:swift 跑马灯

        本文链接:https://www.haomeiwen.com/subject/fprxettx.html