拖拽粘性小红球Canvas实现

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

Read More...

H5动感影集性能分析

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

Read More...

玩转HTML5移动页面

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

Read More...