见证花开!!码上有花

先看效果 尝试点击,IE9+

画心 清空 ... 请自由点击画布

 

创意来自于网络 可搜搜【程序员表白】

看上去像是【当耐特】的作品的加工版本



代码 当然要自己写了

能力有限,我只写我会的地方。原图中的花我实在不知道是怎么画的,于是只有自己摸索另一种画法。以下是我的想法:

花瓣 =》 花朵 =》动画

每一个花瓣,是一个很曲很曲的曲线构成,那么先思考曲线的画法。以下截图自w3school:

那么将这个曲线更曲一点试试:

完美!

接下来添加几个曲线让花瓣更生动(也是为了达到后期“生长”的效果):

我的计算公式很简单,就是照着下面这几个3角,顶角作为起始点,2个底角和顶角作为 "三次贝塞尔曲线" 的3个参数,这样花瓣就一层一层延伸下来:

原谅我的渣画图


花瓣一层一层画出来,计算坐标无非是sin和cos两个函数...相信这些难不倒各位。花朵由N个花瓣组成,花瓣之间有重叠,花瓣大小不一样,每朵花颜色不同,最后配合着“生长”这一的效果,就可以搭配出神奇的魔幻效果!



生长 点睛之笔,让图动起来。

说实话我这里懒得写的,因为以前的文章已经介绍过,我这里也只是重复一遍,摘抄过来让大家看着方便。

采用的是jq的队列函数queue,一种promise的封装

关于jQuery队列的一点认识:

众所周知,使用jQuery给元素添加一连串的动画效果,元素并不会将动画同时执行,而是按照添加的顺序,依次在上一个动画结束之后才开始下一个动画。

我了解的情况就是,jQuery使用了一种叫做“队列”(queue)的方式将动画效果依次加进去,在上一个队列中的动画执行完毕,通过deferred通知下一个动画执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
var ele = $("#id"); //某个jQuery对象
 
//为jQuery对象的叫“queueName”的队列上面添加处理事件
ele.queue("queueName", function (next) {
//your code... do something
next(); //next() 是执行下一个队列中要处理的事件,如果没有next队列就无法依次处理
});
 
//延时
ele.delay(1000, "queueName");
 
//执行队列
ele.dequeue("queueName");

这里要说一下的是,jQuery的动画默认是把处理事件放在了叫“fx”的队列中。因此,我进行了以下简单的封装:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$.fn.will = function (callback, type) {
//这里的this,表示jQuery对象
this.queue(type || "fx", function (next) { // fx 表示默认的队列
//这里的this,是原生的对象
callback && typeof callback == "function" && callback.call($(this)); //使用call,方便回调函数使用this
next();
});
return this; //返回this,方便进行链式调用
}
 
//试试在控制台这么用
var ele = $({});
for (var i = 0; i < 10; i++) {
ele.will(function () {
console.log(+new Date);
}).delay(1000);
}

使用队列,可以直观清晰,方便地将异步操作表示出来。就类似于 Thread.Sleep(1000) 那样明了。

队列的作用,就是将轮显中的格子,一个一个进行处理,避免了大量的setTimeout,使用callback的形式进行替换。


延迟函数使花瓣有序依次“生长”,动了起来,canvas的动画库很多,我这里使用的我自己最熟悉的方式,也算是他人创意的自己的一种实现方式吧... 接下来就是花瓣的组合(花)了,相信2π是360度这个大家都记得,我也不去卖弄我高数61分的水平。


有个地方我实在看不来,,,就是心型的坐标计算公式,于是我直接拿来用了,抄袭了这一部分。我也拿我自己没办法 =。=


参考了:

w3school canvas bezierCurveTo() 方法

玩转html5画图

爱♥曲线,单身程序猿福音 (以我的经验,最好不要用这个表白......跟用 LOL 5杀截图表白没啥区别)


目前在找工作,.net或者前端,希望朋友们能够帮忙推荐!!坐标北上广深


