需要图片集和源码请点赞关注收藏后评论区留言~~~
一、实现百叶窗动画
合理运用图层规则可以实现酷炫的动画效果，比如把图片分割成一条一条，接着每条都逐渐展开，这便产生了百叶窗动画，把图片等分为若干小方格，然后逐次显示几个小方格，直至所有小方格都显示出来，便形成了马赛克动画。
以百叶窗动画为例，首先定义一个百叶窗视图，并重写onDraw方法，给遮罩画布描绘若干矩形叶片，每次绘制的叶片大小由比率参数决定
然后在布局文件中添加ShutterView节点，并在对应的互动页面调用setOriention方法设置百叶窗的方向，调用setLeafCount方法设置百叶窗的叶片数量，再利用属性动画渐进设置ratio属性，使整个百叶窗的各个叶片逐渐和尚，从而实现百叶窗的动画特效
百叶窗动画
代码如下
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文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="5dp" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:text="百叶窗动画样式：" android:textColor="@color/black" android:textSize="17sp" /> <Spinner android:id="@+id/sp_shutter" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:spinnerMode="dialog" /> </LinearLayout> <com.example.animation.widget.ShutterView android:id="@+id/sv_shutter" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" /> </LinearLayout>
二、实现马赛克动画
基于同样的原理 可以照葫芦画瓢实现马赛克动画
在布局文件中添加MosaicView节点 并在对应的活动页面调用setGridCount方法设置马赛克的格子数量，再利用属性动画渐进设置ratio属性，使得视图中的马赛克逐步清晰显现
效果如下
马赛克动画
代码如下
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文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="5dp" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:text="马赛克动画样式：" android:textColor="@color/black" android:textSize="17sp" /> <Spinner android:id="@+id/sp_mosaic" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:spinnerMode="dialog" /> </LinearLayout> <com.example.animation.widget.MosaicView android:id="@+id/mv_mosaic" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" /> </LinearLayout>
创作不易 觉得有帮助请点赞关注收藏~~~
