android 水浮动的动画,Android实现支付宝蚂蚁森林水滴浮动效果
可以有多个水滴,可以控制位置,水滴上下浮动。点击水滴产生搜集动画,水滴向树移动并逐渐消失,如图:
那么是如何实现的呢,下面我们一步步来分析:
1、定义一个继承Relativelayout 的子类作为容器放置多个水滴并在Onlayout()中设置子控件的位置
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
final int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
if (child.getVisibility() != GONE) {
child.layout(listX.get(i), listY.get(i), childWidth + listX.get(i), childHeight + listY.get(i));
}
}
}
上面代码最重要的就是child.layout()函数,前两个参数为子控件的位置,这我先去盗个图:
如图,前两个参数分别为getLeft 和getTop,后两个参数分别为getRight和getBottom;前两个参数其实是我们重外界传进来的子坐标列表,代码如下:
List listX = new ArrayList<>();
List listY = new ArrayList<>();
public void setChildPosition(int posx, int posy) {
listX.add(posx);
listY.add(posy);
}
对于后面两个参数我们需要先获取子控件的宽高;然后在叠加上前面两个参数就是我们需要的坐标,在上面代码中可以看到我们是通过child.getmeasure来获取的宽高,但在获取宽高之前我们还需要去测量子空间的宽高。这个测量需要在measure()中完成:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
measureChildren(widthMeasureSpec, heightMeasureSpec);
}
至此,我们的父容器已经设计完成,接下来我们需要自己定义子控件以及子控件的动画,首先是一个浮动的动画,因为我们这里后面需要监听点击动作,所以最好使用属性动画完成,如下:
private void doRepeatAnim() {
ObjectAnimator animator = ObjectAnimator.ofFloat(this, "translationY", -padding, padding, -padding);
animator.setRepeatMode(ObjectAnimator.REVERSE);
animator.setRepeatCount(ObjectAnimator.INFINITE);
animator.setDuration(1500);
animator.start();
}
就是让其沿Y轴上下移动,设置为INFINTE则为无限重复动画;第二个动画就是我们点击的时候,子控件会移动到某个特定的位置并逐渐消失:
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
doSetAnim();
}
});
private void doSetAnim() {
if (isCollect) return;
isCollect = true;
ObjectAnimator move1 = ObjectAnimator.ofFloat(this, "translationX", startWidth, endWidth);
ObjectAnimator move2 = ObjectAnimator.ofFloat(this, "translationY", startHeight, endHeight);
ObjectAnimator move3 = ObjectAnimator.ofFloat(this, "alpha", 1, 0);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(move1, move2, move3);
animatorSet.setDuration(1500);
animatorSet.start();
}
里面我添加了isCollect 判断,用于处理点击事件重复生效的问题,这里是一个动画组合,重当前位置移动到特定位置同时透明度也不断的变淡。写动画的时候特别应该注意一个问题就是当前的所有位置都不是外面传进来的位置而是以当前控件初始位置为参考的相对位置,因为我们在父控件的时候就设定好了子控件的位置,不能再次进行重复设定不然会叠加,所以上面的startwidth 和startHeight其实都是0,endWidth 和endHeight也是结束位置减去控件移动的初始位置:
/**
* @param context
*/
public WaterView(Context context) {
super(context);
this.context = context;
endWidth = (int) DeviceUtils.dpToPixel(context, 160);
endHeight = (int) DeviceUtils.dpToPixel(context, 300);
padding = (int) DeviceUtils.dpToPixel(context, 10);
startWidth = 0;
startHeight = 0;
}
/**
* @param index
* @param startWidth 开始坐标 X
* @param startHeight 开始坐标 Y
*/
public void setPosition(int index, int startWidth, int startHeight) {
this.index = index;
endWidth = endWidth - startWidth;
endHeight = endHeight - startHeight;
}
,在设置动画之前,我们还缺少初始化控件的步骤,这个步骤就是绘制背景控件,这个过程在ondraw()方法中进行:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mMWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(getResources().getColor(R.color.color_87d1ab));
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(mMWidth / 2, (float) mHeight / 2, DeviceUtils.dpToPixel(context, 30), mPaint);
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextSize(DeviceUtils.dpToPixel(context, 30));
mTextPaint.setColor(getResources().getColor(R.color.text_color_fc));
mTextPaint.setStyle(Paint.Style.FILL);
float width = mTextPaint.measureText(text);
canvas.drawText(text, mMWidth / 2 - width / 2, (float) mHeight * 0.65f, mTextPaint);
doRepeatAnim();
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
doSetAnim();
}
});
}
如上,我绘制了一个纯色的园和特定的文字。当子控件绘制完成后才进行的动画。
最后就是如何使用我们刚才做好了轮子啦,请看代码:
@Override
protected void onStart() {
super.onStart();
int posx = (int) DeviceUtils.dpToPixel(this, 70);
int posy = (int) DeviceUtils.dpToPixel(this, 70);
addChildView(this, relative, 1, posx, posy);
addChildView(this, relative, 2, 2 * posx, 2 * posy);
addChildView(this, relative, 3, 3 * posx, posy);
}
/**
* 添加子水滴
*
* @param relative
* @param index 第几个
* @param posx 子控件初始位置x
* @param posy 子控件初始位置y
*/
private void addChildView(final Context context, final WaterContainer relative, final int index, final int posx, final int posy) {
relative.postDelayed(new Runnable() {
@Override
public void run() {
int width = (int) DeviceUtils.dpToPixel(context, 60);
int height = (int) DeviceUtils.dpToPixel(context, 60);
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(width, height);
WaterView waterView = new WaterView(context);
waterView.setPosition(index, posx, posy);
waterView.setLayoutParams(layoutParams);
relative.setChildPosition(posx, posy);
relative.addView(waterView);
}
}, (index - 1) * 300);
}
在添加代码里面,我添加了一个延时,这样每个添加的子水滴就会不同步的上下跳动,看起来更为真实,如果你有更好的办法请一定记得告诉我,上面的代码就是通过LayoutParams先设定子控件的布局,再把子控件添加到父容器中去。可以实现重复调用,就是这么简单。
最后给出项目的github地址:链接地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
android 水浮动的动画,Android实现支付宝蚂蚁森林水滴浮动效果相关推荐
- 仿支付宝蚂蚁森林水滴浮动效果
可以有多个水滴,可以控制位置,水滴上下浮动.点击水滴产生搜集动画,水滴向树移动并逐渐消失,如图: 那么是如何实现的呢,下面我们一步步来分析: 1.定义一个继承Relativelayout 的子类作为容 ...
- android 水波纹扩散动画,[Android]多层波纹扩散动画——自定义View绘制
之前整理过一些属性动画的基本操作,这一段时间的动画相关需求都安然度过了.直到这次-- 一.另一种动画需求 多数交互中的动画都是让单个页面元素动起来,这种就很适合用属性动画实现.但是对于 多个元素.非页 ...
- html5仿蚂蚁森林效果代码,vue仿支付宝蚂蚁森林水滴
APP 需要做一个类似蚂蚁森林的功能模块,动效和蚂蚁森林接近,可以有多个水滴,可以控制位置,水滴上下浮动. gif图如下所示: soogif.gif v-for="(item, index) ...
- Android 仿支付宝蚂蚁森林动画效果
Android 动画可以归纳为以下几种: 视图动画(View 动画) 帧动画(Frame 动画.Drawable 动画) 属性动画 触摸反馈动画(Ripple Effect) 揭露动画(Reveal ...
- 老司机带你顺手撸一个支付宝蚂蚁森林效果
老司机,不存在的,其实我还算不上,哈哈... 最近公司产品突然有一个类似支付宝蚂蚁森林的功能,大致功能跟支付宝蚂蚁森林相像,在看了一下支付宝蚂蚁森林的效果之后,本来这种东西用RN实现是最好不过的,不过 ...
- php蚂蚁森林的效果,iOS仿支付宝蚂蚁森林动画效果
最近要用到类似支付宝蚂蚁森林的动画效果,所以就简单写了一个比较简单的一个demo,效果图如下: 效果图1 需求: 在这个view上面随机出现n个黄钻(button),黄钻按钮还得上下抖动,箭头1指向的 ...
- 【Appium】Python+Appium实现支付宝蚂蚁森林自动收取能量的一种解决方案
代码有更新,适配新版支付宝,参见最新文章: [Appium][更新]Python+Appium实现支付宝蚂蚁森林自动收取能量 一.环境准备 首先,你需要一个能够运行代码的环境,这里包括: Node.j ...
- python支付宝蚂蚁森林_Python数据可视化-支付宝蚂蚁森林能量收取记录
支付宝蚂蚁森林模块最早从2016年推出,题主最开始从支付宝集福活动开始接触.期间懒懒散散收过一些能量,但是相比朋友圈动辄几十几百公斤的能量值,我的能量值只有20Kg,想种棵胡杨连零头都不够.所以,本着 ...
- 【Appium】【更新】Python+Appium实现支付宝蚂蚁森林自动收取能量
一.前期准备 环境准备和以前的脚本可以参见之前的文章[Appium]Python+Appium实现支付宝蚂蚁森林自动收取能量的一种解决方案 二.更新内容 新版的支付宝APP更新了遍历蚂蚁森林好友列表的 ...
最新文章
- heritrix 3.2.0 -- 环境搭建
- Python爬虫开发:opener的使用案例
- 打开c语言运行不了_C语言——菜鸟和大神的分水岭:内存、线程、进程
- java读取打包时间_Java获取响应的日期时间,这样写是否合理?
- python pip安装+easy_install
- 品优购案例之横向列表伪元素的应用
- oracle 取awr报告,Oracle生成awr报告
- 英雄联盟android,安卓ARPG佳作 《英雄联盟(League of Heroes)》
- 车道线检测预处理(1)------ 融合白线黄线+高斯
- hp计算机如何重装win7,惠普笔记本重装Win7系统过程详解
- MDClub一个漂亮轻量的开源论坛系统
- 汉客儿2019支付宝加密红包设计思路
- iOS资源帖-优秀博客、iOS开发技术文、学习网站
- Java虚拟机:Java虚拟机结构
- uml建模工具 支持php,【UML 建模】在线UML建模工具 ProcessOn 使用详解
- SVN历史版本比较报错:Bad URL passed to RA layer
- linux远程文件拷贝方式,linux远程拷贝文件
- artifactory-pro7 部署以及ladp、nginx配置
- 首个富士康商贸综合体落子乐山
- ping++接入企业付款
热门文章
- 中国邮政储蓄银行总行2023信息科技招聘考试【暑期实习】
- MySQL联合索引or_MySQL联合索引命中条件
- kotlin 对话框_Kotlin教程中的android警报对话框
- BEV(一)---lift splat shoot
- 智能音箱是不是依赖服务器,智能音箱与普通音箱有什么区别 购买智能音箱注意事项有哪些...
- 云闪付支付出现授权用户与登录用户不匹配的问题
- 基于python的压测工具_基于Python和SIPp的自动化压力测试系统设计和实现
- 为什么选择Python作为编程入门语言
- 2018腾讯全球合作伙伴大会将启 企鹅号三大看点引关注
- 《代码精进之路:从码农到工匠》——抽象