This is the second Android app I ever made, and I'm quite happy with it. Its focus is a custom view/control I made, named TweenerControl. As the name (hopefully) implies, it allows you to create tweening/easing curves that can later be used for a variety of things, including view animations. The TweenerControl creates a Tweener object, which implements the android.view.animation.Interpolator interface.
The motivation for the project was to be able to visually and interactively create tweening curves that could be used for a wide range of things. There are various interpolators offered by Android, but it's hard to visualize exactly what an AnticipateInterpolator really looks like, for example.
My tweener works by creating a series of cubic curves and connecting them into a single spline. At first I looked into using cubic Hermite splines, Bézier curves, and Kochanek-Bartels curves, but all of these were problematic because they provide two output values from one input value, and tweening functions need to produce one output value from one input value. Overall, I'm happy with the results the cubic curves give.
For the curious, the cubic curves were generated as follows: a cubic function f(x) is generated from two end points and the slope at the end points. That is, given two points, (x1, y1) and (x2, y2) that lie on the function f(x), and the slope at these points (m1 = f'(x1) and m2 = f'(x2)), the cubic function f(x) = ax3 + bx2 + cx + d is constructed satisfying these constraints. It's just a matter of a little linear algebra. A series of cubic curves are then pieced together into a single spline, representing the overall function that maps inputs in the range [0, 1] to a "tweened" output.
I'll work on getting the code repository online somewhere. Note that I will not be putting this on the Google Play Store, simply because it's a little demo and not something I think should clutter the Play Store.
In the Tweener Demo, there is a box along the top that moves back and forth along the top of the screen according to the curve. Different color schemes can be selected, and the color transitions according to the curve as well. There's a vertical line that moves across the curve as the box moves, showing you which part of the curve is causing the box to be at its specific location. Control points can be added by double-tapping the curve. A control point can be deleted by double-tapping the it. Here's some screenshots:
The initial screen.
The "Android" theme selected, with the curve moved around a bit.
The "Dark" theme selected, with the view zoomed in on a part of the curve.
The "Colorful" theme selected, with extra control points added.
Good information.
ReplyDelete