最近公司项目需要写一个跑马灯的效果,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跑马灯代码
网友评论