拖拽粘性小红球Canvas实现

相信大家都见过之前手机QQ中神奇的“一键下班”功能,如图: 它通过一种优雅的方式,去掉QQ上的所有消息通知红点:用户可以拖拽粘性的小球来删除红点,动画符合用户心理预期。详情请看ISUX文章介绍,本文借鉴于此。 这个创意十分棒,但是它是基于客户端实现的。对于这个带粘性的弹性小球其实可以用在很多方面,例如loading动画、下拉刷新提示、横屏提示、按钮反馈等等,因此有必要实现一个前端版本。没错,这是一个教程贴,客官按需往下看。 那么先看看

Read More...

2015年终总结

No one will be king for long 原本是在编程界中表示没有任何一家语言能一家独大,连扩张明显的Javascript都不可能适用于所有场景。这用于我们日常也是一样的,没有谁会因为学会了某项技能,就可以一直运用得很好,相反却会因为越来越多的变化和竞争让你跟不上这项技能。这一句话一直影响了我一年,让我对养成习惯的重要性有了更深刻的认识。 然而,对着荒废的尤克里里,吹过的牛逼还是将自己变傻逼了。 工作今年是自己正式工作的

Read More...

H5动感影集性能分析

“你听说过动感影集么?” 动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的视频集,且载体是HTML5(简称H5)页面,意味着可以随时分享到空间或朋友圈给好友欣赏! 移动端区别于PC年代的相册视频,由于设备性能限制,每一个动画细节都需要认真优化,今天就来说说动感影集开发过程中的动画性能检测与优化的问题。 1.先利其器 - Chrome Timeline&Rendering性能分析前,我们先看看工具。Chrome浏览器带来

Read More...

玩转HTML5移动页面

标题起得有点大(๑´ㅂ`๑),今天来谈谈H5移动页面的开发心得(技巧)。 一般情况下,拿到设计稿你有两种选择://条件表达式产物=设计稿处理?静态输出:让页面动起来; 作为一个有志向的前端,当然不会让页面生硬地静态展示啦(๑´ㅁ`)!可是需求时间又很短很短,怎么办呢?所以下面的一些小技巧,至少能在你没有想法的时候让你的页面生动不少呢,同时也能确保你的页面不会出什么问题(后面有页面优化技巧)。 ====前方高能==== TIPS1 CS

Read More...

2014年终总结

每年一篇年终总结,写一写2014我自己的变化。 前方流水账高能,不喜者快逃离! 实话说,今年是很不满意自己的一年。有人说工作后会磨灭了青春的热情,我一直不相信,但是不得不承认。少了一分狂妄,多了一分沉稳。——我这样安慰自己。 工作从实习到现在,已经不知不觉干了一年多了。一年多以来干了很多事,但也没干很多事: 干了啥 从PC前端慢慢由于业务问题转向了移动前端,移动相关技术算是从无到有,不知不觉把整套弄起来了,也沉淀了一些文章总结

Read More...