贝塞尔曲线+属性动画实现海底上升气泡的效果

因为新的项目中要实现海底上升气泡的效果当做手机下半面的背景,需要气泡随机大小随机位置移动。说是随机移动,但是终点要控制所有的气泡都要回归到终点位置X轴的中点。所以我选择了用二阶的贝塞尔曲线和属性动画来实现。先看下效果。



背景图

因为背景图选择的是深色图,所以效果有些不明显。大家将就着看。

在实现这个效果之前,公司的动效设计师说气泡是三种气泡,分别有不同的颜色以及阴影边缘,所以他给我们提供气泡的素材。这也就省去了画气泡的时间。

首先我们在自定义view中添加了十一个不同的气泡图片,并且我又实例了一个集合用来存放LayoutParams,用来实现气泡的不同大小。

private ValueAnimator getBezierValueAnimator(final View target) {

 // 初始化贝塞尔估值器 //随机产生两个点,以确定一条3阶贝塞尔

曲线 BezierEvaluator evaluator = new BezierEvaluator(getPointF(), getPointF());

ValueAnimator animator= ValueAnimator.ofObject(evaluator, new PointF(random.nextInt(1000), 1000), new PointF(random.nextInt(500)+300, 0)); animator.setTarget(target); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override public void onAnimationUpdate(ValueAnimator valueAnimator) {

 // 这里获取到贝塞尔曲线计算出来的的x y值 赋值给view 这样就能让气泡随着曲线走啦

PointF pointF = (PointF) valueAnimator.getAnimatedValue(); target.setX(pointF.x); target.setY(pointF.y); }

});

animator.setDuration(6000); return animator;}

上面的方法是贝塞尔曲线的灵魂,我们向这个方法中添加view,然后确定控制点的位置。

二阶贝塞尔曲线还是很简单的,只需要确定三个点的位置。也就是起点,终点和两个点中间的控制点,然后根据贝塞尔估值器转化为贝塞尔的路径。那么就可以了。

从上面的方法,可以看到我们用到了属性动画,我们监听了动画的变化,然后根据每次变化将贝塞尔曲线得到的点的位置赋值给view,那么就能够让view按照贝塞尔曲线移动了。具体的移动时间可以自己控制。

private PointF getPointF() { PointF pointF = new PointF();

pointF.x = random.nextInt(ScreenUtils.getScreenWidth(mContext));

pointF.y = random.nextInt(300)+100; return pointF;}


这个方法是我们用来控制中间的控制点的。X轴上的点是在屏幕的宽度之间随机选取的。这样会实现曲线分布的很均匀。然后Y轴上的坐标,为了能够让曲线在中间位置让用户看的很随机。我特别选取了Y轴在自定义view的中间位置。这样曲线在用户的视线内会有很均匀的变化。这个点也就是二阶贝塞尔曲线的中间点位置。

public void startBallAnim() {

final ImageView imageView = new ImageView(mContext);

imageView.setBackgroundResource(mList.get(random.nextInt(mList.size())));

imageView.setLayoutParams(lp.get(random.nextInt(lp.size())));

addView(imageView);

AnimatorSet finalSet = new AnimatorSet();

ValueAnimator bezierValueAnimator = getBezierValueAnimator(imageView);

//贝塞尔曲线路径动画

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView,"alpha",random.nextFloat(),0f);

objectAnimator.setDuration(6000);

finalSet.playSequentially(bezierValueAnimator);

finalSet.setInterpolator(new LinearInterpolator());

finalSet.setTarget(imageView);

finalSet.addListener(new AnimatorListenerAdapter() {

@Override public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation); removeView((imageView));//删除气泡 }

});

finalSet.start();

objectAnimator.start();}


这个方法是在自定义view刚开始实例化就开始调用的。这样在用户进入界面的时候,就会触发气泡开始向上升起。这里还是用到了属性动画,渐变的属性动画。初衷是让气泡越往上面移动越透明,最后淡出。然后在动画结束的时候,将这个view remove掉,不然这个动画会让气泡一直一直的出来,会对内存有很大的损耗。

然后在自定义view实例化的时候调用这个开始方法。就会有源源不断的气泡从底部升上来。

有什么问题可以私聊我或者公聊 哈哈哈哈

GitHub - chenhangyuan/-view-

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 这个效果我其实是用两个自定义View实现的 -_- , 波浪是用两个不断改变的float值加画布裁剪实现的...
    二运_3694阅读 556评论 0 2
  • 【Android 动画】 动画分类补间动画(Tween动画)帧动画(Frame 动画)属性动画(Property ...
    Rtia阅读 6,095评论 1 38
  • 简书真是受不来了,引用的是我7牛上的图片,预览的时候没有问题,一发布就告诉我获取图片失败,不想管了。。。。 动画篇...
    richy_阅读 348评论 0 0
  • 红色的金鱼在墨色的云里游弋 风吹过你睫毛上的温情在细雨中 他的国 没有你 没有风雪 北国的细雨在南方的晴空里 他的...
    暖清阳阅读 185评论 0 0
  • 2014.2.28 《思春》 锦时素年,风景万千,鱼跃桥头,鸟悬青天。彼时彼刻,如梦如烟,恨生恨死,愿醉愿眠。 2...
    十三步阅读 247评论 0 2