CAKeyframeAnimation을 사용하여 UIBezierPath를 애니메이션으로 만들기

15335 단어 Swiftanimation

베지어 곡선을 당겨 움직여 보았습니다.

이쪽을 참고로 했습니다.
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에 그립니다.

이상.

좋은 웹페이지 즐겨찾기