转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持!


效果图

实现思路

  • 画一个小六边形
  • 按效果图位置画七个小六边形
  • 实现一个小六边形的显示与隐藏动画
  • 按顺序播放七个小六边形的动画

详解

画一个小六边形

画一个六边形只需要知道位置与大小。

位置这里使用中心点,大小使用中心点到顶点的距离。根据这两个数据就可以通过数学方法很容易的求出6个顶点坐标。

求出6个顶点坐标后可以通过canvas.drawPath来画出六边形:

        Paint mPaint = new Paint();
mPaint.setColor(mLoadingView.color);
mPaint.setStrokeWidth(3);
mPaint.setAlpha(0);
CornerPathEffect corEffect = new CornerPathEffect(length / CORNER_PATH_EFFECT_SCALE);
mPaint.setPathEffect(corEffect); PointF[] points = getHexagonPoints(centerPoint, length);
Path mPath = new Path();
mPath.moveTo(points[1].x, points[1].y);
mPath.lineTo(points[2].x, points[2].y);
mPath.lineTo(points[3].x, points[3].y);
mPath.lineTo(points[4].x, points[4].y);
mPath.lineTo(points[5].x, points[5].y);
mPath.lineTo(points[6].x, points[6].y);
mPath.close(); canvas.drawPath(mPath, mPaint);

按效果图位置画七出个小六边形

仔细观察效果图可以发现七个小六边形其实就是一个旋转后的大六边形的6个顶点+1个中心点,如下图所示:

这里有个坑,就是一定要注意大六边形和小六边形的边长问题!

另外,其实用纯数学算出6个小六边形的中心点也是很容易的。。。

实现一个小六边形的显示与隐藏动画

动画效果分两种,一个是显示,一个是隐藏。这里使用ValueAnimator来实现:

显示:

先放大并改变透明度

        ValueAnimator mShowAnimation = ValueAnimator.ofFloat(0, 1);
mShowAnimation.setDuration(ANIMATION_DURATION);
mShowAnimation.setInterpolator(new DecelerateInterpolator());
mShowAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float animValue = (float) animation.getAnimatedValue();
mScale = 0.5f + animValue / 2;
mPaint.setAlpha((int) (animValue * 255));
mLoadingView.invalidate();
}
});

隐藏:

        ValueAnimator mHideAnimation = ValueAnimator.ofFloat(1, 0);
mHideAnimation.setDuration(ANIMATION_DURATION);
mHideAnimation.setInterpolator(new DecelerateInterpolator());
mHideAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float animValue = (float) animation.getAnimatedValue();
mScale = 0.5f + animValue / 2;
mPaint.setAlpha((int) (animValue * 255));
mLoadingView.invalidate();
}
});

隐藏动画其实就是把显示动画倒过来,因此直接将显示动画reverse也可。

按顺序播放七个小六边形的动画

根据效果图,我们将7个小六边形编号为1,2,3,4,5,6,7。则一轮动画为:

1显示 -> 2显示 -> 3显示 -> 4显示 -> 5显示 -> 6显示 -> 7显示 -> 1隐藏 -> 2隐藏 -> 3隐藏 -> 4隐藏 -> 5隐藏 -> 6隐藏 -> 7隐藏

Android中可以使用AnimatorSetplaySequentially方法来播放一组顺序动画,所以我们只要不停的播放这个动画序列就ok了!

代码如下:

        AnimatorSet mPlayAnimator = new AnimatorSet();
ArrayList<Animator> animators = new ArrayList<>();
// add show animation
for (OverWatchViewItem item : items) {
animators.add(item.getShowAnimation());
} // add hide animation
for (OverWatchViewItem item : items) {
animators.add(item.getHideAnimation());
} // 播放动画序列
mPlayAnimator.playSequentially(animators);
mPlayAnimator.start();

最后

Github地址:

https://github.com/a396901990/LoadingView-OverWatch

