AndroidFillableLoaders实战案例:8种页面加载动画的实现代码与效果展示
AndroidFillableLoaders是一个基于SVG路径的Android填充式进度视图库,能够帮助开发者创建有趣的品牌标志和动态加载效果。本文将通过实际案例展示如何使用这个强大的库实现8种不同风格的页面加载动画,让你的应用界面更加生动有趣。
准备工作:快速集成AndroidFillableLoaders
要开始使用AndroidFillableLoaders,首先需要将项目克隆到本地:
git clone https://gitcode.com/gh_mirrors/an/AndroidFillableLoaders
该库的核心类是FillableLoader和FillableLoaderBuilder,通过构建者模式可以轻松配置各种加载效果。主要实现逻辑位于library/src/main/java/com/github/jorgecastillo/FillableLoader.java和library/src/main/java/com/github/jorgecastillo/FillableLoaderBuilder.java。
8种加载动画效果展示与实现
1. 基础填充动画 (Plain)
基础填充动画是最简单的加载效果,通过线性填充SVG路径来展示加载进度。
实现代码示例:
FillableLoaderBuilder loaderBuilder = new FillableLoaderBuilder()
.parentView(container)
.svgPath(Paths.ANDROID)
.fillColor(getResources().getColor(R.color.green))
.strokeColor(getResources().getColor(R.color.white))
.strokeWidth(3)
.clippingTransform(new PlainClippingTransform())
.fillDuration(2000);
2. 波浪填充动画 (Waves)
波浪填充动画通过模拟波浪运动效果来填充SVG路径,给人一种流动的视觉体验。
实现代码示例:
FillableLoaderBuilder loaderBuilder = new FillableLoaderBuilder()
.parentView(container)
.svgPath(Paths.COCA_COLA)
.fillColor(getResources().getColor(R.color.red))
.strokeWidth(0)
.clippingTransform(new WavesClippingTransform())
.fillDuration(3000);
3. 圆角填充动画 (Rounded)
圆角填充动画使用圆角矩形作为遮罩,创造出柔和的填充效果。
实现代码示例:
FillableLoaderBuilder loaderBuilder = new FillableLoaderBuilder()
.parentView(container)
.svgPath(Paths.SOCCER_PLAYER)
.fillColor(getResources().getColor(R.color.red))
.strokeColor(getResources().getColor(R.color.white))
.strokeWidth(2)
.clippingTransform(new RoundedClippingTransform(50))
.fillDuration(2500);
4. 尖峰填充动画 (Spikes)
尖峰填充动画通过锯齿状的填充边缘创造出独特的视觉效果,适合表现活力和能量。
实现代码示例:
FillableLoaderBuilder loaderBuilder = new FillableLoaderBuilder()
.parentView(container)
.svgPath(Paths.T_REX)
.fillColor(getResources().getColor(R.color.green))
.strokeColor(getResources().getColor(R.color.white))
.strokeWidth(2)
.clippingTransform(new SpikesClippingTransform(8))
.fillDuration(2000);
如何自定义加载动画
AndroidFillableLoaders提供了丰富的自定义选项,你可以通过以下方式调整动画效果:
调整颜色和线条
fillColor(int color): 设置填充颜色strokeColor(int color): 设置描边颜色strokeWidth(int width): 设置描边宽度
控制动画速度
strokeDrawingDuration(int duration): 设置描边动画持续时间fillDuration(int duration): 设置填充动画持续时间
创建自定义裁剪变换
除了库中提供的几种裁剪变换,你还可以通过实现ClippingTransform接口创建自己的变换效果:
public class CustomClippingTransform implements ClippingTransform {
@Override
public void transform(Canvas canvas, float currentFillPhase, FillableLoader loader) {
// 自定义裁剪逻辑
}
}
所有裁剪变换类都位于library/src/main/java/com/github/jorgecastillo/clippingtransforms/目录下。
实际应用场景
AndroidFillableLoaders可以应用于多种场景:
- 应用启动加载页:使用品牌Logo作为SVG路径,创建独特的启动体验
- 内容加载指示器:替代传统的进度条,提升用户体验
- 提交按钮动画:表单提交时的状态反馈
- 成就解锁动画:游戏中成就解锁时的视觉反馈
示例应用中的8个页面展示了不同的动画效果,实现代码位于sampleapp/src/main/java/com/github/jorgecastillo/adapter/FillablePagesAdapter.java。
总结
AndroidFillableLoaders是一个功能强大且灵活的Android加载动画库,通过简单的API就能实现各种精美的填充动画效果。无论是基础的线性填充还是复杂的波浪效果,都能满足不同应用场景的需求。希望本文介绍的8种加载动画效果能为你的应用界面设计带来灵感!
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考







