经典Loading 动画赏析

0. 传统菊花Loading动画

如果作为程序员的你还在用菊花作为Loading动画,是时候换个口味了。来看下5种不错的Loading动画。几种颜色组成的动画,给用户一个美感。

1.android 4.3, 4.4开机动画

这个是我最喜欢的Loading界面之一

2.android 5.0 开机动画

在往3D方向发展了,最后Android出来的那个动画很酷

3.google Adsense Loading动画

google总是能把红, 绿,蓝,黄这四种颜色弄成很漂亮的Loading动画。

4. QQ email Loading 动画

qq email的这个Loading动画也非常不错。一时间很难看出它变化的规律,但觉得还不错。用了3个颜色。

5. PPTV Loading 动画

PPTV的这个用了2个颜色,也还不错。

6. 暴雪Battle.Net Loading 动画

暴雪的这个只用了一个颜色。很复杂的运动。

图片就不加水印了,不想破坏这个动画的美。但提取过程还是花了点时间。后续有不错的Loading动画再补充。先放6个。想要在程序中高仿上面的Loading动画,可以下载gif,然后逐帧看它运动的规律。

时间: 2024-08-07 17:02:13

经典Loading 动画赏析的相关文章

带缺口的圆环CSS3 Loading动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

用svg制作loading动画

首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Canvas写的话,在颜色的渐变方面会有问题: 线性渐变需要传递四个参数 xstart:渐变开始点x坐标       ystart:渐变开始点y坐标       xEnd:渐变结束点x坐标       yEnd:渐变结束点y坐标 这样画出来的渐变只能用于矩形之类的图形,无法应用在诸如扇形内,此loadi

一款炫酷Loading动画--加载成功

简介 昨天在简书上看到一篇文章,介绍了一个加载动画的实现过程 一款Loading动画的实现思路(一) 只可惜原动画是IOS上制作的,而看了一下,作者的实现思路比较复杂,于是趁着空闲写了一个Android版本,这篇文章将给大家介绍一下实现过程. 首先让我们来看一下动画效果 动画结构分析 从上面的gif图中可以看到,这个加载动画有成功,失败两种状态,由于Gif速度比较快,我们再来分别看一张慢图 1.成功状态加载动画 成功动画的状态转移描述如下: 1.加载过程,画蓝色圆环,当进度为100%时,圆环完成

一个简单的loading动画,version 1.0

一个简单的loading动画:如图 点我查看

开源分享三(炫酷的Android Loading动画)

开源分享三(炫酷的Android Loading动画) 分享GitHub上的一些Loading,为了提升产品用户体验,一个好的Loading必然是不可缺少的,对于一些耗时需要用户等待的页面来说会转移用户注意力,不会显得那么烦躁,所以你可以看到市面上一些App中的各种各样的Loading动画,从这些实现思路上可以打开你们自己的思维,没准也会有创新的Loading动画出现. android-shapeLoadingView 新版58同城加载页面动画. CircleProgress 一个效果很酷炫很创

9个绚丽多彩的HTML5进度条动画赏析

进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发光进度条动画 超炫酷的样式 这次我们要来分享一款非常炫酷的CSS3进度条动画,其样式风格类似于星球大战里面的那些激光剑效果.页面初始化时,可以设定进度条的值,但是我们也可以利用其配套的借口来动态改变进度条的值,使用起来比较方便.另外以前介绍过一款CSS3 3D进度条,其风格也类似. 在线演示 源码下

分享web前端七款HTML5 Loading动画特效集锦

以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动画,那将是一件非常痛快的事情. 1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效.Loading旋转图标是在canvas画布上绘制的,整个lo

简单的CSS3 Loading动画

最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整理一下大概的思路:整个圆分为AB两部分,左右都是半圆,上面盖了一个背景色为白色的小圆,如右图,简单布局如下: <style> .loading{margin:100px auto; width: 8em; height: 8em; position: relative;} .loading .pr

ios开发之简单实现loading动画效果

最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutableArray alloc] initWithObjects:[UIImage imageNamed:@"1.png"],[