V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
qiutianaimeili
V2EX  ›  分享创造

canvas 仿 qq 消息圆点拖拽效果

  •  1
     
  •   qiutianaimeili · 2018-02-24 13:39:07 +08:00 · 4009 次点击
    这是一个创建于 2491 天前的主题,其中的信息可能已经有所发展或是发生改变。

    qq 上当有未读消息的时候会出现一个红点,这个红点是可以拖拽的,当到达一定程度的时候,圆点就爆炸了,现在用 canvas 做了一个类似的圆点拖拽爆炸效果,效果图:

    最后的爆炸效果本来想用图片,结果找不到素材,就用 cavans 做个了简单的爆炸效果。喜欢的朋友可以看看。

    demo 地址:http://www.qiutianaimeili.com/html/page/2018/02/source/qq/example2.html

    文章地址:http://www.qiutianaimeili.com/html/page/2018/02/97wv9l2zlpe.html

    15 条回复    2018-02-27 10:42:38 +08:00
    loethen
        1
    loethen  
       2018-02-24 14:34:59 +08:00
    效果不错,👍
    50vip
        2
    50vip  
       2018-02-24 15:36:30 +08:00
    放 github 啊~
    MuscleOf2016
        3
    MuscleOf2016  
       2018-02-24 15:38:14 +08:00
    不错哦。
    qiutianaimeili
        4
    qiutianaimeili  
    OP
       2018-02-24 15:45:35 +08:00
    @50vip 呃,不太会用
    SergeGao
        5
    SergeGao  
       2018-02-24 15:54:37 +08:00
    效果不错很赞,希望放在 github 就好了~
    rrfeng
        6
    rrfeng  
       2018-02-24 16:13:46 +08:00
    圆画得不够精细吧?
    50vip
        7
    50vip  
       2018-02-24 16:15:45 +08:00
    @qiutianaimeili 写了那些多技术文章,学学使用 git 有必要的~
    qiutianaimeili
        8
    qiutianaimeili  
    OP
       2018-02-24 17:00:25 +08:00
    @50vip git 会用,只是不太用 github,不太喜欢把自己写的东西放在别的地方,太多限制,不能随心所欲~
    qiutianaimeili
        9
    qiutianaimeili  
    OP
       2018-02-24 17:06:48 +08:00
    @rrfeng 修复了,现在应该好点了
    yosolin
        10
    yosolin  
       2018-02-24 18:33:55 +08:00
    不错
    coffeSlider
        11
    coffeSlider  
       2018-02-26 00:31:11 +08:00 via Android
    厉害
    50vip
        12
    50vip  
       2018-02-26 12:42:32 +08:00
    @qiutianaimeili 不用 github,那你们公司内网有 gitlab ?

    反正都是开源,使用 github 可以让你的代码组织方式好一点!
    echaos
        13
    echaos  
       2018-02-26 22:41:24 +08:00 via Android
    赞 学习一个
    blueorange
        14
    blueorange  
       2018-02-27 10:10:57 +08:00
    报告一只 bug,先把一个原点拉走,然后去刚刚那个拉走的那个原点位置继续拉还可以拉,然后其他点的效果没有了
    qiutianaimeili
        15
    qiutianaimeili  
    OP
       2018-02-27 10:42:38 +08:00
    @blueorange 同时操作是有很多 bug,刚开始只是写一个圆点,为了演示所以弄了多个圆点,程序内部没有控制好多个问题(懒得弄),我这个只是抛砖引玉了,主要讲如何做一个,多个的话如何控制好就看真正使用的人了,毕竟这只是一个 demo,不是一个完整的插件,和真正的 qq 圆点还是不同的。不过如果你在看我的代码的时候遇到问题,可以在我的博客文章下直接留言,我看到了就会给你解答。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3020 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:47 · PVG 18:47 · LAX 02:47 · JFK 05:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.