接続2つのstrokeEndアニメーション

Question

私はAndroidの材料設計の円形不定活動の指標に似たカスタムアクティビティインジケータを作成しようとしています。基本的には、円を2回描いて消去したいのですが、消去と描画が同時にやって来るわけではありません。これは今まで私が持っているものです：

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") 

コードは、1つの問題を除いて、すべて期待通りに動作します。最初のstrokeEndアニメーションが終了し、2番目のアニメーションが開始されると、その点が描かれていた円の部分が消えて、0から再び描画が開始されることを意味するフラッシュがあります。これを修正する方法はありますか？

Answer 1

第strokeEndアニメーションが行われ、その時点まで を描かれた円の一部を意味フラッシュの種類があるもう一つは を開始すると消滅し、次いで0

から再び開始を描きます

あなたはdrawAnimationとendDrawAnimationの両方の設定を比較した場合、あなたは彼らがbeginTimeプロパティを除いて同一であることがわかります。それがあなたのちらつきの原因です。あなたは、私はちょうどあなたがendDrawAnimationは、改善のための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の提案

を持つようにしたいと仮定することができます望ましい結果を指定していないので、彼らは両方とも1で両端を0から開始し、彼ら

私が見る限り、アニメーションの動作（速度、値など）が変更されるあらかじめ定義されたオフセットがあることを意味するキーフレームアニメーションを作成することができます。代わりにCAKeyframeAnimationを使用することを検討してください。

私はあなたがこのことを認識しているが、現時点では、あなたがstrokeStart上で同時に実行されている2つのアニメーションを持っている場合はわからない午前：0.5 * durationから始まり0.5 * duration

endEraseAnimationの期間で0.2で始まり

• eraseAnimation 。 eraseAnimationの終わり（0.2 + 0.5 * duration）は常にendEraseAnimationの開始よりも大きいことを意味

（0.5 * duration）