twitter点赞图标分析
来源:互联网 发布:Ubuntu grub引导 编辑:程序博客网 时间:2024/05/22 08:49
目录:[top]
图标
玩过twitter的同学都知道点赞的时候会有一个动态的爱心的变化。如下图:
其步骤如下:
因此,我们把其步骤变成三步:初始灰色爱心—>点赞同心圆动画播放—>红色爱心静态图—>再次赞变成灰色爱心
技术选择:H5的canvas绘图+javascript的事件监听+setTimeout
画爱心
知识提要:
arc画圆的时候需要注意:
1,(centerX[圆心横坐标,以父节点的右上角为坐标原点,向左向下建立坐标轴],centerY,r[半径], startAngle[起始点的角度。起始以(1,0)表示0,(0,1)表示3/2*PI计算。当设置为逆时针的时候画出来是起点到终点之间的扇形出去中心三角], endAngle,anticlockwise(是否逆时针))
如下图。
此原理可以用来切图
2,这个爱心。可以分为上下两部。上面的一半是两个相交的小圆,下面一半是两个相交的大圆。圆的具体形式请看如下代码
function love(color,centerX,centerY,size){ ctx.beginPath(); //上半部 var smallRadius=Math.round(centerX/size);//小圆的半径 var smallMoveLen=smallRadius*Math.sqrt(3)/2; ctx.fillStyle=color||"red"; ctx.arc(centerX-smallMoveLen,centerY,smallRadius,Math.PI*7/4,Math.PI,true); ctx.arc(centerX+smallMoveLen,centerY,smallRadius,0,Math.PI*5/4,true); //下半部 var bigRadius=smallRadius*2.73; ctx.arc(centerX+smallMoveLen,centerY,bigRadius,Math.PI,Math.PI*0.6,true); ctx.arc(centerX-smallMoveLen,centerY,bigRadius,Math.PI*0.4,0,true); ctx.fill(); ctx.closePath(); }
封装一个爱心的图片,可以为其自定义颜色color,中心坐标center,大小size(size约大其越小,作为除数)
初始灰色爱心
love("grey",centerX,centerY,8);//这里设置的圆心大小为8分之一
注册监听
canvas.addEventListener("click",animationFunction(),false);
冒泡
判断当前操作
判断是取消赞还是点赞
if(ctx.fillStyle=="#808080"){//表示为灰色//执行下面的动画}else if(ctx.fillStyle=="#ff0000"){//表示为红色 ctx.fillStyle="#ff0000"; love("#808080",centerX,centerY,8); }
一圈一圈的同心圆
setTimeout(function () { ctx.beginPath();//不能和前面的图形混在一起了 ctx.fillStyle="#FF6BDB"; ctx.arc(centerX,centerY,smallRadius,0,2*Math.PI,false); ctx.fill(); ctx.closePath();//必须要提笔。不然和前面一只笔相当于没提起来 },100);
爱心冒出
setTimeout(function () { ctx.clearRect(0,0,centerX*2,centerY*2); ctx.beginPath(); ctx.fillStyle="#FF84A6"; ctx.arc(centerX,centerY,bigRadius,0,2*Math.PI,false); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.fillStyle="#ffffff"; ctx.arc(centerX,centerY,midRadius*2,0,2*Math.PI,false); ctx.fill(); ctx.closePath(); ctx.beginPath(); love("purple",centerX,centerY,16); ctx.closePath(); },400);
四周的小气泡
setTimeout(function () { ctx.clearRect(0,0,centerX*2,centerY*2); var e=bigRadius/(Math.sqrt(2)); var centerXArr=[centerX-bigRadius,centerX-e,centerX,centerX+e,centerX+bigRadius,centerX+e,centerX,centerX-e]; var centerYArr=[centerY,centerY-e,centerY-bigRadius,centerY-e,centerY,centerY+e,centerY+bigRadius,centerY+e];//两个数组,存放这四周八个气泡的横纵坐标 for(var i=0;i<8;i++){ ctx.beginPath(); ctx.fillStyle="blue"; ctx.arc(centerXArr[i],centerYArr[i],smallRadius/4,0,2*Math.PI,false); ctx.fill(); ctx.closePath(); } ctx.fillStyle="#ff0000"; love("ff0000",centerX,centerY,8);//red },500);
变成红色爱心
ctx.clearRect(0,0,centerX*2,centerY*2);//这里要清除之前的图形,避免干扰ctx.beginPath();//love("ff0000",centerX,centerY,8);ctx.closePath();
总结改进
1,arc的几个参数的使用
2,ctx.beginPath()/closePath()的目的。防止不提笔导致比划混乱(画同心圆的时候反而可以利用这一点来简化同心圆)
3,clearRect的用法
4,画图之前对每个角度长度的计算
5,流式布局。当需要缩小图片的时候只需要改变其width和height。其他的长度等度量均使用百分比或角度
6,兼容性代码如事件监听等
需要下载完整代码,请 转到我的git上fork下来。
https://github.com/zyd317/demo-funny/blob/master/twitterLove.html
- twitter点赞图标分析
- Twitter Boostrap 矢量图标
- twitter-mysql改进点
- 图片帧实现Twitter上的点赞动画
- Android自定义控件——点赞效果(仿Twitter)
- Twitter系统结构分析
- Twitter开源库Twemcache分析
- twitter系统架构分析
- 深度分析Twitter Heron
- 解剖Twitter:Twitter系统结构分析
- 解剖Twitter:Twitter系统架构设计分析
- 解剖Twitter:Twitter系统架构设计分析
- 解剖Twitter:Twitter系统架构设计分析
- Twitter触及流行引爆点
- [转]Twitter系统结构分析
- Twitter下一个web2.0的引爆点
- Twitter研发人员John Oskasson分析Twitter后台软件栈
- 稀世珍宝:270款圆滑的 Twitter Boostrap 矢量图标
- adapter数据呈现
- 纯QML实现画图工具
- Nginx+Tomcat负载均衡配置
- ReLU的起源
- Android 横向选择器(HorizontalPickerView.java)
- twitter点赞图标分析
- MTK keypad driver
- JS操作JSON总结
- CUDA之矩阵乘法——globalmemory
- SPSS——基本的统计概念
- SkyForm CMP容器化实践
- UVA 201
- 程序员眼中的古典名画
- [BZOJ2819]Nim(树链剖分)