Animation

SVG动画案例的学习

平面设计已成为2016年可见的趋势,显然,这就是SVG用法又重新走入人们的视野的原因。好处有很多: 独立的分辨率、跨浏览器兼容性以及DOM节点的可访问性。本文中,我们将看看如何使用SVG从简单的插图创建看似复杂的动画。

【转载】CSS分层动画可以让元素沿弧形路径运动

CSS 的 animations (动画)transitions(变换)擅于实现从点 A 到点 B 的直线运动,运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后,无论你如何调整贝塞尔曲线,都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性,做出弹动的效果,但是它沿着 XY 轴相对移动的值永远是相同的。

CSS的motion-path属性

在CSS中要实现一个动画按一个指定的路径运动,相对而言是较为困难的。虽然通过transform能模拟出来一定的效果,但要达到很完美的效果是非常的痛苦的,也较为困难的。那么今天给大家介绍的motion-path属性虽然 还未成为W3C中的正式规范,但这个属性能帮助大家轻易实现一个动画按指定路径运动。

重新创建Twitter点赞动效

最近,我在CodePen上看到了一个Twitter心形点赞动画。一般,如果我有时间就会研究案例代码,看是否可以进行利用或更改。在这个案例中,我很惊讶的看到演示使用的是Sprites图片。后来我学习了Twitter对其实现的原理。当然,这可以不使用图片就可以实现,不是吗?

纯CSS实现滚动3D字幕

一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用WebGL的方法。但我还是想使用HTML和CSS来实现这样的效果。很多年以前,在Web上实现滚动文本的动画效果一般是采用marquee标签来实现,当然也有很多同学采用JavaScript来实现类似的效果。前几天在CodePen看到有位大神使用纯CSS制作了一个3D的滚动文本效果,仔细看了一会,没想到thenewcode.com/就有介绍这个案例的文章,今天将篇文章翻译出来和大家一起分享。

给用户界面添加缓和效果(Easing Curves)

自从Web界面引入平面设计之后,动画的质量变得越来越重要。通过给界面添加动画效果,可以直接影响产品的整体风格,动画也可以让复杂的交互变得简单,优秀的动画设计也能更好的提高用户体验。但如何创建一个高质量的动画呢?Easing Curves就变得很重要,它也成为动画的一个核心功能,能让动画变得更棒。

【转载】关于动画,你需要知道的

在浏览器里,动画实现的基本原理非常简单明了,其实就是采用定时器改变显示元素的一些属性的过程。不管是 JavaScript 操作 DOM 的动画,还是 CSS3 动画,还是 Canvas 动画,或者 SVG 动画,区别只是使用的 API、何种定时器,影响什么环境(DOM/Canvas/SVG/WebGL)。

贝塞尔曲线的一些事情

贝塞尔曲线(Bezier curves)是曲率的一种典型代表,而且在很多应用中都会运用到,比如计算机的图形学中、字体和动画。如果你以前玩过CSS,那么你可能就运到过贝塞尔曲线。例如,在CSS的时间函数(timing function)中就有一个贝塞尔曲线——x轴和y轴的距离用来确定时间。

使用CSS制作Heart动画

几个星期前,我发现Twitter上几乎每个人的star都转向了一颗心。无疑这是一个很大的讨论的话题之一···但是我所在意的是··这个动画的实现是否只用CSS就可以实现呢(不是单一的图片或者SVG)?我知道这并不很重要,但是当这个想法出现的时候,我简直不能入睡直到可以想出一个可行的方案。经过一些实验后,我终于有了我的答案。结果并不完美(大量的SCSS / CSS -大约400行),但是也是令人满意的(至少基于我的期望)。

CSS如何实现弹簧动画效果

CSS Animation在Web Animation中已不是新技术,不过在制作动画的时候,或许常常纠结timing-function如何使用。一般情况之下,都会使用animation-timing-function/transition-timing-function自带的几个关键词动画函数。稍为熟悉Web Animation的同学可能会使用cubic-bezier.com帮助自己创建一些timing-function。往往这一切都只是局限于使用,而不知道其原理究竟是什么。

页面

返回顶部