Frame animation and gap animation of Android animation series

Android provides three kinds of animation: frame animation, gap animation and attribute animation. This article introduces the use of frame animation and gap animation. The use of attribute animation will be shared in later articles. Let's review the use of these two kinds of animation.

Frameanimation refers to frame by frame animation. Generally speaking, it is played in sequence according to the action sequence of pictures to form animation. The creation of frameanimation can be defined in XML or directly created in code.

Create a drawable file in the RES / drawable folder and use the animation list tag. The specific contents are as follows:

<?xml version="1.0" encoding="utf-8"?>
<!--FrameAnimator-->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/zzlx1"
        android:duration="100" />
    <item
        android:drawable="@drawable/zzlx2"
        android:duration="100" />
    <item
        android:drawable="@drawable/zzlx3"
        android:duration="100" />
    <!--...-->
</animation-list>

If the attribute oneshot is true, it means that the animation can only be played once; if false, it means that the animation is played circularly; drawable is the picture corresponding to the current action; duration is its duration; duration length affects the speed of animation playing; then use in the activity to obtain the animationdrawable corresponding to the drawable file, Then use the animationdrawable object to control the state of the animation, as shown below:

//获取Frame动画文件对应的AnimationDrawable
mAnimationDrawable = (AnimationDrawable) getResources().getDrawable(R.drawable.frame_animator);
//设置AnimationDrawable为图片的背景
imageView.setBackground(mAnimationDrawable);

//开启动画
mAnimationDrawable.start();
//停止动画
mAnimationDrawable.stop();

To create frame animation with code is to create an animationdrawable object, and then add the corresponding frame in animationdrawable. The code reference is as follows:

//代码创建Frame动画
mAnimationDrawable = new AnimationDrawable();
//设置动画循环播放，true为动画只播放一次
mAnimationDrawable.setOneShot(false);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx1),100);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx2),100);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx3),100);
//...
imageView.setBackground(mAnimationDrawable);

//开启动画
mAnimationDrawable.start();
//停止动画
mAnimationDrawable.stop();

The frameanimation effect is as follows:

Tweenanimation is commonly referred to as make-up animation, which mainly includes the following types:

The above animations have their own unique attributes. Let's take a look at some common attributes of these animations, as follows:

<!--设置动画持续时间-->
android:duration="1200"
<!--动画开始的延时-->
android:startOffset ="1000"
<!--动画播放完是否回到动画开始的位置，默认true，如果fillBefore设置为false,动画不会停留在结束位置，不知道是不是bug-->
android:fillBefore = "true"
<!--动画播放完之后是否回到动画结束的位置，默认false,如果fillAfter设置为true,动画则会停留在结束位置-->
android:fillAfter = "false"
<!--设置fill...属性是否启用，对fillAfter无效-->
android:fillEnabled= "true"
<!--设置动画重复模式,restart为重新播放，reverse为倒序回放，和repeatCount搭配使用-->
android:repeatMode = "restart"
<!--设置动画重复次数-->
android:repeatCount = "0"
<!--设置动画插值器，这里的插值器是动画开始速度较慢，后面加速-->
android:interpolator = "@android:anim/accelerate_interpolator"

If the corresponding animation is implemented in the code, these attributes also have corresponding attribute settings, which can be set directly.

Displacement animation translates the view horizontally or vertically. You can specify the start position and end position. You can use XML to define displacement animation or use code to create displacement animation. The subclass of animation corresponding to displacement animation is translateanimation.

XML definition displacement Animation: create an XML file translation under RES / anim_ Anim.xml, in which the displacement animation is defined as follows:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "false"
    android:fillEnabled= "false"
    android:repeatMode = "reverse"
    android:repeatCount = "5"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="100"
    android:toYDelta="100">

The above XML file defines a displacement animation file, in which the attributes of displacement animation have the following meanings:

<!--水平方向动画开始的位置-->
android:fromXDelta="0"
<!--垂直方向动画开始的位置-->
android:fromYDelta="0"
<!--水平方向动画结束的位置-->
android:toXDelta="100"
<!--垂直方向动画结束的位置-->
android:toYDelta="100"

Then get the translateanimation corresponding to the XML file in the activity and set it to the view where you want to animate the displacement, as follows:

private void translation(){
    //获取在anim下定义的动画文件
    TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.translation_anim);、
    //设置并开启动画
    ivImage.startAnimation(translateAnimation);    
}

Create displacement animation in Code: the subclass translateanimation of animation is used to create displacement animation in code. When using, you can directly create a translateanimation object, as follows:

