史上最全的贝塞尔曲线(Bezier)全解(三):贝塞尔曲线实现满屏爱心
这一篇文章会完整的介绍如何通过贝塞尔曲线实现爱心点赞的效果,如果实在看不懂,可以看第一篇贝塞尔曲线的简介,还有第二篇安卓中的简单使用;
好了,终于到了放大招的时候了,真实憋了很久了
先做一些准备工作,绘制各种颜色的红心:
private Bitmap creatHeart(int color) {int width = bitmap.getWidth();int height = bitmap.getHeight();Bitmap newBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(newBitmap);canvas.drawBitmap(bitmap, 0, 0, criPaint);canvas.drawColor(color, PorterDuff.Mode.SRC_ATOP);canvas.setBitmap(null);return newBitmap;
这里面比较关键的代码只有是 canvas.drawColor(color, PorterDuff.Mode.SRC_ATOP),关于PorterDuff,还是可以去学习了解一下的,很多时候还是很有用的,在这里简单的介绍一下;
这样就比较清晰明了了吧,这里使用的就是SRC_ATOP,去心的图形和颜色重叠部分,就是心了;
这样只要准备一个心形图片,就能实现格式各样的心了;
接下来就是进行根据轨迹进行绘制了,看过第一篇文章的,就应该根据几个点,就能绘制出来一条轨迹;这里使用属性动画,来获取相对应的轨迹;
首先
/*** 绘制一个增值器*/class TypeE implements TypeEvaluator<PointF> {private PointF pointFFirst,pointFSecond;public TypeE(PointF start,PointF end){this.pointFFirst =start;this.pointFSecond = end;}@Overridepublic PointF evaluate(float fraction, PointF startValue, PointF endValue) {PointF result = new PointF();float left = 1 - fraction;result.x = (float) (startValue.x*Math.pow(left,3)+3*pointFFirst.x*Math.pow(left,2)*fraction+3*pointFSecond.x*Math.pow(fraction, 2)*left+endValue.x*Math.pow(fraction,3));result.y= (float) (startValue.y*Math.pow(left,3)+3*pointFFirst.y*Math.pow(left,2)*fraction+3*pointFSecond.y*Math.pow(fraction, 2)*left+endValue.y*Math.pow(fraction,3));return result;}}
这个很简单,就是单纯的使用公式了,所以说想要绘制复杂的轨迹,我还是要重新拾起来被扔进粪坑的小学数学课本重新看看,当真是熏得泪流满面啊!!
接下来就很简单了,只要不停使用属性动画,不断变换位置就好了;
private void moveHeart(final ImageView view){PointF pointFFirst = this.pointFFirst;PointF pointFSecond = this.pointFSecond;PointF pointFStart = this.pointFStart;PointF pointFEnd = this.pointFEnd;ValueAnimator animator = ValueAnimator.ofObject(new TypeE(pointFFirst, pointFSecond), pointFStart, pointFEnd);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {PointF value = (PointF) animation.getAnimatedValue();view.setX(value.x);view.setY(value.y);}});animator.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);AdvancePathView.this.removeView(view);}});ObjectAnimator af = ObjectAnimator.ofFloat(view, "alpha", 1f, 0);af.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);AdvancePathView.this.removeView(view);}});AnimatorSet set = new AnimatorSet();set.setDuration(3000);set.play(animator).with(af);set.start();}
就是这么简单,完全没有难度啊有木有!!!
总的来说还是三步:
第一
- :绘制各种颜色的心
- 绘制一个增值器,获取轨迹
- 使用属性动画,根据轨迹移动位置
好了,到这里我这一系列的文章就结束了,两天水时间搞的,感觉稍微有点水,但是就这样啦,毕竟本身不是很难的东西,有什么问题可以问我,有时间一定会耐心解答的;
最后附上源码:https://github.com/sangxiaonian/BezierIntroduce.git
史上最全的贝塞尔曲线(Bezier)全解(三):贝塞尔曲线实现满屏爱心相关推荐
- 史上最全的贝塞尔曲线(Bezier)全解(一):初识贝塞尔曲线
作为一个有只志向的码农,除了知道一些基本的知识够自己努力搬砖以外,还应该get一些更炫酷的技能,用更优雅的姿势进行搬砖;想要实现一些十分炫酷的效果,贝塞尔曲线就必须进行一些研究了; 最近一段时间, ...
- 史上最小白之CNN 以及 TextCNN详解
本小白是一名立志从事NLP的菜鸟,本来只准备写一篇TextCNN来加深自己理解地,但想要了解TextCNN那必然需要了解CNN的原理,写的过程中突然想起了自己在学习时各种看博客的心路历程,看一篇博客要 ...
- html贝塞尔曲线爱心,史上最全的贝塞尔曲线(Bezier)全解(三):贝塞尔曲线实现满屏爱心...
这一篇文章会完整的介绍如何通过贝塞尔曲线实现爱心点赞的效果,如果实在看不懂,可以看第一篇贝塞尔曲线的简介,还有第二篇安卓中的简单使用; 好了,终于到了放大招的时候了,真实憋了很久了 这里写图片描述 先 ...
- 史上最强!机器学习领域最全综述列表来啦!
点击上方,选择星标或置顶,不定期资源大放送! 阅读大概需要15分钟 Follow小博主,每天更新前沿干货 作者:kaiyuan,来源:NewBeeNLP 继续来给大家分享github上的干货,一个『机 ...
- 霸气C语言程序,史上最霸气毕业寄语:全是编程语言
南航计算机学院辅导员用C语言给学生写寄语 看着左边这张图片上的文字,你想到了什么?可不要以为这是一个单纯的程序,它可是南京航空航天大学计算机科学与技术学院08级辅导员袁琪给毕业生的寄语.因为方式特别, ...
- 学计算机怎么说霸气,史上最霸气毕业寄语,全是编程语言
龙虎网讯 看着左边这张图片上的文字,你想到了什么刹灰晕馐且桓龅ゴ康某绦颍墒悄暇┖娇蘸教齑笱Ъ扑慊蒲в爰际跹г�08级辅导员袁琪给毕业生的寄语.因为方式特别,收到寄语的毕业生们大呼" ...
- 可能是史上最详细-Faster RCNN Pytorch 复现全纪录
向AI转型的程序员都关注了这个号
- 一文看懂:史上最通俗的视频编码技术详解
1.引言 如今我们所处的时代,是移动互联网时代,也可以说是视频时代.从快播到抖音,从"三生三世"到"延禧攻略",我们的生活,被越来越多的视频元素所影响. 而这一 ...
- 史上最经典垃圾回收器(CMS,G1)详解、适用场景及特点、使用命令
文章目录 垃圾收集器介绍总结 各个垃圾收集器之间的关系 垃圾收集器使用命令及默认值 详解各个垃圾收集器 Serial ParNew Parallel Scavenge Serial Old Paral ...
- mfc绘制bezier b样条三种曲线_生存曲线(二):SPSS和Origin绘图教程及相关问题
上期生存分析推送后,有粉丝在后台问:有发生率的情况,为什么要做生存曲线分析? 举个例子:临床试验中,共招募30位胃腺癌患者,均分为3组,分别使用了A/B/C三套不同的治疗方案,治疗期为2年.2年后统计 ...
最新文章
- OC学习7——类别、扩展和协议
- idea中如何创建接口
- c++控制台应用每一列数据如何对齐_懂Excel就能轻松入门Python数据分析包pandas(十六):合并数据...
- apollo java客户端_携程配置中心Apollo的Java客户端API的使用
- 专访iQOO Pro产品经理:以更好的产品 更低的价格推进5G生态普及
- c++报错:引用了未定义标签_大牛带你解读Spring源码,编写自定义标签,您能学会吗?...
- 一文了解下对小微风控策略的优雅调整
- 算法导论答案(第一章)
- linux——makefile编写
- hsql mysql_HSQL简介
- 英特尔核显自定义分辨率_让图像更精彩 英特尔核显如何设置
- 大学,不是学习的终点,而是起点。
- 不同Normalization之间的比较
- 同比,环比,年累计值算法
- 通过CSS实现太极图案例
- _032_rationalRose_包图的画法
- MySQL中ESCAPE关键字的用法详解
- Mac 端口号8080被占用
- 记住c0000005 Access Violation 崩溃
- 政策频出 | 明确应用商店职责,聚焦个人信息保护
热门文章
- 太原计算机专业学校在哪里,太原信息技术学校在哪里
- java 微博发布时间_java 对新浪微博微博的发表时间解析
- GRE词汇乱序版-夹生的词汇1
- Windows7不停弹出计算机界面,拨号连接自动弹出,教您如何解决电脑总是自动弹出...
- 阿里倡导成立“罗汉堂”, 6名诺贝尔奖得主加入
- 牛客网--23803--DongDong认亲戚
- 谷歌翻译api_解救科研民工!史上最强大的翻译神器,助你日读10篇不是梦~~
- 从“不认识”到“认识” 贫困户周风莲的笑声多了
- dp和px,那些不得不吐槽的故事——Android平台图片文字元素单位浅析
- .grf 读入报表模板失败,请检查网络连接、URL及读取权限,错误提示:网络服务器响应不成功