borderColor 애니메이션 CATransaction

10786 단어 iOSSwiftObjective-C
UIViewbackgroundColor 와 같은 속성은 UIView 의 클래스 메서드 +animateWithDuration:animations: 로 애니메이션이 가능합니다.

그러나 CALayer 의 속성 borderColor 는 위의 메서드에서는 변경되지 않으므로 별법으로 애니메이션시킵니다.

Swift


let view = UIView.init(frame: CGRectMake(0, 0, 100, 100))
self.view.addSubview(view)
view.layer.borderColor = UIColor.blackColor().CGColor
view.layer.borderWidth = 10.0
view.layer.cornerRadius = 50.0

CATransaction.begin()
// borderColorを指定
let borderColorAnimation = CABasicAnimation.init(keyPath: "borderColor")
// 開始時の色
borderColorAnimation.fromValue = UIColor.blackColor().CGColor
// 終了時の色
borderColorAnimation.toValue = UIColor.greenColor().CGColor
// アニメーションの持続時間
borderColorAnimation.duration = 5.0
// アニメーションのカーブ
borderColorAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseOut)
// 完了後にリセットされないようにする (デフォルトはkCAFillModeRemoved)
borderColorAnimation.fillMode = kCAFillModeForwards
borderColorAnimation.removedOnCompletion = false
// アニメーション完了時  (※ addAnimationの前に記述しないといけない)
CATransaction.setCompletionBlock { () -> Void in

}
// ターゲットへ設定、任意のアニメーション名をつける
view.layer.addAnimation(borderColorAnimation, forKey: "borderColorAnimation1")
CATransaction.commit()

Objective-C


UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)];
[self.view addSubview:view];
view.layer.borderColor = [UIColor clearColor].CGColor;
view.layer.borderWidth = 10.0f;
view.layer.cornerRadius = 50.0f;

[CATransaction begin]; {
    // borderColorを指定
    CABasicAnimation *borderColorAnimation = [CABasicAnimation animationWithKeyPath:@"borderColor"];
    // 開始時の色
    borderColorAnimation.fromValue = (__bridge id)[UIColor clearColor].CGColor;
    // 終了時の色
    borderColorAnimation.toValue   = (__bridge id)[UIColor redColor].CGColor ;
    // アニメーションの持続時間
    borderColorAnimation.duration = 3.0;
    // アニメーションのカーブ
    borderColorAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    // 完了後にリセットされないようにする (デフォルトはkCAFillModeRemoved)
    borderColorAnimation.fillMode = kCAFillModeForwards;
    borderColorAnimation.removedOnCompletion = NO;
    // アニメーション完了時  (※ addAnimationの前に記述しないといけない)
    [CATransaction setCompletionBlock:^{

    }];
    // ターゲットへ設定、任意のアニメーション名をつける
    [view.layer addAnimation:borderColorAnimation forKey:@"borderColorAnimation5"];
} [CATransaction commit];

참고



Facebook이 개발·유지보수를 하고 있다 pop 라는 애니메이션 라이브러리도 추천입니다.

facebook/pop
CATransaction

좋은 웹페이지 즐겨찾기