Android App开发中补间动画的讲解以及实现钟摆动画效果实战（附源码简单易懂可直接使用）

忘是亡心i 2023-09-30 16:52 13阅读 0赞

> **需要图片集和源码请点赞关注收藏后评论区留言~~~**

## 一、补间动画的种类 ##

Android提供了补间动画，它允许开发者实现某个视图的动态变换，具体包括四种动画效果，分别是灰度动画，平移动画，缩放动画和旋转动画。因为开发者提供动画的起始状态值与终止状态值，然后系统按照时间推移计算中间的状态值，并自动把中间状态的视图补充到起止视图的变化过程中，自动补充中间视图的动画就被简称为补间动画

四种补间动画有不同的初始化方式 具体说明如下

> 1：灰度动画 在构造方法中指定视图透明度的前后数值
> 
> 2：平移动画 指定平移前后左上角的坐标值
> 
> 3：缩放动画 指定视图的前后缩放比例
> 
> 4：旋转动画 指定视图的旋转角度

可在下拉框中选择不同的动画效果 演示视频已上传至我的主页 有需要可自行观看

![339e1ec90c244cb494483cb127547245.png][]

![ecc469c4c6b440c884dbc1b75d0e6010.png][]

![88f3af7a455e4541ab9c92be89885120.png][]

![51044d51fa824db2b9cc8bed1dd9e651.png][]

代码如下

### Java类 ###

package com.example.animation;
    
    import android.os.Bundle;
    import androidx.appcompat.app.AppCompatActivity;
    import android.view.View;
    import android.view.animation.AlphaAnimation;
    import android.view.animation.Animation;
    import android.view.animation.Animation.AnimationListener;
    import android.view.animation.RotateAnimation;
    import android.view.animation.ScaleAnimation;
    import android.view.animation.TranslateAnimation;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.ImageView;
    import android.widget.Spinner;
    import android.widget.AdapterView.OnItemSelectedListener;
    
    import com.example.animation.util.Utils;
    
    public class TweenAnimActivity extends AppCompatActivity implements AnimationListener {
        private ImageView iv_tween_anim; // 声明一个图像视图对象
        private Animation alphaAnim, translateAnim, scaleAnim, rotateAnim; // 声明四个补间动画对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_tween_anim);
            iv_tween_anim = findViewById(R.id.iv_tween_anim);
            initTweenAnim(); // 初始化补间动画
            initTweenSpinner(); // 初始化动画类型下拉框
        }
    
        // 初始化补间动画
        private void initTweenAnim() {
            // 创建一个灰度动画。从完全透明变为即将不透明
            alphaAnim = new AlphaAnimation(1.0f, 0.1f);
            alphaAnim.setDuration(3000); // 设置动画的播放时长
            alphaAnim.setFillAfter(true); // 设置维持结束画面
            // 创建一个平移动画。向左平移100dp
            translateAnim = new TranslateAnimation(1.0f, Utils.dip2px(this, -100), 1.0f, 1.0f);
            translateAnim.setDuration(3000); // 设置动画的播放时长
            translateAnim.setFillAfter(true); // 设置维持结束画面
            // 创建一个缩放动画。宽度不变，高度变为原来的二分之一
            scaleAnim = new ScaleAnimation(1.0f, 1.0f, 1.0f, 0.5f);
            scaleAnim.setDuration(3000); // 设置动画的播放时长
            scaleAnim.setFillAfter(true); // 设置维持结束画面
            // 创建一个旋转动画。围绕着圆心顺时针旋转360度
            rotateAnim = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF,
                    0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            rotateAnim.setDuration(3000); // 设置动画的播放时长
            rotateAnim.setFillAfter(true); // 设置维持结束画面
        }
    
        // 初始化动画类型下拉框
        private void initTweenSpinner() {
            ArrayAdapter<String> tweenAdapter = new ArrayAdapter<>(this,
                    R.layout.item_select, tweenArray);
            Spinner sp_tween = findViewById(R.id.sp_tween);
            sp_tween.setPrompt("请选择补间动画类型");
            sp_tween.setAdapter(tweenAdapter);
            sp_tween.setOnItemSelectedListener(new TweenSelectedListener());
            sp_tween.setSelection(0);
        }
    
        private String[] tweenArray = {"灰度动画", "平移动画", "缩放动画", "旋转动画"};
        class TweenSelectedListener implements OnItemSelectedListener {
            public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
                playTweenAnim(arg2); // 播放指定类型的补间动画
            }
    
            public void onNothingSelected(AdapterView<?> arg0) {}
        }
    
        // 播放指定类型的补间动画
        private void playTweenAnim(int type) {
            if (type == 0) { // 灰度动画
                iv_tween_anim.startAnimation(alphaAnim); // 开始播放灰度动画
                // 给灰度动画设置动画事件监听器
                alphaAnim.setAnimationListener(TweenAnimActivity.this);
            } else if (type == 1) { // 平移动画
                iv_tween_anim.startAnimation(translateAnim); // 开始播放平移动画
                // 给平移动画设置动画事件监听器
                translateAnim.setAnimationListener(TweenAnimActivity.this);
            } else if (type == 2) { // 缩放动画
                iv_tween_anim.startAnimation(scaleAnim); // 开始播放缩放动画
                // 给缩放动画设置动画事件监听器
                scaleAnim.setAnimationListener(TweenAnimActivity.this);
            } else if (type == 3) { // 旋转动画
                iv_tween_anim.startAnimation(rotateAnim); // 开始播放旋转动画
                // 给旋转动画设置动画事件监听器
                rotateAnim.setAnimationListener(TweenAnimActivity.this);
            }
        }
    
        // 在补间动画开始播放时触发
        @Override
        public void onAnimationStart(Animation animation) {}
    
        // 在补间动画结束播放时触发
        @Override
        public void onAnimationEnd(Animation animation) {
            if (animation.equals(alphaAnim)) { // 灰度动画
                // 创建一个灰度动画。从即将不透明变为完全透明
                Animation alphaAnim2 = new AlphaAnimation(0.1f, 1.0f);
                alphaAnim2.setDuration(3000); // 设置动画的播放时长
                alphaAnim2.setFillAfter(true); // 设置维持结束画面
                iv_tween_anim.startAnimation(alphaAnim2); // 开始播放灰度动画
            } else if (animation.equals(translateAnim)) { // 平移动画
                // 创建一个平移动画。向右平移100dp
                Animation translateAnim2 = new TranslateAnimation(Utils.dip2px(this, -100), 1.0f, 1.0f, 1.0f);
                translateAnim2.setDuration(3000); // 设置动画的播放时长
                translateAnim2.setFillAfter(true); // 设置维持结束画面
                iv_tween_anim.startAnimation(translateAnim2); // 开始播放平移动画
            } else if (animation.equals(scaleAnim)) { // 缩放动画
                // 创建一个缩放动画。宽度不变，高度变为原来的两倍
                Animation scaleAnim2 = new ScaleAnimation(1.0f, 1.0f, 0.5f, 1.0f);
                scaleAnim2.setDuration(3000); // 设置动画的播放时长
                scaleAnim2.setFillAfter(true); // 设置维持结束画面
                iv_tween_anim.startAnimation(scaleAnim2); // 开始播放缩放动画
            } else if (animation.equals(rotateAnim)) { // 旋转动画
                // 创建一个旋转动画。围绕着圆心逆时针旋转360度
                Animation rotateAnim2 = new RotateAnimation(0f, -360f,
                        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                rotateAnim2.setDuration(3000); // 设置动画的播放时长
                rotateAnim2.setFillAfter(true); // 设置维持结束画面
                iv_tween_anim.startAnimation(rotateAnim2); // 开始播放旋转动画
            }
        }
    
        // 在补间动画重复播放时触发
        @Override
        public void onAnimationRepeat(Animation animation) {}
    
    }

