bezierPath?

[markuswinkler]

Hi!

Thanks again for your amazing animation library! How would you animate an object using a bezierPath? Basically a startPoint, endPoint and one anchor point.

Thanks, Markus

[u10int]

This isn't possible with the library yet, but it is next on my list of things to add. Once I get the refactoring branch merged into master, the library will be at a more stable 1.0 version and then I'll be working on support for bezier path animations.

Hopefully I can get the refactor merged into master in the coming weeks. Until then, here's the branch that contains the newer API for the library: https://github.com/u10int/Kinetic/tree/props-refactor

[markuswinkler]

Cool! :)

I solved the bezier path. I wanted an icon to move along a path while getting smaller and fade out towards the end.

func QuadBezier(t:CGFloat, start:CGFloat, c1:CGFloat, end:CGFloat) -> CGFloat
{
    let t_:CGFloat = (1.0 - t)
    let tt_:CGFloat = t_ * t_
    let tt:CGFloat = t * t

    return start * tt_ + 2.0 *  c1 * t_ * t + end * tt
}

let A = CGPoint(x: frame.origin.x, y: frame.origin.y)
let B = CGPoint(x: System.width-40, y: 32)
let C = CGPoint(x: A.x + (B.x - A.x)/2 - 40, y: -130)
let duration = 0.8
Kinetic.animate(icon).to(.alpha(0), .scale(0.5)).duration(0.08).delay(duration - 0.08).play()
Kinetic.animate(icon).to(.scale(0.3)).duration(duration).ease(Easing.inSine).play().onUpdate({ anim in
    let x = self.QuadBezier(t: CGFloat(anim.progress()), start: A.x, c1: C.x, end: B.x)
    let y = self.QuadBezier(t: CGFloat(anim.progress()), start: A.y, c1: C.y, end: B.y)
    icon.frame = CGRect(origin: CGPoint(x: x, y: y), size: icon.frame.size)
}).onComplete({ anim in
    icon.removeFromSuperview()
})

[u10int]

I'm finally close to having all of the refactoring of the library done for the 1.0 release over in the https://github.com/u10int/Kinetic/tree/props-refactor branch. I also just added support for animating along both quadratic and cubic bezier paths:

let path = QuadBezier(start: start.center, cp1: controlPoint1.center, end: end.center)
let tween = Kinetic.animate(square).along(path).duration(1).ease(.quartInOut)

Aside from some additional final cleanup of the code and API and a few bugs, thinking this branch is pretty close to being production-ready for updating master with. Feel free to test it out and let me know if you find any issues.

[markuswinkler]

great! very cool :)