Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示（附源码和演示视频可直接使用）

叁歲伎倆 2023-09-30 16:54 21阅读 0赞

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

## 一、实现百叶窗动画 ##

合理运用图层规则可以实现酷炫的动画效果，比如把图片分割成一条一条，接着每条都逐渐展开，这便产生了百叶窗动画，把图片等分为若干小方格，然后逐次显示几个小方格，直至所有小方格都显示出来，便形成了马赛克动画。

以百叶窗动画为例，首先定义一个百叶窗视图，并重写onDraw方法，给遮罩画布描绘若干矩形叶片，每次绘制的叶片大小由比率参数决定

然后在布局文件中添加ShutterView节点，并在对应的互动页面调用setOriention方法设置百叶窗的方向，调用setLeafCount方法设置百叶窗的叶片数量，再利用属性动画渐进设置ratio属性，使整个百叶窗的各个叶片逐渐和尚，从而实现百叶窗的动画特效

百叶窗动画

![b44c2ac6e6bf494ab844d6d454b7e738.png][]

![a05023505bf44c38901db68ce9b98638.png][]

代码如下

### Java类 ###

package com.example.animation;
    
    import com.example.animation.util.Utils;
    import com.example.animation.widget.ShutterView;
    
    import android.animation.ObjectAnimator;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.os.Bundle;
    import androidx.appcompat.app.AppCompatActivity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.LinearLayout;
    import android.widget.Spinner;
    import android.widget.AdapterView.OnItemSelectedListener;
    
    public class ShutterActivity extends AppCompatActivity {
        private ShutterView sv_shutter; // 声明一个百叶窗视图对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_shutter);
            initView(); // 初始化视图
            initShutterSpinner(); // 初始化动画类型下拉框
        }
    
        // 初始化视图
        private void initView() {
            sv_shutter = findViewById(R.id.sv_shutter);
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bj03);
            sv_shutter.setImageBitmap(bitmap); // 设置百叶窗视图的位图对象
            ViewGroup.LayoutParams params = sv_shutter.getLayoutParams();
            params.height = Utils.getScreenWidth(this) * bitmap.getHeight() / bitmap.getWidth();
            sv_shutter.setLayoutParams(params); // 设置百叶窗视图的布局参数
        }
    
        // 初始化动画类型下拉框
        private void initShutterSpinner() {
            ArrayAdapter<String> shutterAdapter = new ArrayAdapter<>(this,
                    R.layout.item_select, shutterArray);
            Spinner sp_shutter = findViewById(R.id.sp_shutter);
            sp_shutter.setPrompt("请选择百叶窗动画类型");
            sp_shutter.setAdapter(shutterAdapter);
            sp_shutter.setOnItemSelectedListener(new ShutterSelectedListener());
            sp_shutter.setSelection(0);
        }
    
        private String[] shutterArray = {"水平五叶", "水平十叶", "水平二十叶",
                "垂直五叶", "垂直十叶", "垂直二十叶"};
        class ShutterSelectedListener implements OnItemSelectedListener {
            public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
                // 设置百叶窗视图的动画方向
                sv_shutter.setOriention((arg2 < 3) ? LinearLayout.HORIZONTAL : LinearLayout.VERTICAL);
                if (arg2 == 0 || arg2 == 3) {
                    sv_shutter.setLeafCount(5); // 设置百叶窗的叶片数量
                } else if (arg2 == 1 || arg2 == 4) {
                    sv_shutter.setLeafCount(10); // 设置百叶窗的叶片数量
                } else if (arg2 == 2 || arg2 == 5) {
                    sv_shutter.setLeafCount(20); // 设置百叶窗的叶片数量
                }
                // 构造一个按比率逐步展开的属性动画
                ObjectAnimator anim = ObjectAnimator.ofInt(sv_shutter, "ratio", 0, 100);
                anim.setDuration(3000); // 设置动画的播放时长
                anim.start(); // 开始播放属性动画
            }
    
            public void onNothingSelected(AdapterView<?> arg0) {}
        }
    
    }

### XML文件 ###

## 二、实现马赛克动画 ##

基于同样的原理 可以照葫芦画瓢实现马赛克动画