### XML文件 ###

## 二、补间动画的原理以及钟摆的实现 ##

补间动画只提供了基本的动态变换，如果想要复杂的动画效果，比如像钟摆一样左摆一下右摆一下，就要对它进行改造 钟摆的操作主要由以下三段动作组成

> 1：以上面端点为圆心 转到左边某个角度停住
> 
> 2：从左边向右边旋转 转到右边某个角度停住
> 
> 3：从右再向左转 完成一个周期

效果如下 动画演示视频已上传至个人主页 有需要可自行前往观看

![81ad000125674e4da5f06d39f18ce850.png][]

![4c566bc870ab468f8263b7a6a7992ed7.png][]

代码如下

### Java类 ###

package com.example.animation;
    
    import com.example.animation.widget.SwingAnimation;
    
    import android.os.Bundle;
    import androidx.appcompat.app.AppCompatActivity;
    import android.view.animation.Animation;
    import android.widget.ImageView;
    
    public class SwingAnimActivity extends AppCompatActivity {
        private ImageView iv_swing; // 声明一个图像视图对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_swing_anim);
            iv_swing = findViewById(R.id.iv_swing);
            findViewById(R.id.ll_swing).setOnClickListener(v -> showSwingAnimation());
            showSwingAnimation(); // 开始播放摇摆动画
        }
    
        // 开始播放摇摆动画
        private void showSwingAnimation() {
            // 创建一个摇摆动画
            // 参数取值说明：中间度数、摆到左侧的度数、摆到右侧的度数、圆心X坐标类型、圆心X坐标相对比例、圆心Y坐标类型、圆心Y坐标相对比例
            // 坐标类型有三种：ABSOLUTE 绝对坐标，RELATIVE_TO_SELF 相对自身的坐标，RELATIVE_TO_PARENT 相对上级视图的坐标
            // X坐标相对比例，为0时表示左边顶点，为1表示右边顶点，为0.5表示水平中心点
            // Y坐标相对比例，为0时表示上边顶点，为1表示下边顶点，为0.5表示垂直中心点
            SwingAnimation swingAnimation = new SwingAnimation(
                    0f, 60f, -60f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.0f);
            swingAnimation.setDuration(4000); // 设置动画的播放时长
            swingAnimation.setRepeatCount(0); // 设置动画的重播次数
            swingAnimation.setFillAfter(false); // 设置维持结束画面
            swingAnimation.setStartOffset(500); // 设置动画的启动延迟
            iv_swing.startAnimation(swingAnimation); // 开始播放摇摆动画
        }
    
    }

### XML文件 ###

**创作不易 觉得有帮助请点赞关注收藏~~~**

[339e1ec90c244cb494483cb127547245.png]: https://img-blog.csdnimg.cn/339e1ec90c244cb494483cb127547245.png
[ecc469c4c6b440c884dbc1b75d0e6010.png]: https://img-blog.csdnimg.cn/ecc469c4c6b440c884dbc1b75d0e6010.png
[88f3af7a455e4541ab9c92be89885120.png]: https://img-blog.csdnimg.cn/88f3af7a455e4541ab9c92be89885120.png
[51044d51fa824db2b9cc8bed1dd9e651.png]: https://img-blog.csdnimg.cn/51044d51fa824db2b9cc8bed1dd9e651.png
[81ad000125674e4da5f06d39f18ce850.png]: https://img-blog.csdnimg.cn/81ad000125674e4da5f06d39f18ce850.png
[4c566bc870ab468f8263b7a6a7992ed7.png]: https://img-blog.csdnimg.cn/4c566bc870ab468f8263b7a6a7992ed7.png