Fork me on GitHub

见证花开!!码上有花

... 请自由点击画布2016.4 今天更新了浏览器,发现chrome卡爆了,,,不知道原因。这个效果估计看不了啦

 


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



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

花瓣 =》 花朵 =》动画

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

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

完美!

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

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

原谅我的渣画图





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



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

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

关于jQuery队列的一点认识:

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

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

    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”的队列中。因此,我进行了以下简单的封装:

    $.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


下面是厚颜无耻的求赞时间

您有没有对这篇文章感兴趣呢?








.

 

posted on 2016-03-17 03:49  上位者的怜悯  阅读(7912)  评论(94编辑  收藏  举报