Animation Challenge Solution

Hello, fellas,

I have got a solution.And it is straightforward.
Or maybe, Do you have any better solutions you suggest?
For the first challenge

   public void startAnimation() {
        sunYstart = mSunView.getTop();
        Log.d(TAG, "GET TOP : " + sunYstart);
        sunYend = mSkyView.getHeight();
        Log.d(TAG, "HEIGHT: " + sunYend);
        //layoutStart to layoutEnd
        heightAnimator = ObjectAnimator.ofFloat(mSunView, "y", sunYstart, sunYend).setDuration(3000); //Sun
        heightAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
     
        sunsetSkyAnimator = ObjectAnimator.ofInt(mSkyView, "backgroundColor", mBlueSkyColor, mSunsetSkyColor).setDuration(2000);    //Sunset Color
        sunsetSkyAnimator.setEvaluator(new ArgbEvaluator());


        nightSkyAnimator = ObjectAnimator.ofInt(mSkyView, "backgroundColor", mSunsetSkyColor, mNightSkyColor).setDuration(1500);     //Night color
        nightSkyAnimator.setEvaluator(new ArgbEvaluator());


        animatorSet = new AnimatorSet();
        animatorSet.play(sunsetSkyAnimator).with(heightAnimator).before(nightSkyAnimator)
        .with(seaAnimator);
        animatorSet.start();
    }

And my second animation method that animation reverse when a user clicks the screen a second time.

 public void startAnimatorReverse() {

        Log.d(TAG, "startAnimation -1: " + animatorSet.isRunning()); 
//check this on Logcat.if it is true,delete exclamation mark.if it is false, not delete exclamation mark.  
    if (!animatorSet.isRunning()) {

        /*animatorSet.end();*/
        heightAnimator.reverse();
        heightAnimator.setStartDelay(1000);


        nightSkyAnimator.reverse();
        sunsetSkyAnimator.setStartDelay(1000);
        sunsetSkyAnimator.reverse();
        seaAnimator.setStartDelay(1000);
        seaAnimator.reverse();
        animatorSet.end();

    }
    //for the final challenge
    if (!animator.isStarted()) {
        Log.d(TAG, "startAnimatorReverse: " + animator.isStarted());
        heightRefcAnimator.reverse();

    }
}

finally, onClickListener in onCreateView Method.

  private boolean firstClick = true;  // I declared it at the beginning of the class.

  mSceneView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if (firstClick) {
                    startAnimation();
                    initSunReflection(); // for the final challenge
                    firstClick = false;
                } else {
                    startAnimatorReverse();
                    firstClick = true;
                }


            }
        });

The second challenge is "the sun make it pulsate with heat", So
you can add the following code to the method of startAnimation().

 heatAnimator = ObjectAnimator.ofPropertyValuesHolder(mSunView,
                PropertyValuesHolder.ofFloat("scaleX", 1.3f)
                , PropertyValuesHolder.ofFloat("scaleY", 1.3f))
                .setDuration(600);
        heatAnimator.setRepeatCount(ObjectAnimator.INFINITE);
        heatAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

And you can set heatAnimator for Animator Set class object as “.with(heatAnimator)”.

The final challenge is the reflection.
I created a new xml file that name is the sun reflection in drawable folder.
fragment_sunset.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/sky"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.61"
        android:background="@color/blue_sky">

        <ImageView
            android:id="@+id/sun"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:src="@drawable/sun" />
    </FrameLayout>

    <FrameLayout
            android:id="@+id/sea"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.39"
            android:background="@color/sea" >

        <ImageView
            android:id="@+id/sunReflection"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="@drawable/sun_refct" />

    </FrameLayout>
</LinearLayout>

here is the final method is

  private void initSunReflection() {
        float ss = mSunReflaction.getY() - mSeaView.getHeight();
        Log.d(TAG, "ss: " + ss);
        float ssHeight = mSunReflaction.getHeight();
        Log.d(TAG, "ssHeight: " + ssHeight);
        heightRefcAnimator = ObjectAnimator.ofFloat(mSunReflaction, "y", ssHeight, ss).setDuration(3000); //SunRef
        heightRefcAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator = new AnimatorSet();
        animator.play(heightRefcAnimator);
        animator.start();
    }
3 Likes

Thanks for posting this, however it looks like you’ve left out some code. Could you please provide the full source code for SunsetFragment.java?