代码下载

去github上查看/下载demo

http://www.cnblogs.com/lianmin/p/5285923.html#!comments

一个Jquery特效(转)的更多相关文章

  1. Web设计师值得收藏的10个jQuery特效

    jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的J ...

  2. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  3. jQuery 特效:盒子破碎和移动动画效果

    今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...

  4. 一款jQuery特效编写的大度宽屏焦点图切换特效

    一款jQuery编写的大度宽屏焦点图切换特效 焦点图显示区域有固定的宽度,当前显示宽度之外是一个半透明层显示的其它的焦点图片, 最好的是,此特效兼容IE6以及其它浏览器. 适用浏览器:IE6.IE7. ...

  5. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  6. jquery特效(5)—轮播图③(鼠标悬浮停止轮播)

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

  7. jquery特效(4)—轮播图②(定时自动轮播)

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

  8. jquery特效(1)—点击展示与隐藏全文

    下班了~~~我把今天整理的一个jquery小特效发一下,个人觉得比较简单,嗖嗖的就写出来了~~~ 下面先来看最终的动态效果: 一.来看一下主体框架程序: <!DOCTYPE html> & ...

  9. 随着页面滚动,数字自动增大的jquery特效

    首先为了截出gif图,我下载了一个小工具 GifCam: https://www.appinn.com/gifcam/ 随着页面滚动,数字自动增大的jquery特效 主要就是依赖这个脚本script. ...

随机推荐

  1. adb 之android的神器am

    am命令,am全称activity manager,你能使用am去模拟各种系统的行为,例如去启动一个activity,强制停止进程,发送广播进程,修改设备屏幕属性等等 命令窗口通过adb shell ...

  2. Android studio ElasticDownloadView

    找到个开源项目,地址:https://github.com/Tibolte/ElasticDownload 下载进度效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...

  3. Next-Key Locks

    Next-Key Locks 一个next-key lock 是 一个record lock 在index record 和 一个区间锁 在一个区间在index record之前 InnoDB 执行 ...

  4. Linux内核驱动开发之KGDB原理介绍及kgdboe方式配置

    接博文<Linux内核驱动开发之KGDB单步调试内核(kgdboc方式)>.上篇博文中,仅简单介绍使用串口的Kgbd的流程(kgdboc方式),本文将重点介绍KGDB调试Linux内核的原 ...

  5. MySQL学习笔记之中的一个 MySQL入门

    本人之前接触的关系型数据库主要是oracle和sqlserver,而对于mysql知之甚少,但查阅网上资料发现,mysql与oracle非常相似,所以学起来应该不会非常费劲,在总结的时候可能很多其它的 ...

  6. [docker]coreOS与atomic对照

    声明: 本博客欢迎转发,但请保留原作者信息! 博客地址:http://blog.csdn.net/halcyonbaby 内容系本人学习.研究和总结,如有雷同,实属荣幸! 摘自https://majo ...

  7. hibernate学习(一)

    一.准备工作:导入jar包 1.hibernate的jar包 位置: hibernate-release-5.0.2.Final\hibernate-release-5.0.2.Final\lib\r ...

  8. [C++]const修饰符

    Date: 2014-1-1 Summary: const 修饰符笔记 Contents: 1.const 修饰符 声明一个常量数据类型 , 在编译时就确定数据类型 2.const 与 指针 一般情况 ...

  9. 计算机视觉与模式识别代码合集第二版three

    计算机视觉与模式识别代码合集第二版three     Topic Name Reference code Optical Flow Horn and Schunck's Optical Flow   ...

  10. 搭建自己的XenServer+CloudStack云平台,提供IaaS服务(一)环境搭建

    目标 搭建一个完整的基于XenServer和CloudStack的虚拟化平台,提供IaaS服务. 搭建三台安装了XenServer的服务器 搭建一台安装了CloudStack的服务器用以管理云平台 搭 ...