두 개의 strokeEnd 애니메이션 연결

Question

Android 재질 디자인 순환 불확정 활동 표시기와 비슷한 사용자 지정 활동 표시기를 만들려고합니다. 기본적으로 원을 두 번 그려서 지우고 싶지만 지우기와 그림은 같은 시간이나 속도로 발생하지 않습니다. 이것은 내가 지금까지 가지고있는 것입니다 :

let progressLayer = CAShapeLayer() 
progressLayer.strokeColor = UIColor.red().cgColor 
progressLayer.fillColor = nil 
progressLayer.lineWidth = 2 

let drawAnimation = CABasicAnimation(keyPath: "strokeEnd") 
drawAnimation.duration = duration/2 
drawAnimation.fromValue = 0 
drawAnimation.toValue = 1 
drawAnimation.isRemovedOnCompletion = false 
drawAnimation.fillMode = kCAFillModeForwards 

let eraseAnimation = CABasicAnimation(keyPath: "strokeStart") 
eraseAnimation.duration = duration/2 
eraseAnimation.beginTime = 0.2 
eraseAnimation.fromValue = 0 
eraseAnimation.toValue = 0.4 
eraseAnimation.isRemovedOnCompletion = false 
eraseAnimation.fillMode = kCAFillModeForwards 

let endDrawAnimation = CABasicAnimation(keyPath: "strokeEnd") 
endDrawAnimation.beginTime = duration/2 
endDrawAnimation.duration = duration/2 
endDrawAnimation.fromValue = 0 
endDrawAnimation.toValue = 1 
endDrawAnimation.isRemovedOnCompletion = false 
endDrawAnimation.fillMode = kCAFillModeForwards 

let endEraseAnimation = CABasicAnimation(keyPath: "strokeStart") 
endEraseAnimation.beginTime = duration/2 
endEraseAnimation.duration = duration/4 
endEraseAnimation.fromValue = 0.4 
endEraseAnimation.toValue = 1 
endEraseAnimation.isRemovedOnCompletion = false 
endEraseAnimation.fillMode = kCAFillModeForwards 

let endEraseAnimation2 = CABasicAnimation(keyPath: "strokeStart") 
endEraseAnimation2.beginTime = duration * 3/4 
endEraseAnimation2.duration = duration/4 
endEraseAnimation2.fromValue = 0 
endEraseAnimation2.toValue = 1 
endEraseAnimation2.isRemovedOnCompletion = false 
endEraseAnimation2.fillMode = kCAFillModeForwards 


let animations = CAAnimationGroup() 
animations.duration = duration 
animations.animations = [drawAnimation, eraseAnimation, endDrawAnimation, endEraseAnimation, endEraseAnimation2] 
animations.isRemovedOnCompletion = false 
animations.fillMode = kCAFillModeForwards 
progressLayer.add(animations, forKey: "stroke") 

코드는 한 가지 문제점을 제외하고 모두 예상대로 작동합니다. 첫 번째 strokeEnd 애니메이션이 완료되고 두 번째 애니메이션이 시작될 때 점의 점이 사라질 때까지 그려지는 원의 부분을 의미하는 일종의 플래시가 있습니다. 그러면 0에서 다시 시작됩니다. 아무도 아이디어를 수정하지 못합니까?

Answer 1

제 strokeEnd 애니메이션 수행하고 그 시점까지 을 그려진 원의 일부를 의미 플래시 정렬가 두 번째는 시작되면 사라진다 후 0

에서 다시 시작 드로잉

drawAnimation과 endDrawAnimation의 설정을 비교하면 beginTime 속성을 제외하고 모두 동일하다는 것을 알 수 있습니다. 그것이 당신의 깜박임을 일으키는 원인입니다. 그들은 둘 다 0에서 시작하고 그들이 1. 양쪽 끝에 당신은 개선

에 대한 fromValue

let drawAnimation = CABasicAnimation(keyPath: "strokeEnd") 
drawAnimation.duration = duration/2 
drawAnimation.fromValue = 0 
drawAnimation.toValue = 1 
drawAnimation.isRemovedOnCompletion = false 
drawAnimation.fillMode = kCAFillModeForwards 

let endDrawAnimation = CABasicAnimation(keyPath: "strokeEnd") 
endDrawAnimation.beginTime = duration/2 // Starts after the first animation and starts with 0 again. 
endDrawAnimation.duration = duration/2 
endDrawAnimation.fromValue = 0 
endDrawAnimation.toValue = 1 
endDrawAnimation.isRemovedOnCompletion = false 
endDrawAnimation.fillMode = kCAFillModeForwards 

1의 제안을 가지고 당신이 원하는 것을 endDrawAnimation을 그냥 가정 할 수 있습니다 원하는 결과를 지정하지 않았으므로

애니메이션 동작 (속도, 값 등)이 변경되는 사전 정의 된 오프셋을 가지고 있음을 의미하는 키 프레임 애니메이션을 만들고 싶습니다. 대신 CAKeyframeAnimation을 사용하는 것이 좋습니다.

난 당신이 알고 있지만, 지금 당신이 strokeStart에서 동시에 실행되는 두 개의 애니메이션이있는 경우 확실하지 오전 : 0.5 * duration에서 시작 0.5 * duration

endEraseAnimation의 기간과 0.2에서 시작

• eraseAnimation . eraseAnimation (0.2 + 0.5 * duration)의 끝이 시작보다 항상 큰 것을 의미한다

endEraseAnimation (0.5 * duration)