Merge pull request #1 from apigeoneer/Implementing_the_Animations

Implementing the animations
apigeoneer · Apr 12, 2021 · 931aac8 · 931aac8
2 parents 728390e eefad01
commit 931aac8
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 12 deletions.
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
diff --git a/app/src/main/java/com/gmail/apigeoneer/animationsexample/MainActivity.kt b/app/src/main/java/com/gmail/apigeoneer/animationsexample/MainActivity.kt
@@ -1,9 1,17 @@
 package com.gmail.apigeoneer.animationsexample
 
 import android.animation.*
 import android.graphics.Color
 import androidx.appcompat.app.AppCompatActivity
 import android.os.Bundle
 import android.view.View
 import android.view.ViewGroup
 import android.view.animation.AccelerateInterpolator
 import android.view.animation.LinearInterpolator
 import android.widget.Button
 import android.widget.FrameLayout
 import android.widget.ImageView
 import androidx.appcompat.widget.AppCompatImageView
 
 class MainActivity : AppCompatActivity() {
 
@@ -13,6 21,7 @@ class MainActivity : AppCompatActivity() {
  private lateinit var btnScale: Button
  private lateinit var btnFade: Button
  private lateinit var btnBackgroundColor: Button
  private lateinit var btnParty: Button
  private lateinit var btnShower: Button
 
  override fun onCreate(savedInstanceState: Bundle?) {
@@ -25,6 34,7 @@ class MainActivity : AppCompatActivity() {
  btnScale = findViewById(R.id.scaleBtn)
  btnFade = findViewById(R.id.fadeBtn)
  btnBackgroundColor = findViewById(R.id.backgroundBtn)
  btnParty = findViewById(R.id.partyBtn)
  btnShower = findViewById(R.id.showerBtn)
 
  btnRotate.setOnClickListener {
@@ -36,7 46,7 @@ class MainActivity : AppCompatActivity() {
  }
 
  btnScale.setOnClickListener {
- sacler()
  scaler()
  }
 
  btnFade.setOnClickListener {
@@ -47,33 57,147 @@ class MainActivity : AppCompatActivity() {
  colorizer()
  }
 
  btnParty.setOnClickListener {
  party()
  }
 
  btnShower.setOnClickListener {
  shower()
  }
 
  }
 
  private fun rotater() {
-
  val animator = ObjectAnimator.ofFloat(ivStar, View.ROTATION, -360f, 0f)
  // Change the animation duration to 1000 ms (since 3000 ms i.e. the default feels too short here)
  animator.duration = 900
  // to avoid jank
  animator.disableDuringAnimation(btnRotate)
  // run the animation
  animator.start()
  }
 
  private fun translater() {
- TODO("Not yet implemented")
  /**
  * 200 f -> not the distance to be travelled, it is the end position
  * START POSITION -> the default position of the star
  *
  * Problem 1: the animation is only being set up to run one way; it animates the star 200 pixels to the right… and that’s it.
  * So if we want it to come back, we’re going to need something extra.
  * Problem 2: subsequent animations don’t appear to do anything because the animation is set up to run to a value of 200.
  * After the animation has run, the value is already at 200, so there’s no place else to go.
  */
  val animator = ObjectAnimator.ofFloat(ivStar, View.TRANSLATION_X, 200f)
  /**
  * Solution to prob.s 1 & 2 : REPETITION
  */
  animator.repeatCount = 1
  animator.repeatMode = ObjectAnimator.REVERSE
  animator.disableDuringAnimation(btnTranslate)
  animator.start()
  }
 
- private fun sacler() {
- TODO("Not yet implemented")
  private fun scaler() {
  // The PropertyValuesHolder objects only hold the property & value info of the animation, not the target.
  val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 2.5f)
  val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 2.5f)
 
  val animator = ObjectAnimator.ofPropertyValuesHolder(ivStar, scaleX, scaleY)
  animator.repeatCount = 1
  animator.repeatMode = ObjectAnimator.REVERSE
  animator.disableDuringAnimation(btnScale)
  animator.start()
  }
 
  private fun fader() {
- TODO("Not yet implemented")
  val animator = ObjectAnimator.ofFloat(ivStar, View.ALPHA, 0f)
  animator.repeatCount = 1
  animator.repeatMode = ObjectAnimator.REVERSE
  animator.disableDuringAnimation(btnFade)
  animator.start()
  }
 
  private fun colorizer() {
- TODO("Not yet implemented")
  // THe ofArgb() smooths the transition between the start & final values
  // ivStar.parent -> background
  val animator = ObjectAnimator.ofArgb(ivStar.parent, "backgroundColor", Color.BLACK, Color.RED)
  animator.setDuration(400)
  animator.repeatCount = 1
  animator.repeatMode = ObjectAnimator.REVERSE
  animator.disableDuringAnimation(btnBackgroundColor)
  animator.start()
  }
 
  private fun party() {
  // ivStar.parent -> background
  val animator = ObjectAnimator.ofInt(ivStar.parent, "backgroundColor", Color.BLACK, Color.RED)
  animator.setDuration(400)
  animator.repeatCount = 1
  animator.repeatMode = ObjectAnimator.REVERSE
  animator.disableDuringAnimation(btnParty)
  animator.start()
  }
 
  private fun shower() {
- TODO("Not yet implemented")
  // Hold the required states
  val container = ivStar.parent as ViewGroup
  val containerW = container.width
  val containerH = container.height
  var starW = ivStar.width.toFloat()
  var starH = ivStar.height.toFloat()
 
  // Create a new view to hold the star graphic
  val newStar = AppCompatImageView(this)
  // Create the star
  newStar.setImageResource(R.drawable.ic_baseline_star_24)
  newStar.layoutParams = FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT,
  FrameLayout.LayoutParams.WRAP_CONTENT)
  // Add the star to the background
  container.addView(newStar)
 
  // Set the size of the star (.5x <= random size <= 1.5x of default size)
  newStar.scaleX = Math.random().toFloat() * 1.5f   .5f
  newStar.scaleY = newStar.scaleX
  // Use the above scale factor to change the cached width/height values
  starW *= newStar.scaleX // ?
  starH *= newStar.scaleY
 
  // Position the star
  // horizontally
  newStar.translationX = Math.random().toFloat() * containerW - starW / 2
  /**
  * vertically
  * Step 1: Create 2 animators: mover & rotator, along w/ their interpolators
  */
  val mover = ObjectAnimator.ofFloat(newStar, View.TRANSLATION_Y, -starH, containerH   starH)
  mover.interpolator = AccelerateInterpolator(1.2f) // vertical fall is accelerated
  val rotator = ObjectAnimator.ofFloat(newStar, View.ROTATION, (Math.random() * 1080).toFloat()) // 0 deg - 3*360 deg : 0 <= #rotations <= 3
  rotator.interpolator = LinearInterpolator() // rotation is linear
 
  // Combine the 2 animators to run in parallel using AnimatorSet
  val set = AnimatorSet()
  set.playTogether(mover, rotator)
  set.duration = (Math.random() * 1500   500).toLong()
 
  // Ren=move the star at the end of teh animation.
  set.addListener(object : AnimatorListenerAdapter() {
  override fun onAnimationEnd(animation: Animator?) {
  container.removeView(newStar)
  }
  })
  set.start()
  }
 
  // Extension fun
  private fun ObjectAnimator.disableDuringAnimation(view: View) {
  addListener(object: AnimatorListenerAdapter() {
  override fun onAnimationStart(animation: Animator?) {
  btnRotate.isEnabled = false
  }
 
  override fun onAnimationEnd(animation: Animator?, isReverse: Boolean) {
  btnRotate.isEnabled = true
  }
  })
  }
-}
 }
diff --git a/app/src/main/res/drawable/ic_baseline_star_24.xml b/app/src/main/res/drawable/ic_baseline_star_24.xml
@@ -0,0 1,5 @@
 <vector android:height="24dp" android:tint="#FFF026"
  android:viewportHeight="24" android:viewportWidth="24"
  android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
  <path android:fillColor="@android:color/white" android:pathData="M12,17.27L18.18,21l-1.64,-7.03L22,9.24l-7.19,-0.61L12,2 9.19,8.63 2,9.24l5.46,4.73L5.82,21z"/>
 </vector>
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
@@ -91,7 91,19 @@
  android:backgroundTint="#8BC34A"
  android:text="Background Color"
  android:textColor="#212121"
- android:textSize="10sp"
  android:textSize="11sp"
  android:textStyle="bold" />
 
  <Button
  android:id="@ id/partyBtn"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginRight="8dp"
  android:layout_weight="1"
  android:backgroundTint="#8BC34A"
  android:text="Party"
  android:textColor="#212121"
  android:textSize="11sp"
  android:textStyle="bold" />
 
  <Button
@@ -103,7 115,7 @@
  android:backgroundTint="#8BC34A"
  android:text="Shower"
  android:textColor="#212121"
- android:textSize="10sp"
  android:textSize="11sp"
  android:textStyle="bold" />
  </LinearLayout>
 
@@ -121,6 133,6 @@
  android:layout_width="50dp"
  android:layout_height="50dp"
  android:layout_gravity="center"
- app:srcCompat="@android:drawable/btn_star_big_on" />
  android:src="@drawable/ic_baseline_star_24" />
  </FrameLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>