Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示（附源码和演示视频 可直接使用）
2024-05-11 12:23:55
需要图片集和源码请点赞关注收藏后评论区留言~~~
一、实现百叶窗动画
合理运用图层规则可以实现酷炫的动画效果，比如把图片分割成一条一条，接着每条都逐渐展开，这便产生了百叶窗动画，把图片等分为若干小方格，然后逐次显示几个小方格，直至所有小方格都显示出来，便形成了马赛克动画。
以百叶窗动画为例，首先定义一个百叶窗视图，并重写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; // 声明一个百叶窗视图对象@Overrideprotected 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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:paddingLeft="5dp"android:orientation="horizontal"><TextViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="right"android:text="百叶窗动画样式："android:textColor="@color/black"android:textSize="17sp" /><Spinnerandroid: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.ShutterViewandroid: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; // 声明一个马赛克视图对象@Overrideprotected 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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:paddingLeft="5dp"android:orientation="horizontal"><TextViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="right"android:text="马赛克动画样式："android:textColor="@color/black"android:textSize="17sp" /><Spinnerandroid: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.MosaicViewandroid:id="@+id/mv_mosaic"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white" /></LinearLayout>
创作不易 觉得有帮助请点赞关注收藏~~~
Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示（附源码和演示视频 可直接使用）相关推荐
- 【Android App】定位导航GPS中开启手机定位功能讲解及实战（附源码和演示 超详细）
需要源码请点赞关注收藏后评论区留言私信~~~ 一.开启定位功能 手机定位分为卫星定位和网络定位两大类. (1)卫星定位 卫星定位服务由几个全球卫星导航系统提供. 卫星定位的原理是根据多颗卫星与导航芯片 ...
- 【Android App】人脸识别中使用Opencv比较两张人脸相似程度实战（附源码和演示 超详细）
需要全部代码请点赞关注收藏后评论区留言私信~~~ 一.比较两张人脸的相似程度 直方图由一排纵向的竖条或者竖线组成,横轴代表数据类型,纵轴代表数据多少. 图像直方图经常应用于特征提取.图像匹配等方面. ...
- Android App开发手机阅读中PDF文件渲染器的讲解及使用（附源码 简单易懂）
需要源码和图片集请点赞关注收藏后评论区留言~~~ 一.PDF文件渲染器 Android集成了PDF的渲染操作,从很大程度上方便了开发者,这个PDF文件渲染器便是PdfRenderer.渲染器允许从存储 ...
- Android App开发动画特效中帧动画和电影淡入淡出动画的讲解及实战（附源码和演示视频 简单易懂）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.帧动画 Android的动画分为三类,帧动画,补间动画和属性动画.其中帧动画是实现原理最简单的一种,跟现实生活中的电影胶卷类似,都是在短时间内连续 ...
- 【Android App】给三维魔方贴图以及旋转动画讲解和实战（附源码和演示视频 超详细必看）
需要源码请点赞关注收藏后评论区留言私信~~~ 一.给三维物体贴图 除了位置坐标.颜色向量和矩阵向量,着色器还支持声明材质坐标和纹理采样器. 其中材质坐标表示物体表面摊平后的二维空间,纹理采样器表示采用 ...
- 【Android App】勾勒出三维立方体和球体以及它们的转动图形讲解及实战（附源码和演示视频 超详细）
需要源码或运行有问题请点赞关注收藏后评论区留言~~~ 一.轮廓勾勒 勾勒三维物体轮廓线条的步骤如下: (1)调用glEnableClientState方法启用顶点开关 (2)调用glVertexPoi ...
- 【Android App】利用腾讯地图获取地点信息和规划导航线路讲解及实战（附源码和演示视频 超详细必看）
需要源码请点赞关注收藏后评论区留言~~~ 一.获取地点信息 至于如何集成腾讯地图和调用腾讯地图接口此处不再赘述,有需要请参见我之前的博客 腾讯地图用来搜索POI地点的工具是TencentSearch, ...
- 【Android App】利用自带的人脸检测器和OpenCV检测人脸讲解及实战（附源码和演示 超详细）
需要源码请点赞关注收藏后评论区留言私信~~~~ 一.利用人脸检测器识别人脸 对于简单的人脸识别操作,Android已经提供了专门的识别工具,名叫人脸检测器FaceDetector,部分常用方法如下 F ...
- 【Android App】二维码的讲解及生成属于自己的二维码实战（附源码和演示 超详细必看）
需要全部代码请点赞关注收藏后评论区留言~~~ 一.二维码基本内容介绍 条形码只能表达十几位数字编码,无法表示更复杂的数据. 二维码在二维方格上描出一个个黑点,从而表达更丰富的信息. 二维码早已在手机A ...
- 【Android App】人脸识别中借助摄像头和OpenCV实时检测人脸讲解及实战（附源码和演示 超详细）
需要全部代码请点赞关注收藏后评论区留言私信~~~ 一.借助摄像头实时检测人脸 与Android自带的人脸检测器相比,OpenCV具备更强劲的人脸识别功能,它可以通过摄像头实时检测人脸,实时检测的预览空 ...
最新文章
- 我国网络安全人才培养缺口巨大
- 我的人生项目 -- 启动
- 2021/6/20~22 每天学习python 30分钟 -了解python - python的运算符
- Python09 字典
- sql server 计算两个时间 相差的 几天几时几分几秒
- Invalidate和postInvalidate
- [蓝桥杯2018决赛]阅兵方阵-模拟，枚举
- js中当等于最小值是让代码不执行_从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理...
- [转]jquery的ajax交付时“加载中”提示的处理方法
- matlab解隐式差分格式,【毕业设计(论文)】二维热传导方程有限差分法的MATLAB实现...
- 《编译原理及实践教程》第一章学习笔记
- 冒烟测试、回归测试、随机测试、探索性测试和安全测试
- 金融壹账通第一季营收10亿 沈崇锋：推进双重主要上市
- xposed绕过模拟器检测_刺激战场过模拟器检测 刺激战场模拟器检测怎么绕过
- HBuilder将项目生成安卓手机app
- 硬盘坏了数据可以恢复吗？对症下药更有效
- [附源码]java毕业设计体检中心健康管理系统
- 导出excel文件后，显示文件损坏
- 代理对推广网站的四个作用
- echarts 江苏省地图各市级坐标点