android 星星流逝动画,Android Loading动画分析--续集
上一篇写了DayNightLoading的代码流程及关键类,今天周末好好分析一下其中computeRender(float renderProgress)与draw(Canvas canvas, Rect bounds)具体的计算过程,如果大家还有印象话,在AnimatorUpdateListener中调用的顺序是先计算Render即computeRender再调用的invalidateSelf,其实其中时由render来计算太阳、月亮、星星的位置的。这里有个小tips,这种动画过程分析,可以拆成每一小部分的变化,通过注释和打开注释各个部分,查看各部分的作用,逐一分析。
太阳上升----computeRender计算过程分析
首先来看太阳最开始升起的过程:
//太阳升起的过程
if (renderProgress <= SUN_RISE_DURATION_OFFSET) {
//获取当前升起的位置,sunRiseProgress从0-1变化。
float sunRiseProgress = renderProgress / SUN_RISE_DURATION_OFFSET;
//这里计算当前太阳应该绘制的高度 采用初始高度mInitSun$MoonCoordinateY - 最大高度mMaxSun$MoonRiseDistance*插值器
mSunCoordinateY = mInitSun$MoonCoordinateY - mMaxSun$MoonRiseDistance * MATERIAL_INTERPOLATOR.getInterpolation(sunRiseProgress);
//当前月亮的高度不变,还没有升起来,还在最下面
mMoonCoordinateY = mInitSun$MoonCoordinateY;
//标记月亮还没有升起来
mShowStar = false;
}
太阳上升----draw实现过程分析
if (mSunCoordinateY < mInitSun$MoonCoordinateY) {
canvas.drawCircle(arcBounds.centerX(), mSunCoordinateY, mSun$MoonRadius, mPaint);
}
太阳高度小于初始高度就画圆。我这里有一点不明白arcBounds.centerX()这里的arcBounds是draw(canvas,bounds)中传过来的bounds,这个draw方法在loadingDrawable中调用的:
@Override
public void draw(Canvas canvas) {
Rect a = getBounds();
mLoadingRender.draw(canvas, a);
}
** 但是Drawable的内部变量mBounds不知道什么时候赋值的,即不知道什么时候调用的setBounds(),调试的时候发现调用了setBounds(),但不知道什么调用的**,知道的大神评论区说一下。
太阳辐射光芒----computeRender计算过程分析
同样是用过预先设置好的节点来作为判断点计算,已经上升了,但是还没开始旋转,即辐射光芒的时间段:
if (renderProgress <= SUN_ROTATE_DURATION_OFFSET && renderProgress > SUN_RISE_DURATION_OFFSET) {
//0-1之间的表征过程的变量
float sunRotateProgress = (renderProgress - SUN_RISE_DURATION_OFFSET) / (SUN_ROTATE_DURATION_OFFSET - SUN_RISE_DURATION_OFFSET);
//0-120的角度变量
mSunRayRotation = sunRotateProgress * MAX_SUN_ROTATE_DEGREE;
//角度变量除以光线之间的角度得到当前辐射出来的个数
if ((int) (mSunRayRotation / SUN_RAY_INTERVAL_DEGREE) <= MAX_SUN_RAY_COUNT) {
mIsExpandSunRay = true;
mSunRayCount = (int) (mSunRayRotation / SUN_RAY_INTERVAL_DEGREE);
}
//剩余的旋转角度来计算 光线数目 等下结合draw来看
if ((int) ((MAX_SUN_ROTATE_DEGREE - mSunRayRotation) / SUN_RAY_INTERVAL_DEGREE) <= MAX_SUN_RAY_COUNT) {
mIsExpandSunRay = false;
mSunRayCount = (int) ((MAX_SUN_ROTATE_DEGREE - mSunRayRotation) / SUN_RAY_INTERVAL_DEGREE);
}
}
太阳辐射光芒----draw实现过程分析
draw过程只要关注下面的代码就可以了:
//绘制太阳光芒的个数
for (int i = 0; i < mSunRayCount; i++) {
int sunRaySaveCount = canvas.save();
//rotate 45 degrees can change the direction of 0 degrees to 1:30 clock
//-mSunRayRotation means reverse rotation
//辐射光芒的主要难点在这里,这里控制阳光的出现和消失,可以逐个删除增加参数,查看各参数作用
canvas.rotate(45 - mSunRayRotation
+ (mIsExpandSunRay ? i : MAX_SUN_RAY_COUNT - i) * DEGREE_360 / MAX_SUN_RAY_COUNT,
arcBounds.centerX(), mSunCoordinateY);
//这里去掉了-mSunRayRotation 发现光线不能一边旋转一边消失,整个太阳不再旋转。非常值得学习。详见下图
//canvas.rotate(45
//+ (mIsExpandSunRay ? i : MAX_SUN_RAY_COUNT - i) * DEGREE_360 / MAX_SUN_RAY_COUNT,
//arcBounds.centerX(), mSunCoordinateY);
canvas.drawLine(arcBounds.centerX(), mSunRayStartCoordinateY, arcBounds.centerX(), mSunRayEndCoordinateY, mPaint);
canvas.restoreToCount(sunRaySaveCount);
}
其中mIsExpandSunRay用来控制光线的逐渐增加和逐渐消失,通过三目运算实现。
去掉-mSunRayRotation后.gif
星星部分----computeRender
//星星上升,并闪烁
if (renderProgress <= STAR_DECREASE_START_DURATION_OFFSET && renderProgress > STAR_RISE_START_DURATION_OFFSET) {
//又是一个0-1之间的变量,可以看出整个动画分解后,每个小部分也是0-1之间变化的
float starProgress = (renderProgress - STAR_RISE_START_DURATION_OFFSET) / (STAR_DECREASE_START_DURATION_OFFSET - STAR_RISE_START_DURATION_OFFSET);
//星星上升的过程节点分别比较。
if (starProgress <= STAR_RISE_PROGRESS_OFFSET) {
//循环初始化,每个星星的位置变量
for (int i = 0; i < mStarHolders.size(); i++) {
StarHolder starHolder = mStarHolders.get(i);
//这里的y值,只是通过插值器计算的,感兴趣可以自己去改变调试一下效果。
starHolder.mCurrentPoint.y = starHolder.mPoint.y - (1.0f - starHolder.mInterpolator.getInterpolation(starProgress * 5.0f)) * (mMaxStarOffsets * 0.65f);
//x则是函数initStarHolders初始化调用时传值进去的。
starHolder.mCurrentPoint.x = starHolder.mPoint.x;
}
}
//这里就是星星闪烁 的 关键了!
if (starProgress > STAR_RISE_PROGRESS_OFFSET && starProgress < STAR_DECREASE_PROGRESS_OFFSET) {
for (int i = 0; i < mStarHolders.size(); i++) {
StarHolder starHolder = mStarHolders.get(i);
if (starHolder.mFlashOffset < starProgress && starProgress < starHolder.mFlashOffset + STAR_FLASH_PROGRESS_PERCENTAGE) {
//通过改变alpha值来实现闪烁效果,mFlashOffset是初始化设置的,星星当前亮还是灭,看插值器(慢进快出)的值
starHolder.mAlpha = (int) (MAX_ALPHA * MATERIAL_INTERPOLATOR.getInterpolation(
Math.abs(starProgress - (starHolder.mFlashOffset + STAR_FLASH_PROGRESS_PERCENTAGE / 2.0f)) / (STAR_FLASH_PROGRESS_PERCENTAGE / 2.0f)));
}
}
}
//星星下降了
if (starProgress >= STAR_DECREASE_PROGRESS_OFFSET) {
for (int i = 0; i < mStarHolders.size(); i++) {
StarHolder starHolder = mStarHolders.get(i);
starHolder.mCurrentPoint.y = starHolder.mPoint.y + starHolder.mInterpolator.getInterpolation((starProgress - STAR_DECREASE_PROGRESS_OFFSET) * 5.0f) * mMaxStarOffsets;
starHolder.mCurrentPoint.x = starHolder.mPoint.x;
}
}
mShowStar = true;
}
星星draw部分实现
这部分就比较简单了,没什么好说的,按照进度直接绘制就可以了,通过改变StarHolder的属性来执行。
if (mShowStar) {
if (mStarHolders.isEmpty()) {
initStarHolders(arcBounds);
}
for (int i = 0; i < mStarHolders.size(); i++) {
mPaint.setStyle(Paint.Style.FILL);
mPaint.setAlpha(mStarHolders.get(i).mAlpha);
canvas.drawCircle(mStarHolders.get(i).mCurrentPoint.x, mStarHolders.get(i).mCurrentPoint.y, mStarRadius, mPaint);
}
}
下一篇介绍一些JavaWeb开发中基本知识。敬请期待。
android 星星流逝动画,Android Loading动画分析--续集相关推荐
- Android 花里胡哨的加载Loading动画
记录查找了一些实用的加载动画,真的是花里胡哨!!! 1. AVLoadingIndicatorView-master AVLoadingIndicatorView各种加载效果,适合做加载loading ...
- android刷新时的圆形动画_【Android UI】自定义圆形Loading动画
1.创建环形loading图片 android:fromDegrees="0" android:toDegrees="360" android:pivotX=& ...
- android实现加载等待动画,【Android 基础】Progressbar 实现Loading动画
image.png Progressbar 实现Loading动画 网络加载,播放视频 loading 时候界面会显示 转圈 等待提示动画,使用Android 自带的Progressbar 即可实现, ...
- android 星星流逝动画,Android仿开心消消乐大树星星无限循环效果
啥都不说先上效果图,这个是我项目里的效果: 下面的是我抽取出来的 demo 适配啥的我基本上都做好了没做其他的 ok 下面 说一下思路把 首先 说一下原理 我是使用bitmap 创建两张图 一开始的时 ...
- Android 自定义操作成功的loading动画
1.res---->values文件夹下添加文件attrs.xml详情如下: <?xml version="1.0" encoding="utf-8" ...
- android 动画设计,Android loading动画设计分析
Android loading动画设计分析 时间:2017-04-20 来源:Android开发学习网 android6.0上有了很炫酷的开机动画,实现原理是什么呢?今天我们就从Loading ...
- android录音波浪动画_Android实现炫酷的波浪下载Loading动画
1. 简介和效果分析 一直都觉得有很多loading动画挺炫酷的,然后自己看过一些之后也想实现一个,加强一下对绘制view的练习,能力有限,很多地方的实现的有欠考虑和逻辑优化,不管怎么样画了两天还是把 ...
- Android ProgressBar 加载中界面实现(loading 动画) 实现菊花的效果
实现的效果图如下: 使用方法ProgressBar ,如果感觉 这个动画不是自己想要的,需要根据ui的图片来实现只需要将xml中的animated-rotate 修改为animation-list 贴 ...
- android loading封装_我们经常用的Loading动画居然还有这种姿势
背景 Loading动画几乎每个Android App中都有. 一般在需要用户等待的场景,显示一个Loading动画可以让用户知道App正在加载数据,而不是程序卡死,从而给用户较好的使用体验. 同样的 ...
最新文章
- VScode操作记录
- ExtJs xtype一览
- 查看linux mysql 账户权限设置_Linux下mysql新建账号及权限设置各种方式总结
- hystrix 全局熔断_跟我学Spring Cloud(Finchley版)14Feign使用Hystrix
- git merge用法_Git 基本命令 merge 和 rebase,你真的了解吗?
- 常用排序算法的Java实现 - 1
- 水箱建模最小二乘法_北师大版小学数学下册五年级第四单元长方体(二)整理复习电子课本练习同步教学视频...
- string wstring
- SQL那些事儿(十)--oracle主键、唯一键与索引
- 汇编语言(十二)颜色搭配显示+BIOS功能调用表+INT 10H功能详细列表
- 08-搭建Rest服务 - 04权限管理
- C++实现简单数独游戏
- Kaggle比赛心得
- 【微信小程序】-- WXML 模板语法 - 数据绑定(九)
- linux内核期中总结
- java android时间工具类 week 月年
- RFID隧道安全管理方案
- 一意孤行亚马逊----一个钓鱼疯子的巴西亚马逊之行( 12.九月 28日 在营地的最后一天 ) 作者:咸水鱼...
- 博弈论(1)例题:纳什均衡 (投票还是不投票/合资问题/n 个企业的古诺模型)博弈论导论 Steven Tadelis - Game Theory. An Introduction
- 计算机网络应用智能家居,计算机智能化网络应用研究
热门文章
- pandas使用pd.concat纵向合并多个dataframe实战:纵向合并(ignore_index参数)、为纵向合并的多个dataframe设置标识符指定数据来源(通过字典方式设置数据来源键)
- R语言伪相关性分析(Spurious Correlation)、相关关系不是因果关系:以哺乳动物数据集msleep为例
- R语言ggplot2可视化条形图可视化控制底部和x轴之间没有空格实战:即条形图的底部直接和坐标轴连接
- R语言ggplot2可视化移除图例中的a字符实战
- R语言distCosine函数计算大圆距离实战(Law of Cosines Great Circle Distance)
- java calendar去掉时分秒_java 8:只取年月日的java.util.Date(时分秒清零)对象
- 怎样训练左右手协调_2019中考体育训练计划
- Java多态性Polymorphic
- 改变jupyter notebook的主题背景颜色
- 3.对角线遍历(LeetCode第498题)