在布局文件中添加MosaicView节点 并在对应的活动页面调用setGridCount方法设置马赛克的格子数量，再利用属性动画渐进设置ratio属性，使得视图中的马赛克逐步清晰显现

效果如下

马赛克动画

![2a2dc1eb60af4d2c9a25d644f76bdb77.png][]

![d306f83b5e09490ea50b0d04cf19fb4a.png][]

代码如下

### Java类 ###

package com.example.animation;
    
    import com.example.animation.util.Utils;
    import com.example.animation.widget.MosaicView;
    
    import android.animation.ObjectAnimator;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.os.Bundle;
    import androidx.appcompat.app.AppCompatActivity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.LinearLayout;
    import android.widget.Spinner;
    import android.widget.AdapterView.OnItemSelectedListener;
    
    public class MosaicActivity extends AppCompatActivity {
        private MosaicView mv_mosaic; // 声明一个马赛克视图对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_mosaic);
            initView(); // 初始化视图
            initMosaicSpinner(); // 初始化马赛克类型下拉框
        }
    
        // 初始化视图
        private void initView() {
            mv_mosaic = findViewById(R.id.mv_mosaic);
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bj08);
            mv_mosaic.setImageBitmap(bitmap); // 设置马赛克视图的位图对象
            ViewGroup.LayoutParams params = mv_mosaic.getLayoutParams();
            params.height = Utils.getScreenWidth(this) * bitmap.getHeight() / bitmap.getWidth();
            mv_mosaic.setLayoutParams(params); // 设置马赛克视图的布局参数
        }
    
        // 初始化马赛克类型下拉框
        private void initMosaicSpinner() {
            ArrayAdapter<String> mosaicAdapter = new ArrayAdapter<>(this,
                    R.layout.item_select, mosaicArray);
            Spinner sp_mosaic = findViewById(R.id.sp_mosaic);
            sp_mosaic.setPrompt("请选择马赛克动画类型");
            sp_mosaic.setAdapter(mosaicAdapter);
            sp_mosaic.setOnItemSelectedListener(new MosaicSelectedListener());
            sp_mosaic.setSelection(0);
        }
    
        private String[] mosaicArray = {"水平二十格", "水平三十格", "水平四十格",
                "垂直二十格", "垂直三十格", "垂直四十格"};
        class MosaicSelectedListener implements OnItemSelectedListener {
            public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
                // 设置马赛克视图的动画方向
                mv_mosaic.setOriention((arg2 < 3) ? LinearLayout.HORIZONTAL : LinearLayout.VERTICAL);
                if (arg2 == 0 || arg2 == 3) {
                    mv_mosaic.setGridCount(20); // 设置马赛克的格子数量
                } else if (arg2 == 1 || arg2 == 4) {
                    mv_mosaic.setGridCount(30); // 设置马赛克的格子数量
                } else if (arg2 == 2 || arg2 == 5) {
                    mv_mosaic.setGridCount(40); // 设置马赛克的格子数量
                }
                // 起始值和结束值要超出一些范围，这样头尾的马赛克看起来才是连贯的
                int offset = 5;
                mv_mosaic.setOffset(offset); // 设置偏差比例
                // 构造一个按比率逐步展开的属性动画
                ObjectAnimator anim = ObjectAnimator.ofInt(mv_mosaic, "ratio", 0 - offset, 101 + offset);
                anim.setDuration(3000); // 设置动画的播放时长
                anim.start(); // 开始播放属性动画
            }
    
            public void onNothingSelected(AdapterView<?> arg0) {}
        }
    
    }

### XML文件 ###

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

[b44c2ac6e6bf494ab844d6d454b7e738.png]: https://img-blog.csdnimg.cn/b44c2ac6e6bf494ab844d6d454b7e738.png
[a05023505bf44c38901db68ce9b98638.png]: https://img-blog.csdnimg.cn/a05023505bf44c38901db68ce9b98638.png
[2a2dc1eb60af4d2c9a25d644f76bdb77.png]: https://img-blog.csdnimg.cn/2a2dc1eb60af4d2c9a25d644f76bdb77.png
[d306f83b5e09490ea50b0d04cf19fb4a.png]: https://img-blog.csdnimg.cn/d306f83b5e09490ea50b0d04cf19fb4a.png