Animation

FLIP技术给Web布局带来的变化

用户界面是最直观的呈现给用户,而其中动画在这方面又扮演着重要的角色。正如@Nick Babich所说:动画将用户界面带入生活。而且,UI动画在用户体验方面也是重要的一环。特别是移动端开发的同学更清楚这一点。移动应用中的UI动画是体验的核心部分之一,而不是事后的想法。可是呢?事实上我们经常遇到的Web运用程序或App只是从一个视图跳到另一个视图,并没有给用户足够多的时间来处理当前环境中刚刚发生的事情。同时,很多同学都认为,动画通常在用户体验方面仅仅是锦上添花,并且被认为是不必要的、过渡的或太复杂的,无法实现的,也是因为这些原因,UI动画在很多Web应用中被忽略了。更糟糕的是,缺乏意义的动画会给自己产品体验方面带来损害。

Vue 2.0学习笔记:Vue的animation

上一节我们学习了Vue 2.0中的<transition>实现元素从状态A到状态B的过渡效果。对于元素过渡的效果是通过CSS的transition来完成,具体什么时候执行是由Vue来控制的。而transition的效果毕竟有所限制,对于一些复杂的动效,还是需要通过别的方式来完成。在Vue中除了transition之外还可以完成animation的效果。也就是可以将CSS的animation运用到Vue中来,实现一些动画效果。今天这篇文章我们就来学习如何在Vue运用CSS的animation

使用CSS transition和animation改变渐变状态

到目前为止,CSS的渐变属性linear-gradientradial-gradient已经是很成熟的CSS特性了,而且repeating-linear-gradientconic-gradient也越来越成熟。CSS渐变特性对于我们的帮助已经非常强大了,它们可以帮助我们绘图创建图片占位符制作环形进度条等等。另外还可以通过transitionanimation让渐变动起来。

使用Canvas给DOM元素添加粒子效果

让我们来看看如何将<canvas>的自由度与HTML元素结合起来,使Web页面在视觉上有更好的效果。具体地说,我们将创建一个基于HTML-to-particle的效果,但同样的技术也可以用于实现很多类型的效果。在开始之前,可以通过Repo获取源代码

制作Loading组件

最近项目中使用到一个Loading效果,其实是一个很简单的效果,主要是因为这个Loading出现在不同的场景之中,而且大小也不一致。对于这样的效果,往往都会想通过组件的方式来处理,其出发点就是更易维护,易扩展。当然,这对于前端的同学而言并没有什么复杂性,也没有多少技术含量。不过我还是希望把这个过程记录下来。

如何使用简单的三角函数创建Loading效果

在这篇文章中,将使用三角函数的基本概念,重新创建一个更平滑的Loading效果。我知道这听起来很奇怪,但请相信我,这里一定会很有趣。你会惊讶地发现,要编写的代码很少。当然,你可能会担心三角函数相关的知识,事实上是你不需要知道三角学或数学你能理解这篇文章。我将会解释这里的每个圆相关的事情。

SVG 让 UI 工程师早点回家陪媳妇

本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。以及,相关的动画的矩阵知识,这个也是现在 CSS 动画里面最重要,同时也是最为欠缺的知识点。文章会先从基本语法入手,然后,慢慢深入。介绍一些动画基本原理和对应的数学原理知识点。并且文章后面,还附有相关语法的介绍,当你在遇到不熟悉语法的时候可以参考参考。

设计出色的动效

这篇文章希望通过7个GIF图例来证明动效设计并不复杂,只需在关键之处增加一点点变化,就能让效果大大提升一个境界。通过这些范例,你会发现状态连续性、元素关联性,以及用户注意力控制的重要性。在做动效设计中,我参考的设计规范有:Material MotionIBM’s Animation PrinciplesThe UX in Motion Manifesto

使用perspective和transform实现容器上的悬浮效果

我一直在做一个网站,这个网站主要用来向用户展示大型图片。我没有创建一个典型的Lightbox效果,而是尝试让一些交互效果更有意思。最后的效果是我在一个容器上添加了一个效果,当用户把鼠标悬浮在图片(用户鼠标移动图片上)时,它会倾斜(鼠标移动到不同的角度时,向不同的方向倾斜)。

用SVG和Vanilla JS框架创建一个“星形变心形”的动画效果

我写的这篇文章中, 讲述了如何用Vanilla JavaScript使动画顺滑的从一种状态过渡到另一种。最好先看下那篇文章,因为在这篇文章中我们要用到一些那篇文章中讲过的内容。例如例子的演示、各种时间函数的公式、当从结束状态过渡到初始状态时不使时间函数倒转过来。都在那篇文章中做了详细讲解。

页面

返回顶部