CAKeyframeAnimation을 사용하여 UIBezierPath를 애니메이션으로 만들기
베지어 곡선을 당겨 움직여 보았습니다.
이쪽을 참고로 했습니다.
htps //w w. 요츠베. 이 m/와 tch? v = pTrW3cZg1 유
Desarrollo iOS 7: Core Animation: CAKeyFrameAnimation y mucho más
view 추가
class sampleView: UIView,UIGestureRecognizerDelegate {
var verticalLine:CAShapeLayer?
}
addGestureRecognizer 추가
func addPanGesture() {
var sgr = UIPanGestureRecognizer(target: self, action: "handleSlide:")
sgr.delegate = self
self.addGestureRecognizer(sgr)
}
터치 위치의 변화량을 취득
func handleSlide(gr:UIPanGestureRecognizer) {
var amountX = gr.translationInView(self).x
var amountY = gr.translationInView(self).y
self.verticalLine?.path = self.getLinePathWithAmount(amountX: amountX, amountY: amountY)
if gr.state == UIGestureRecognizerState.Ended {
self.removeGestureRecognizer(gr)
self.animateLineReturnFrom(positionX: amountX, positionY: amountY)
}
}
이번에는 Y 방향의 이동량 밖에 사용하고 있지 않지만, X 방향의 이동량도 계산하고 있습니다.
애니메이션 정의
func animateLineReturnFrom(#positionX: CGFloat,positionY: CGFloat) {
var bounce = CAKeyframeAnimation(keyPath: "path")
bounce.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
var values = [
self.getLinePathWithAmount(amountX: positionX, amountY: positionY),
self.getLinePathWithAmount(amountX: -(positionX * 0.7), amountY: -(positionY * 0.7)),
self.getLinePathWithAmount(amountX: positionX * 0.4, amountY: positionY * 0.4),
self.getLinePathWithAmount(amountX: -(positionX * 0.3), amountY: -(positionY * 0.3)),
self.getLinePathWithAmount(amountX: positionX * 0.15, amountY: positionY * 0.15),
self.getLinePathWithAmount(amountX: 0.0, amountY: 0.0)
]
bounce.values = values
bounce.duration = 0.9
bounce.removedOnCompletion = false
bounce.fillMode = kCAFillModeForwards
bounce.delegate = self
self.verticalLine?.addAnimation(bounce, forKey: "return")
}
배열 values에 베지어 곡선을 추가합니다. 모든 위치를 추가하는 것은 매우 힘들지만 CAKeyframeAnimation을 사용하면 keyframe간을 보완하고 애니메이션 해줍니다.
CAKeyframeAnimation과 CABasicAnimation의 차이는 다음과 같습니다.
CAKeyframeAnimation
* 3개 이상의 값을 보완하는 애니메이션
CABasicAnimation
* 두 값을 보완하는 애니메이션
・참고
h tp // w w. s에서 멋지다. 네 t/나키/카케 yf 라메아니 마치온-25415214
베지어 곡선 정의
func getLinePathWithAmount(#amountX:CGFloat,amountY:CGFloat) -> CGPathRef {
let w = UIScreen.mainScreen().bounds.width
let h = UIScreen.mainScreen().bounds.height
let centerY = h / 2
var bezierPath = UIBezierPath()
var topLeftPoint = CGPointMake(0, centerY)
var topMidPoint = CGPointMake(w / 2, centerY + amountY)
var topRightPoint = CGPointMake(w, centerY)
bezierPath.moveToPoint(topLeftPoint)
bezierPath.addQuadCurveToPoint(topRightPoint, controlPoint: topMidPoint)
return bezierPath.CGPath
}
CurrentPoint, Control Point, Endpoint의 관계는 Apple의 참조를 참고했습니다.
htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / ぃ b 등 ry / 이오 s / 도쿠 멘 타치 온 / 우이 키 t / 레후 렌세 / 우이 베지 rpa th_c ぁ s / # // / 아 p ぇ_ 레 f / 오 /인 stm/우이베지에 r파 th/아드 쿠아 d쿠 rゔぇ와 포인 t:안 t로 l포인 t:
베지어 곡선 그리기
func createLine() {
verticalLine = CAShapeLayer(layer: self.layer)
verticalLine?.lineWidth = 3.0
verticalLine?.path = getLinePathWithAmount(amountX: 0.0, amountY: 0.0)
verticalLine?.strokeColor = UIColor.whiteColor().CGColor
verticalLine?.fillColor = UIColor.clearColor().CGColor
self.layer.addSublayer(verticalLine)
}
CAShapeLayer에 그립니다.
이상.
Reference
이 문제에 관하여(CAKeyframeAnimation을 사용하여 UIBezierPath를 애니메이션으로 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/naoyashiga/items/bd014f303c1b743638b8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
class sampleView: UIView,UIGestureRecognizerDelegate {
var verticalLine:CAShapeLayer?
}
func addPanGesture() {
var sgr = UIPanGestureRecognizer(target: self, action: "handleSlide:")
sgr.delegate = self
self.addGestureRecognizer(sgr)
}
터치 위치의 변화량을 취득
func handleSlide(gr:UIPanGestureRecognizer) {
var amountX = gr.translationInView(self).x
var amountY = gr.translationInView(self).y
self.verticalLine?.path = self.getLinePathWithAmount(amountX: amountX, amountY: amountY)
if gr.state == UIGestureRecognizerState.Ended {
self.removeGestureRecognizer(gr)
self.animateLineReturnFrom(positionX: amountX, positionY: amountY)
}
}
이번에는 Y 방향의 이동량 밖에 사용하고 있지 않지만, X 방향의 이동량도 계산하고 있습니다.
애니메이션 정의
func animateLineReturnFrom(#positionX: CGFloat,positionY: CGFloat) {
var bounce = CAKeyframeAnimation(keyPath: "path")
bounce.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
var values = [
self.getLinePathWithAmount(amountX: positionX, amountY: positionY),
self.getLinePathWithAmount(amountX: -(positionX * 0.7), amountY: -(positionY * 0.7)),
self.getLinePathWithAmount(amountX: positionX * 0.4, amountY: positionY * 0.4),
self.getLinePathWithAmount(amountX: -(positionX * 0.3), amountY: -(positionY * 0.3)),
self.getLinePathWithAmount(amountX: positionX * 0.15, amountY: positionY * 0.15),
self.getLinePathWithAmount(amountX: 0.0, amountY: 0.0)
]
bounce.values = values
bounce.duration = 0.9
bounce.removedOnCompletion = false
bounce.fillMode = kCAFillModeForwards
bounce.delegate = self
self.verticalLine?.addAnimation(bounce, forKey: "return")
}
배열 values에 베지어 곡선을 추가합니다. 모든 위치를 추가하는 것은 매우 힘들지만 CAKeyframeAnimation을 사용하면 keyframe간을 보완하고 애니메이션 해줍니다.
CAKeyframeAnimation과 CABasicAnimation의 차이는 다음과 같습니다.
CAKeyframeAnimation
* 3개 이상의 값을 보완하는 애니메이션
CABasicAnimation
* 두 값을 보완하는 애니메이션
・참고
h tp // w w. s에서 멋지다. 네 t/나키/카케 yf 라메아니 마치온-25415214
베지어 곡선 정의
func getLinePathWithAmount(#amountX:CGFloat,amountY:CGFloat) -> CGPathRef {
let w = UIScreen.mainScreen().bounds.width
let h = UIScreen.mainScreen().bounds.height
let centerY = h / 2
var bezierPath = UIBezierPath()
var topLeftPoint = CGPointMake(0, centerY)
var topMidPoint = CGPointMake(w / 2, centerY + amountY)
var topRightPoint = CGPointMake(w, centerY)
bezierPath.moveToPoint(topLeftPoint)
bezierPath.addQuadCurveToPoint(topRightPoint, controlPoint: topMidPoint)
return bezierPath.CGPath
}
CurrentPoint, Control Point, Endpoint의 관계는 Apple의 참조를 참고했습니다.
htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / ぃ b 등 ry / 이오 s / 도쿠 멘 타치 온 / 우이 키 t / 레후 렌세 / 우이 베지 rpa th_c ぁ s / # // / 아 p ぇ_ 레 f / 오 /인 stm/우이베지에 r파 th/아드 쿠아 d쿠 rゔぇ와 포인 t:안 t로 l포인 t:
베지어 곡선 그리기
func createLine() {
verticalLine = CAShapeLayer(layer: self.layer)
verticalLine?.lineWidth = 3.0
verticalLine?.path = getLinePathWithAmount(amountX: 0.0, amountY: 0.0)
verticalLine?.strokeColor = UIColor.whiteColor().CGColor
verticalLine?.fillColor = UIColor.clearColor().CGColor
self.layer.addSublayer(verticalLine)
}
CAShapeLayer에 그립니다.
이상.
Reference
이 문제에 관하여(CAKeyframeAnimation을 사용하여 UIBezierPath를 애니메이션으로 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/naoyashiga/items/bd014f303c1b743638b8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
func handleSlide(gr:UIPanGestureRecognizer) {
var amountX = gr.translationInView(self).x
var amountY = gr.translationInView(self).y
self.verticalLine?.path = self.getLinePathWithAmount(amountX: amountX, amountY: amountY)
if gr.state == UIGestureRecognizerState.Ended {
self.removeGestureRecognizer(gr)
self.animateLineReturnFrom(positionX: amountX, positionY: amountY)
}
}
func animateLineReturnFrom(#positionX: CGFloat,positionY: CGFloat) {
var bounce = CAKeyframeAnimation(keyPath: "path")
bounce.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
var values = [
self.getLinePathWithAmount(amountX: positionX, amountY: positionY),
self.getLinePathWithAmount(amountX: -(positionX * 0.7), amountY: -(positionY * 0.7)),
self.getLinePathWithAmount(amountX: positionX * 0.4, amountY: positionY * 0.4),
self.getLinePathWithAmount(amountX: -(positionX * 0.3), amountY: -(positionY * 0.3)),
self.getLinePathWithAmount(amountX: positionX * 0.15, amountY: positionY * 0.15),
self.getLinePathWithAmount(amountX: 0.0, amountY: 0.0)
]
bounce.values = values
bounce.duration = 0.9
bounce.removedOnCompletion = false
bounce.fillMode = kCAFillModeForwards
bounce.delegate = self
self.verticalLine?.addAnimation(bounce, forKey: "return")
}
배열 values에 베지어 곡선을 추가합니다. 모든 위치를 추가하는 것은 매우 힘들지만 CAKeyframeAnimation을 사용하면 keyframe간을 보완하고 애니메이션 해줍니다.
CAKeyframeAnimation과 CABasicAnimation의 차이는 다음과 같습니다.
CAKeyframeAnimation
* 3개 이상의 값을 보완하는 애니메이션
CABasicAnimation
* 두 값을 보완하는 애니메이션
・참고
h tp // w w. s에서 멋지다. 네 t/나키/카케 yf 라메아니 마치온-25415214
베지어 곡선 정의
func getLinePathWithAmount(#amountX:CGFloat,amountY:CGFloat) -> CGPathRef {
let w = UIScreen.mainScreen().bounds.width
let h = UIScreen.mainScreen().bounds.height
let centerY = h / 2
var bezierPath = UIBezierPath()
var topLeftPoint = CGPointMake(0, centerY)
var topMidPoint = CGPointMake(w / 2, centerY + amountY)
var topRightPoint = CGPointMake(w, centerY)
bezierPath.moveToPoint(topLeftPoint)
bezierPath.addQuadCurveToPoint(topRightPoint, controlPoint: topMidPoint)
return bezierPath.CGPath
}
CurrentPoint, Control Point, Endpoint의 관계는 Apple의 참조를 참고했습니다.
htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / ぃ b 등 ry / 이오 s / 도쿠 멘 타치 온 / 우이 키 t / 레후 렌세 / 우이 베지 rpa th_c ぁ s / # // / 아 p ぇ_ 레 f / 오 /인 stm/우이베지에 r파 th/아드 쿠아 d쿠 rゔぇ와 포인 t:안 t로 l포인 t:
베지어 곡선 그리기
func createLine() {
verticalLine = CAShapeLayer(layer: self.layer)
verticalLine?.lineWidth = 3.0
verticalLine?.path = getLinePathWithAmount(amountX: 0.0, amountY: 0.0)
verticalLine?.strokeColor = UIColor.whiteColor().CGColor
verticalLine?.fillColor = UIColor.clearColor().CGColor
self.layer.addSublayer(verticalLine)
}
CAShapeLayer에 그립니다.
이상.
Reference
이 문제에 관하여(CAKeyframeAnimation을 사용하여 UIBezierPath를 애니메이션으로 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/naoyashiga/items/bd014f303c1b743638b8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
func getLinePathWithAmount(#amountX:CGFloat,amountY:CGFloat) -> CGPathRef {
let w = UIScreen.mainScreen().bounds.width
let h = UIScreen.mainScreen().bounds.height
let centerY = h / 2
var bezierPath = UIBezierPath()
var topLeftPoint = CGPointMake(0, centerY)
var topMidPoint = CGPointMake(w / 2, centerY + amountY)
var topRightPoint = CGPointMake(w, centerY)
bezierPath.moveToPoint(topLeftPoint)
bezierPath.addQuadCurveToPoint(topRightPoint, controlPoint: topMidPoint)
return bezierPath.CGPath
}
func createLine() {
verticalLine = CAShapeLayer(layer: self.layer)
verticalLine?.lineWidth = 3.0
verticalLine?.path = getLinePathWithAmount(amountX: 0.0, amountY: 0.0)
verticalLine?.strokeColor = UIColor.whiteColor().CGColor
verticalLine?.fillColor = UIColor.clearColor().CGColor
self.layer.addSublayer(verticalLine)
}
CAShapeLayer에 그립니다.
이상.
Reference
이 문제에 관하여(CAKeyframeAnimation을 사용하여 UIBezierPath를 애니메이션으로 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/naoyashiga/items/bd014f303c1b743638b8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)