文章关键字 ‘动画’

内容loading加载后高度变化CSS3 transition体验优化

2015年01月22日,星期四

现在web技术不断发展,视图与数据渲染更多由前端呈现,后台更多与数据打交道。于是,我们会经常看到这样的交互场景。页面加载,看到一个框框里面有个菊花在转,然后内容呈现;或者点击个按钮,菊花在转,然后列表动态加载呈现。

确实,功能上OK,有菊花,用户也愿意等。但是,大家有没有觉得所有交互,出现菊花→出现内容,都是“砰砰砰”很生硬的感觉,尤其当内容是动态,高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉,整个交互流程都是很流畅的,就像山涧的泉水,涓涓细流到山脚,而不是巨人在峡谷走路的感觉。

所以,如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现,势必会增强用户体验。

而本文就将分享,我是如何渐进处理,让动画过渡呈现更自然的…… 必须的,demo,截图,源代码展示一个不少,希望本文的内容能够对您的学习有所帮助。

阅读全文…

再说CSS3 animation实现点点点loading动画

2014年12月28日,星期日

以前介绍过一种方法实现打点loading动画效果,但是那个方法不健壮,机缘巧合,让我重新思考有没有更好的方法。而本文分享的就是自己想到了2个全新的实现方法,兼容各大小浏览器。

本文不仅有demo,源代码展示,还特意制作了多种gif效果演示帮助理解,相信本文的内容会对你的工作有所帮助的!

阅读全文…

超级强大的SVG SMIL animation动画详解

2014年08月31日,星期日

本文详细介绍SVG SMIL animation动画。前半部分主要是效果体验,后半部分只要是参数示意。一定是目前国内最详尽讲解SVG SMIL animation动画的文章,没有之一。内容扎实,丰富的效果展示,大量的源码示意。相信一定会对您的学习有所帮助的。

阅读全文…

深度掌握SVG路径path的贝塞尔曲线指令

2014年06月12日,星期四

如题,本文就是讲解SVG路径path的贝塞尔曲线指令的,不过,除了技术之外,还吐槽了很多自己的思考,自己的想法,对行业对前端的一些看法与认知,希望可以引起一些共鸣或争议。当然,主要内容还是讲得很详尽的,截图,demo,源代码展示一个都少不了。希望本文的内容能够对您的学习有所帮助!

阅读全文…

纯CSS实现帅气的SVG路径描边动画效果

2014年04月8日,星期二

本文属于简单实用的基础技术科普。有丰富的gif动画演示,有demo,有截图以及必要的源代码展示,还有官方文档释义。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小折腾:JavaScript与元素间的抛物线轨迹运动

2013年12月30日,星期一

在页面上添加元素的位移动画,除了视觉效果(这是次要的),还有个作用就是视觉引导(重点)。举个大家可能见过的例子,选择商品的时候,我们希望商品飞到边缘或角落的购物车里,作用是:一来告知放在购物车里成功了,二来让用户知道购物车在哪里。

但是,直来直去的运动你用我也用,不出彩啊,于是,就有想法,我抛物线过去,会不会有别样的风采。

于是,……

阅读全文…

我要上头条——鑫表情包1.0正式发布

2013年12月19日,星期四

早在去年,也可能是去年的去年了,我已经开始在文章中不断使用具有自己特色的表情图。当时可能只是因为funny. 不过从大家的反馈来看,挺有意思,虽然没什么技术含量,但有特色。甚至有人提议可以弄一套表情包,我把这个建议一直放在了脑中。

于是在后来的日子里,偶尔就会因为文章需要补一两个表情。久而久之也有了一定的数量。

今年来到了新的团队,有很多非常出众的视觉设计师,她们绘制的表情,哇哦~~我怕是坐上火箭都追不上。但是,我在跟他们在群里聊七聊八时候,偶然冒出的几个鑫表情得到了他们的赞许,觉得挺有意思的。同事建议我可以搞了表情包,发给他们用用。甚至有同事说我这套表情一定会火的……

阅读全文…

CSS3动画那么强,requestAnimationFrame还有毛线用?

2013年09月30日,星期一

requestAnimationFrame与动画
本文可谓JS实现动画必读文章。设计实现、性能、动画算法,CSS3相关等一系列内容。配以生动的对话体,二次元与三次元的碰撞;丰富的demo、截图以及源代码展示,平白易懂的文字,相信本文的内容一定能够对您的学习有所帮助!

阅读全文…

贝塞尔曲线与CSS3动画、SVG和canvas的基情

2013年08月30日,星期五

CSS3动画、SVG和canvas都与贝塞尔曲线存在基情关系,哟呵呵呵,本文就将揭示其中不为人知的基情,习惯八卦的你可不能错过哦……

阅读全文…

前端设计必会技能-gif动画图片制作

2013年01月15日,星期二

gif动画图片是web制作中非常常用的,可以说是前端必会技能。本文就介绍了如何在Adobe flash以及Adobe photoshop中制作gif动画图片。很多截图,希望本文的内容能够对您的学习有所帮助。

阅读全文…