//代码创建位移动画
private void translation(){
    //表示相对View自身原点(View左上角)像素偏移量
    TranslateAnimation translateAnimation = new TranslateAnimation(0,100,100);
    //设置动画持续时间
    translateAnimation.setDuration(1200);
    //设置动画重复模式
    translateAnimation.setRepeatMode(Animation.REVERSE);
    //设置动画重复次数
    translateAnimation.setRepeatCount(3);
    translateAnimation.setFillAfter(true);
    //设置动画插值器
    translateAnimation.setInterpolator(this,android.R.anim.accelerate_interpolator);
//        translateAnimation.setInterpolator(new AccelerateInterpolator());
    //...
    ivImage.startAnimation(translateAnimation);    
}

The offset of time pixels used in the above parameters. The API also provides a setting method for the percentage of a parent view of the view itself. The following method of creating a translateanimation object is the same as the effect achieved above. The details are as follows:

/**
 * ABSOLUTE:表示相对View自身原点(View左上角)像素偏移量
 *          此时和TranslateAnimation(float fromXDelta,float toXDelta,float fromYDelta,float toYDelta)一样
 * RELATIVE_TO_SELF:表示相对View自身的百分比，如0.5f表示View自身大小的50%，1.0f表示View自身大小
 * RELATIVE_TO_PARENT:表示相对父View的百分比，如0.5f表示View自身大小的50%，1.0f表示View自身大小
 */
TranslateAnimation translateAnimation = new TranslateAnimation(
        Animation.RELATIVE_TO_SELF,Animation.RELATIVE_TO_SELF,0.46f,0.46f);

When using, you can select an appropriate construction method to create translateanimation according to your needs. The test results are as follows:

Zoom animation is to zoom in and out the view to a certain extent. You can use XML to define displacement animation or use code to create displacement animation. The subclass of animation corresponding to zoom animation is scaleanimation.

XML definition scaling Animation: create an XML file scale under RES / anim_ Anim.xml, which defines the zoom animation, as follows:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "false"
    android:fillEnabled= "false"
    android:repeatMode = "reverse"
    android:repeatCount = "3"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromXScale="1"
    android:fromYScale="1"
    android:toXScale="3"
    android:toYScale="3"
    android:pivotX="50%"
    android:pivotY="50%">
</scale>

The above XML file defines a zoom animation file, in which the attributes of zoom animation have the following meanings:

<!--设置水平方向上的起始缩放倍数-->
android:fromXScale="1"
<!--设置垂直方向上的起始缩放倍数-->
android:fromYScale="1"
<!--设置水平方向上的结束缩放倍数-->
android:toXScale="3"
<!--设置垂直方向上的结束缩放倍数-->
android:toYScale="3"
<!--设置缩放中心水平方向上的坐标-->
android:pivotX="50%"
<!--设置缩放中心垂直方向上的坐标-->
android:pivotY="50%">

There are three settings for pivot X and pivot Y:

Then get the scaleanimation corresponding to the XML file in the activity and set it to the view where you want to animate the displacement, as follows:

private void scale(){
    ScaleAnimation scaleAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(this,R.anim.scale_anim);
    ivImage.startAnimation(scaleAnimation);
}

Code to create scaling Animation: code to create scaling animation uses scaleanimation, a subclass of animation. When using, you can directly create scaleanimation objects, as follows:

//代码创建缩放动画
private void scale(){
    ScaleAnimation scaleAnimation = new ScaleAnimation(1,3,1,0.5f,0.5f);
    scaleAnimation.setRepeatMode(Animation.REVERSE);
    scaleAnimation.setDuration(500);
    scaleAnimation.setRepeatCount(5);
    scaleAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
//        translateAnimation.setInterpolator(new AccelerateInterpolator());
    //...
    ivImage.startAnimation(scaleAnimation);
}

The pivotxtype and pivotytype in the parameters have been mentioned above and will not be repeated here. The test results are as follows:

Rotation animation rotates the view angle. You can use XML to define rotation animation or use code to create rotation animation. The subclass of animation corresponding to rotation animation is rotateanimation.

XML definition rotation Animation: create an XML file rotate under RES / anim_ Anim.xml, which defines the zoom animation, as follows:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "false"
    android:fillEnabled= "false"
    android:repeatMode = "reverse"
    android:repeatCount = "5"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromdegrees="0"
    android:todegrees="100"
    android:pivotY="50%"
    android:pivotX="50%">
</rotate>

The above XML file defines a rotation animation file, in which the attributes of scaling animation have the following meanings:

<!--设置动画开始时的角度，正数表示顺时针,负数表示逆时针-->
android:fromdegrees="0"
<!--设置动画结束时的角度，正数表示顺时针,负数表示逆时针-->
android:todegrees="100"
<!--设置水平方向旋转中心点的坐标-->
android:pivotY="50%"
<!--设置垂直方向旋转中心点的坐标-->
android:pivotX="50%"

Among them, pivot X and pivot y have three setting methods, which have been described above. Then get the rotateanimation corresponding to the XML file in the activity and set it to the view where you want to set the rotation animation, as follows:

private void rotate(){
    RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils.loadAnimation(this,R.anim.rotate_anim);
    ivImage.startAnimation(rotateAnimation);   
}

Code to create rotation Animation: code to create rotation animation uses the subclass rotateanimation of animation. When using, you can directly create a rotateanimation object, as follows:

//代码创建旋转动画
private void rotate(){
    RotateAnimation rotateAnimation = new RotateAnimation(0,0.5f);
    rotateAnimation.setRepeatMode(Animation.REVERSE);
    rotateAnimation.setDuration(1200);
    rotateAnimation.setRepeatCount(3);
    rotateAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
//        translateAnimation.setInterpolator(new AccelerateInterpolator());
    //...
    ivImage.startAnimation(rotateAnimation);
}

The test results are as follows:

Transparency animation is to modify the transparency of view. You can use XML to define transparency animation or use code to create transparency animation. The subclass of animation corresponding to transparency animation is alphaanimation.

XML definition transparency Animation: create an XML file alpha under RES / anim_ Anim.xml, which defines the zoom animation, as follows:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "true"
    android:fillEnabled= "false"
    android:repeatMode = "restart"
    android:repeatCount = "0"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromAlpha="1"
    android:toAlpha="0">
</alpha>

The above XML file defines a transparency animation file, in which the attributes of transparency animation have the following meanings:

<!--设置动画的开始透明度，0表示透明，1表示不透明-->
android:fromAlpha="1"
<!--设置动画的结束透明度，0表示透明，1表示不透明-->
android:toAlpha="0"

Then get the alphaanimation corresponding to the XML file in the activity and set it to the view where you want to set the rotation animation, as follows:

private void alpha(){
    AlphaAnimation alphaAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(this,R.anim.alpha_anim);
    ivImage.startAnimation(alphaAnimation); 
}

Code to create transparency Animation: code to create transparency animation uses alphaanimation, a subclass of animation. When using, you can directly create alphaanimation objects, as follows:

//代码创建透明度动画
private void alpha(){
    AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);
    alphaAnimation.setRepeatMode(Animation.RESTART);
    alphaAnimation.setDuration(1500);
    alphaAnimation.setRepeatCount(3);
//        alphaAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
//        translateAnimation.setInterpolator(new AccelerateInterpolator());
    //...
    ivImage.startAnimation(alphaAnimation);
}

The transparency animation test results are as follows:

So far, the contents of displacement, scaling, rotation and transparency animations have been introduced. In addition to using these animations alone, these animations can also be combined to achieve more complex animations,

Composite animation is realized by animationset. You can define composite animation by XML or create composite animation by code. The subclass of animation corresponding to transparency animation is animationset.

XML definition combined Animation: create an XML file combine under RES / anim_ Anim.xml, which defines the combined animation, as follows:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200">

    <!--透明度动画-->
    <alpha
        android:repeatMode="reverse"
        android:repeatCount="10"
        android:fromAlpha="1"
        android:toAlpha="0.5" />

    <!--旋转动画-->
    <rotate
        android:repeatMode="reverse"
        android:repeatCount="10"
        android:fromdegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:todegrees="360" />

    <!--缩放动画-->
    <scale
        android:repeatMode="reverse"
        android:repeatCount="10"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3" />
</set>

Then get the corresponding animationset of the XML file in the activity and set it to the view where you want to set the rotation animation, as follows:

private void combine(){
    AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this,R.anim.combine_anim);
    ivImage.startAnimation(animationSet);
}

Code to create composite Animation: code to create composite animation uses the subclass animationset of animation. When using, directly create animationset objects, and add the animation to be combined to the animationset in order, as follows:

//代码创建组合动画
private void combine(){
    AnimationSet animationSet = new AnimationSet(true);
    AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.3f);
    alphaAnimation.setRepeatMode(Animation.REVERSE);
    alphaAnimation.setRepeatCount(3);
    RotateAnimation rotateAnimation = new RotateAnimation(0,360,0.5f);
    rotateAnimation.setRepeatMode(Animation.REVERSE);
    rotateAnimation.setRepeatCount(3);
    ScaleAnimation scaleAnimation = new ScaleAnimation(1,0.5f);
    scaleAnimation.setRepeatMode(Animation.REVERSE);
    scaleAnimation.setRepeatCount(3);

    animationSet.addAnimation(alphaAnimation);
    animationSet.addAnimation(rotateAnimation);
    animationSet.addAnimation(scaleAnimation);

    animationSet.setDuration(1200);
    //AnimationSet不支持动画重复播放，如果想要组合动画重复播放可设置每个动画重复播放即可
//        animationSet.setRepeatMode(Animation.REVERSE);
//        animationSet.setRepeatCount(10);

    ivImage.startAnimation(animationSet);
}

The test results of combined animation are as follows: