Wednesday, July 8, 2015

MyNotes: Color Shifting

In my last two entries I covered the Shared Element Transition and the Translation Animations.  In this entry I am going to cover the last of the main edit note animations: The color shift.


This animation happens when the user changes the color of the note.  It is a subtle animation, but adds a nice polish to the UI.
This is a very simple animation that slowly changes from color A to color B over a time interval.  This animation can be found in the BackgroundAnimator class inside the common library.
BackgroundAnimator
/**
 * A helper class to help with background drawable animators
 */
public class BackgroundAnimatorHelper {

    /**
     * Animate a transition from one color to the next.
     *
     * @param view
     *         The view to animate.
     * @param fromColor
     *         the initial color for the animation.
     * @param toColor
     *         the final color for the animation.
     * @param duration
     *         The time in milliseconds for the animation.
     * @param animatorListener
     *         The listener for the animation.
     */
    public static void crossBlendColors(@NonNull View view, int fromColor, int toColor,
                                        int duration, Animator.AnimatorListener animatorListener) {

        view.animate().cancel();

        ObjectAnimator animator = ObjectAnimator
                .ofObject(view, "backgroundColor", new ArgbEvaluator(), fromColor, toColor);
        if (animatorListener != null) {
            animator.addListener(animatorListener);
        }
        animator.setDuration(duration);
        animator.start();
    }


    /**
     * Animate a transition from one color resource to the next.
     *
     * @param view
     *         The view to animate.
     * @param fromColorResource
     *         the initial color resource for the animation.
     * @param toColorResource
     *         the final color resource for the animation.
     * @param duration
     *         The time in milliseconds for the animation.
     * @param animatorListener
     *         The listener for the animation.
     */
    public static void crossBlendColorResource(@NonNull View view, int fromColorResource,
                                               int toColorResource, int duration,
                                               Animator.AnimatorListener animatorListener) {

        Resources resources = view.getResources();
        int fromRgb = resources.getColor(fromColorResource);
        int toRgb = resources.getColor(toColorResource);
        crossBlendColors(view, fromRgb, toRgb, duration, animatorListener);
    }


There are two methods here, but the meat of the animation is here:

    public static void crossBlendColors(@NonNull View view, int fromColor, int toColor,
                                        int duration, Animator.AnimatorListener animatorListener) {

        view.animate().cancel();

        ObjectAnimator animator = ObjectAnimator
                .ofObject(view, "backgroundColor", new ArgbEvaluator(), fromColor, toColor);
        if (animatorListener != null) {
            animator.addListener(animatorListener);
        }
        animator.setDuration(duration);
        animator.start();
    }

All this method does is create an ObjectAnimator with the ArgbEvaluator. The ArgEvaluator is a special interpolator that does the work of the color shift.  All the animator does is use the ArgbEvalauator to change the background color.

The other method, crossBlendColorResources, is a convenience method that figures out the argb value for  a color resource and then called the crossBlendColors method to perform the color shift.

Commits


These changes can be found at commits https://github.com/fsk-software/mynotes/commit/a0632503c5fabf74a31cca091d7975419d002328 and https://github.com/fsk-software/mynotes/commit/ec427c6a5684220836f823824d58a61cd2aea47b.

No comments :

Post a Comment