前端开发者学堂 - fedev.cn
    发布于

    【转载】Web动画性能指南

    随着网页功能变得愈发复杂和精细,以及手机端H5发展中所遇到的硬件性能瓶颈,网页的运行时性能问题变得越来越突出。而用户对于网页运行时性能最直观的感受,莫过于UI操作的流畅程度。流畅或卡顿,爽或不爽,皆在于每个UI动画细节之间。本文旨在帮助理解动画卡顿与流畅的原因,卡顿问题的调试方法,以及从实践中总结出实现流畅动画的规律。为构建操作流畅的网页提供参考。

    发布于

    【转载】消除疑问:CSS动画 VS. JavaScript

    曾经某个时期,大多数开发者使用 jQuery 给浏览器中的元素添加动画。让这个淡化,让那个扩大,很简单。随着互动的项目越来越复杂,移动设备的大量增加,表现性能变得越来越重要。Flash 被抛弃,有天赋的动画开发者使用 HTML5 去实现过去从未实现的效果。他们需要更好的工具去开发复杂的动画序列并获得最好的性能。jQuery 并不能够做到。浏览器日渐成熟的同时也开始提供了一些解决方案。最被广泛接受的方案是使用 CSS 动画(以及 Transitions)。几年中,它成为了业内的热门话题,在各种研讨会上,“硬件加速”和“移动端友好”之类的说法总是不绝于耳。基于 JavaScript 的动画总是被当做过时的甚至是“肮脏的”。但是真的是这样吗?

    发布于

    【转载】如何使用JavaScript控制CSS Animations和Transitions

    Zach邮件跟我说,上Stack Overflow这类的论坛,他经常碰到一些关于JavaScript控制CSS 动画的问题,又提供给我几个例子。我很早就打算写一些关于这方面的文章,所以很高兴让Zach提出来并促使我写了这个教程。有时候Web开发人员认为CSS的动画比JavaScript的动画更难理解。虽然CSS动画有其局限性,但它的性能比大多数JavaScript库更加高效,因为它可以借助硬件加速啊!其效果绝对可以超出我们的预期。CSS animationstransitions再加上点JavaScript就可以实现硬件加速动画,而且其交互效果比大多数JavaScript库更高效。 So,让我们快点开始吧!小伙伴们都等不及了!

    如何创建(动态的)文本填充

    这是一篇关于如何使用不同的技术(包括CSS和SVG),为文本创建各种不同类型的(动态)填充和描边的教程。我想,未来已经在这里。我们在CSS和SVG已经有这么多令人兴奋的可能性,这些我们以前都只能是想想而已。例如,我们现在有很多方法可以用来创建包含动态填充的文本。

    发布于

    使用viewBox添加动画

    我最近在CodePen上发表了一个DEMO来庆祝新的一年,然后得到了很多积极的反馈,关于我如何使用viewBox来作为我的场景中的camera的。所以我决定来写一篇文章来介绍一下这个动画是如何创作的~

    手淘年货节舞龙揭幕动画实战

    手淘用户这几天应该看到了年货节版本,不知道刚打开首页有没有被一阵锣鼓声、鞭炮声给吓倒。为了营造一种过年的气氛出来。PD们给年货节上了一个舞龙的揭幕动画,而这个任务就落在了小生的头上,为了将.gif动效在移动端上实现,着实费劲。那么今天就来介绍这个动画效果是如何实现的?