转载请注明本文出自大苞米的博客(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. spring的Scheduled(定时任务)和多线程

    一.前言 在我们日常的开发中,经常用到数据同步的更新,这时我们采用的是spring的定时任务和java的多线程进行数据的更新,进行时实的服务调用. 二.实现思路            1.创建线程类 ...

  2. crawler4j 学习(二)

    crawler4j 学习(二) 实现控制器类以制定抓取的种子(seed).中间数据存储的文件夹.并发线程的数目: public class Controller { public static voi ...

  3. 怎样去除织梦版权信息中的Power by DedeCms

    用织梦建站时,网站底部调用的版权信息最后总会多出一个Power by DedeCms链接,此链接是织梦系统中默认的指向织梦官网的外链.本文就介绍两种去除这个外链的方法. 1.为什么要去除Power b ...

  4. HDU 1892 See you~ (二维树状数组)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1892 See you~ Problem Description Now I am leaving h ...

  5. Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined)D Dense Subsequence

    传送门:D Dense Subsequence 题意:输入一个m,然后输入一个字符串,从字符串中取出一些字符组成一个串,要求满足:在任意长度为m的区间内都至少有一个字符被取到,找出所有可能性中字典序最 ...

  6. session的安全性

    提到session,大家肯定会联想到登录,登录成功后记录登录状态,同时标记当前登录用户是谁.功能大体上就是这个样子,但是今天要讲的不是功能,而是实现.通过探讨session的实现方式来发掘一些可能你之 ...

  7. [IT新应用]家用NAS,自建“360云盘”

    360云盘也快要离开了.同事中有人开始尝试使用群晖NAS.西数的NAS来自建云了. [功能对比] [选择参数] [口碑评价]

  8. 总结-javascript-ajax

    <html><head><meta charset="utf-8"><script type="text/javascript& ...

  9. mysql5.1升级到mysql5.6

    这么大跨度的升级,本身不推荐.升级应该是循序渐进的,以防止不兼容.如果确实要这么做,你先要确保你的客户端管理工具要能兼容,比如phpmyadmin,此次升级依然存在一个问题,mysql server和 ...

  10. 【转】c#处理3种json数据的实例

    http://www.jb51.net/article/48027.htm http://json2csharp.chahuo.com/ 网络中数据传输经常是xml或者json,现在做的一个项目之前调 ...