I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

sequence

Origin edge out, it seems to go round and round, but returned to the origin.

Disconsolate at each other, is a year Mid-Autumn Festival.

The taste of moon cakes seems to spread through the streets, thick acacia, childhood memories, constantly emerging, everything seems to be yesterday…

If between, childhood that lang Lang recited poetry voice gradually spread…

White rabbit pound medicine autumn fu spring, chang 'e solitary habitat and who neighbors? Today people do not see the ancient month, this month once according to the ancients. Ancient and present people if water, a total look at the moon are so. Only when the song to the wine, moonlight long shining in the golden bottle.Copy the code

Also do not know, in the vast cold palace of the goddess of the moon 🧚♀️, and missing who…

A deep sense of sleep swept in, eyes closed a moment, a door with ancient dusty breath quietly opened…

Cold palace tour, quietly started ~

This Demo GitHub address

  • Github.com/HLQ-Struggl…

Fairy, listen to me talk to you about animation

The appearance of animation, so that ordinary View has more possibilities, also give users a better comfortable experience.

Let’s take a look at some of the animations available on Android (partial, later additions, hopefully) :

View the animation

View animation can be understood by referring to property animation:

  • The View animation only creates the animation behavior visually, and the View itself does not change.

The frame of animation

Official:

Create an animation by using AnimationDrawable to display a series of pictures in sequence.

As the name suggests, a sequence of images is displayed in order to achieve an animation effect.

For example, accompany the fairy to see what the jade rabbit is doing?

See a wave of key attributes?

  • The root element animation-list contains one or more item elements.
  • Property Android :oneshot, true if executed once. False if a loop is played. The default is false and plays in a loop.
    • Single frame animation item, contained in animation-List.
      • Attribute Android: Drawable, single frame picture.
      • Property Android :duration, the duration of the current frame.

Achieve a wave together?

Define Drawable

<? The XML version = "1.0" encoding = "utf-8"? > <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/img_rabbit_000" android:duration="150" /> <item android:drawable="@drawable/img_rabbit_001" android:duration="150" /> <item android:drawable="@drawable/img_rabbit_002" android:duration="150" /> ... </animation-list>Copy the code

Define ImageView

<ImageView
    android:id="@+id/ivFrameAnim"
    android:layout_width="120dp"
    android:layout_height="120dp" 
    android:scaleType="fitXY"  />
Copy the code

Three, play animation

Another option is to loop through the drawable addFrame continuously. I prefer the following method:

private fun startFrameAnim() {
    binding.ivFrameAnim.apply {
        setBackgroundResource(R.drawable.animation_rabbit)
        val animationDrawable = drawable as AnimationDrawable
        animationDrawable.start()
    }
}
Copy the code

Be sure to compress the single frame in the animation. Do not make it too big, otherwise it will cause OOM.

There is a problem here, when starting the animation frame, the memory will explode, and I start thinking about processing and recycling bitmap, which is fruitless, and I will talk about it later.

Filling between animation

The introduction of the official saying:

Create an Animation by using Animation to perform a series of transformations on individual images

In fact, this is not just a single image, related views can be.

In the later stage, I am more accustomed to encapsulation as a tool class, which is convenient for writing at one time and calling in multiple places.

Rotate The magic of love

Let’s see the fairy go round and round

Then we will learn from the fairies ~ 🧚♀️🧚♀️ port

Let’s start with the property list:

  • Rotate Rotate animation. On behalf of the RotateAnimation.
    • Android: Duration animation execution speed
    • Android :fromDegrees Starting Angle
    • Android :toDegrees End Angle
    • Android: Indicates the X-axis axis of pivotX
    • Android: Indicates the Y-axis axis of pivotY

How about a taste of the code version?

val rotateAnimation = RotateAnimation(0f, 360f).apply {
    duration = 1800
}
binding.ivTweenRotate0.startAnimation(rotateAnimation)
Copy the code

Yes, it’s that simple, but there are other constructs as well:

Another XML version?

Create the anim directory and create the corresponding rotate file:

<? The XML version = "1.0" encoding = "utf-8"? > <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1800" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" />Copy the code

How do you use it?

binding.ivTweenRotate1.apply {
    val rotateAnim =
        AnimationUtils.loadAnimation(this@AnimationListActivity, R.anim.anim_rotate)
    startAnimation(rotateAnim)
}
Copy the code

