JazzHands
JazzHands copied to clipboard
IFTTT
Tweening function
The initial idea was to provide quadratic and cubic bezier curve animations of the frame's origin. I'm not sure this is a good way, but it's at least a very flexible one. Basically, all frame tweening is proxied through a tweening function. For any two consecutive key frames A and B, A's tweening function is called to generate the requested frame.
Besides the default tweening function, which calls -[IFTTTAnimation frameForTime:startKeyFrame:endKeyFrame:], functions for the mentioned quadratic and cubic bezier curve animations of the frame's origin are provided.
btw, I also thought about adding another property to (key) frames holding, for example, a bezier curve's control points, but wasn't happy with the chance of that being too ambiguous. In another project (w/ SpriteKit) I ended up having a JazzHands-like solution with animation-type specific (key) frames, also reducing both memory usage and allocation time (there were a lot of frames).
@felixjendrusch We just released JazzHands 2.0, which has an updated architecture that allows for much easier creation of custom animations. Check out MyCustomAnimation in the Demo app to see an example of how to do this.
The new JazzHands also has much lower memory usage an allocation time as it lazily creates the interpolated values instead of pre-generating the animation timeline array.
This looks awesome but I'm worried it's a bit complex for including in the main project- does it looks like the new ability to custom animations combined with the awesome Easing Functions you added would allow you to implement this as a custom animation type in your project? It looks like you could use an IFTTTFrameAnimation, and set the IFTTTEasingFunction to a cubic or quadratic easing function and have a similar effect.
Let me know if I misunderstood what this pull request is intended for!
@lauraskelton great news!
I guess a custom animation would probably work somehow. However, as described, the initial idea was to provide quadratic and cubic bezier curve animations of the frame's origin, i.e., moving a view along a bezier curve instead of a line. It really is about the interpolation, or tweening, not the easing.
After an initial look it seems like this could be realized by providing a custom CGRect wrapper (a la NSValue or an actual subclass) that conforms to IFTTTInterpolatable and implements a bezier curve animation.. will give that a try.
@lauraskelton check out https://github.com/felixjendrusch/JazzHands/tree/my-custom-value
@felixjendrusch Ah, I see! Animating the path it's following. Very cool!
What if, to make it so that other types of animations could use this kind of bezier curve tweening too (like IFTTTTranslationAnimation or some of the AutoLayout animations), you created a new class IFTTTBezierPoint (subclass of NSObject) that was Interpolatable, that had properties of a CGPoint point, CGPoint controlPoint1, and CGPoint controlPoint2. To interpolate from point A to point B, you'd grab point A's controlPoint1 and controlPoint2 and plug them into your bezier curve formula.
Then to use that to animate your frame, you'd just add an IFTTTBezierPoint at each keyframe, and your custom animation could set the frame's origin whenever 'animate' was called, with whatever the value was for the interpolated IFTTTBezierPoint's point was at that time.
@felixjendrusch I'm adding support for all types of CAAnimation to JazzHands after discovering that I'm able to set the "current time" on any object that conforms to the CAMediaTiming protocol.
So, the good news is, you should be able to use the built-in tweening of CAKeyframeAnimation to accomplish moving a view along a bezier path. Check out the heart animation in the new Demo app to see how that would look, and let me know what you think!
https://github.com/IFTTT/JazzHands/pull/1682/files
@lauraskelton regarding IFTTTBezierPoint, how did you imagine that to work with both IFTTTFrameAnimation and, for example, IFTTTTranslationAnimation? You'd still need a custom animation, right?
@revolter This might be irrelevant with the current project, but here's the link. https://github.com/IFTTT/JazzHands/blob/462c315baae8494873c17f2d3b55c9eec4836920/Example/JazzHandsDemo/MyCustomAnimation.m
So, should we create our own animations or make PRs with them if they're general? Like the font size of a label for example.
@revolter Well, this project is informally deprecated, so I'd encourage forks!