Android仿“守望先锋”加载动画的更多相关文章

  1. gitHub-高仿58同城加载动画

    导入方式: /build.gradle repositories { maven { url "https://jitpack.io" } } /app/build.gradle ...

  2. android 新闻应用、Xposed模块、酷炫的加载动画、下载模块、九宫格控件等源码

    Android精选源码 灵活的ShadowView,可替代CardView使用 基于Tesseract-OCR实现自动扫描识别手机号 Android播放界面仿QQ音乐开源音乐播放器 新闻应用项目采用了 ...

  3. 自定义动画(仿Win10加载动画)

    一.源代码 源代码及demo 二.背景 先看看Win10的加载动画(找了很久才找到): CPA推广甲爪广告联盟满30日结 [点击进入] 甲爪广告联盟,提供各类高单价CPA广告 单价高 收益好 日付广告 ...

  4. 纯 HTML/CSS 高仿 Win10 加载动画

    自己做的超高仿Win10加载动画(应该是全网最像的 HTML 实现了),自己想用就拿去用吧 转圈加载 在线演示 HTML: <div class="loading"> ...

  5. 【Android】Fragment懒加载和ViewPager的坑

    效果 老规矩,先来看看效果 ANDROID和福利两个Fragment是设置的Fragment可见时加载数据,也就是懒加载.圆形的旋转加载图标只有一个,所以,如果当前Fragment正处于加载状态,在离 ...

  6. java攻城狮之路(Android篇)--widget_webview_metadata_popupwindow_tabhost_分页加载数据_菜单

    一.widget:桌面小控件1 写一个类extends AppWidgetProvider 2 在清单文件件中注册: <receiver android:name=".ExampleA ...

  7. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  8. 简易仿ios菊花加载loading图

    原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...

  9. Android常用的图片加载库

     Android常用的图片加载库 前言:图片加载涉及到图片的缓存.图片的处理.图片的显示等.四种常用的图片加载框架,分别是Fresco.ImageLoader. Picasso. Glide. Uni ...

随机推荐

  1. centos使用yum安装软件的时候出现了undefined symbol: CRYPTO_set_locking_callback

    1.问题 在CentOS下使用yum安装软件,结果出现了下面的错误提示: # yum installThere was a problem importing one of the Python mo ...

  2. Sqlserver查询结果,让某列结果合并一列并且逗号分隔。

            create function [dbo].[mergeName](@Id bigint) returns nvarchar(500)     as     begin     dec ...

  3. java位操作总结

    在计算机中所有数据都是以二进制的形式储存的. 位运算其实就是直接对在内存中的二进制数据进行操作,因此处理数据的速度非常快. 方便演示,首先写个二进制打印方法: private static void ...

  4. 试验删除RAC(ORA10G)节点

    1.环境概述 2.删除一个节点 本实验中以删除第二个节点为示例. 2.1删除数据库实例 在第一个节点上(存活的节点)上使用DBCA删除第二个节点的实例. 执行完以上操作可以看下crs_stat –t  ...

  5. Lua字符串库

    1. 基础字符串函数:    字符串库中有一些函数非常简单,如:    1). string.len(s) 返回字符串s的长度:    2). string.rep(s,n) 返回字符串s重复n次的结 ...

  6. HDU 3572 Task Schedule(拆点+最大流dinic)

    Task Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  7. php多图上传问题笔记

    图片上传好用插件有,比如 uploadify  ueditor html5的各种ajax上传插件,大部分都是异步,返回只是true之类,有些时候需要上传图片需要一起上传,其实可以通过操作流程来避免这个 ...

  8. ip_conntrack table full dropping packet错误的解决方法

    ip_conntrack表满导致的,iptables开启后会加载ip_conntrack模块,来跟踪包.默认情况下ip_conntrack_max大小为65536. 查看ip_conntrack最大大 ...

  9. C# 日期格式转【转】

    使用:DateTime.ToString的方法(String, IFormatProvider)转换格式 using System; using System.Globalization; Strin ...

  10. Android Handler机制

    http://blog.csdn.net/erliangcode/article/details/52117831