Alpha likes fairies to be visible

The fade-in animation property is relatively simple:

  • Alpha fades in or out of the animation. On behalf of the AlphaAnimation.
    • Android: Duration animation execution speed
    • Android :fromAlpha initial opacity offset, 0.0 means transparent and 1.0 means opaque.
    • Android :toAlpha ends opacity

Also present a version of the code:

val alphaAnimation = AlphaAnimation(0f, 1f).apply {
    duration = 1800
}
binding.ivTweenAlpha0.startAnimation(alphaAnimation)
Copy the code

Here’s another XML version:

<? The XML version = "1.0" encoding = "utf-8"? > <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1800" android:fromAlpha="1" android:toAlpha="0" />Copy the code

Final use:

binding.ivTweenAlpha1.apply {
    val alphaAnim =
        AnimationUtils.loadAnimation(this@AnimationListActivity, R.anim.anim_alpha)
    startAnimation(alphaAnim)
}
Copy the code

I don’t want the fairy to disappear so quickly. I want to know the beginning and end of the fairy’s disappearance. What should I do?

Here also provides us with monitoring methods, as follows:

binding.ivTweenAlpha1.apply { AnimationUtils.loadAnimation(this@AnimationListActivity, R.anim.anim_alpha).apply { startAnimation(this) setAnimationListener(object : Animation. AnimationListener {/ Animation began to * * * * / override fun onAnimationStart (Animation, Animation? } /** * Override fun onAnimationEnd(animation: animation?) Override fun onAnimationRepeat(animation: animation?) {}})}}Copy the code

Love your heart will never change

Attributes:

  • Scale animation:
    • Android: Duration animation execution speed
    • Android :fromXScale starting X size offset, where 1.0 means unchanged
    • Android :toXScale End X size offset
    • Android :fromYScale Start Y size offset
    • Android :toYScale End Y size offset
    • Android :pivotX maintains the same X coordinate as the object scales
    • Android :pivotY maintains the same Y coordinate as the object scales

Try making a version of the code?

Val scaleAnimation = scaleAnimation (1f, 1.2f, 1f, 1.2 f). Apply 1800} {duration = binding. IvTweenScale0. StartAnimation (scaleAnimation)Copy the code

Here’s another XML version:

<? The XML version = "1.0" encoding = "utf-8"? > <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1800" android:fromXScale="1" Android :pivotY="50%" Android :toXScale="1.2" Android :toYScale="1.2" />Copy the code

The same load mode:

binding.ivTweenScale1.apply {
    AnimationUtils.loadAnimation(this@AnimationListActivity, R.anim.anim_scale).apply {
        startAnimation(this)
    }
}
Copy the code

Translate can translate to your heart

Attributes:

  • Translate animation:
    • Android: Duration animation execution speed
    • Android :fromXDelta start X offset
    • Android :toXDelta End X offset
    • Android :fromYDelta start Y offset
    • Android :toYDelta end Y offset

Here’s a code version:

Val translateAnimation = translateAnimation (0f,100f,0f,100f). Apply {duration = 3600 fillAfter = true} binding.ivTweenTranslate0.startAnimation(translateAnimation)Copy the code

Here’s the XML version:

<? The XML version = "1.0" encoding = "utf-8"? > <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1800" android:fromXDelta="0" android:fromYDelta="0" android:toXDelta="100" android:toYDelta="100" />Copy the code

And the corresponding use:

binding.ivTweenTranslate1.apply {
    AnimationUtils.loadAnimation(this@AnimationListActivity, R.anim.anim_translate).apply {
        startAnimation(this)
    }
}
Copy the code

Fairy Set asked me to dance for you

Too late, update tomorrow…

Attribute animation

To be continued, just a moment…

Where that push past

Harm, expected, unexpected, and busy looking for a job, temporarily shelved, follow-up to continue to maintain ~

Long live understanding

THK

Predecessors plant trees, descendants enjoy the shade, thanks to the elder big guy ~

Attach the corresponding reference address link ~

The resources

  • Animation and transitions
  • Animation resources

Reference resources

  • [National Style Animation Short Film] One-minute animation short Film “Jade Rabbit”

The use of tools

Here are only the tools that have not been used before, there are better tools welcome to recommend ~

  • Convert To JPG