CSS3实现GIF动画
来自 dribbble 某位大师的作品,GIF图中一个小女孩抱着一只猫在跑步,非常可爱,动作轻巧,过渡自然。DEMO下载
回到项目需求,要实现类似上图卡通人物跑步动画,分析结果如下:
1.跑步动画可以应用在不同的场景
要求人物的背景是透明的,图片保证高清,避免边缘杂边
2.跑步动画运动速度与动作成正比关系
人物跑步速度越快,身体动作越快;人物跑步速度为零时,身体动作马上停止在当前的状态
3.跑步动画效果流畅
不会出现卡顿现象
GIF实现跑步
用PS打开该大师的 GIF 图,在时间轴窗口中有 24 张不同的图片,通过一帧一帧的播放来实现跑步动画,很简单得说明做一个精细的动画需要多费点心思和劳动力啊,向大师表示敬礼~
项目组要求的动画跟上图人物大小差不多,一开始跟交互和视觉的同事讨论时,尝试使用 gif 来实现动画,使用7张图片轮播,间隔 0.2 秒可满足的动画效果,简单实现如下:
分析下gif动画
好处:实现简单、可维护性高、工作成本低
缺点:只适合简单的动画效果,不能动态控制动画
那么项目的硬性要求(控制动画的暂停、速度等)让我放弃了对gif实现跑步的想法~
CSS3实现跑步
放弃了 gif,而 swf 也不是我们的选择,canvas 实现也是可以的,这里不做介绍,本次主题是 css3 动画~
跑步动画的实现
方式一:通过切换 7 张图片来实现
@-webkit-keyframes charector-1{0% {background-image: url(charector_1.png);}14.3% {background-image: url(charector_2.png);}28.6% {background-image: url(charector_3.png);}42.9% {background-image: url(charector_4.png);}57.2% {background-image: url(charector_5.png);}71.5% {background-image: url(charector_6.png);}85.8% {background-image: url(charector_7.png);}100% {background-image: url(charector_1.png);} }
方式二:7 张图片合成 1 张,通过切换背景图片位置来实现 可以右键右键另存为
@-webkit-keyframes charector-1{0% {background-position: 0 0;}14.3% {background-position: -180px 0;}28.6% {background-position: -360px 0;}42.9% {background-position: -540px 0;}57.2% {background-position: -720px 0;}71.5% {background-position: -900px 0;}85.8% {background-position: -1080px 0;}100% {background-position: 0 0;} }
分析这2种方式
方式一:
实现起来会比较简单,但带来额外的 7 个请求数
7 张图片总大小为:50k
方式二:
需要设计雪碧图,并量取背景位置,请求数少
雪碧图大小为:37k
可以看出多张图片合成的雪碧图比 7 张图片还少 13k 外,还可以减少 7 个HTTP请求,那么切换背景位置方式是比较好的,代码如下:
HTML:
<div class="charector"></div>
CSS:
.charector{position: absolute; width: 180px; height: 300px; background: url(../img/charector.png) 0 0 no-repeat; -webkit-animation-name: charector-1;/* 动画名称 */ -webkit-animation-iteration-count: infinite;/* 动画无限播放 */ -webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */ -webkit-animation-duration: 950ms;/* 动画运行的时间 */ } @-webkit-keyframes charector-1{0% {background-position: 0 0;}14.3% {background-position: -180px 0;}28.6% {background-position: -360px 0;}42.9% {background-position: -540px 0;}57.2% {background-position: -720px 0;}71.5% {background-position: -900px 0;}85.8% {background-position: -1080px 0;}100% {background-position: 0 0;} }
demo,这里下载(请使用 webkit 内核的浏览器打开)
加快跑步速度、暂停跑步的实现
加快跑步速度:可以通过快速切换背景图片位置,animation-duration 可以控制动画运行的时间,那么减少动画的时间可以提升跑步的速度,通过在父级动态加载不同的功能 class 来运行不同的动画,从而改变跑步速度
详细内容请看代码,留意注释
HTML:
<div class="charector-wrap " id="js_wrap"><div class="charector"></div> </div><a class="run-xfast" href="#none">最快</a> <a class="run-fast" href="#none">快</a> <a class="run-normal" href="#none">正常</a> <a class="run-slow" href="#none">慢</a> <button class="btn-paused">暂停</button>
CSS:
.charector{position: absolute; width: 180px; height:300px; background: url(../img/charector.png) 0 0 no-repeat; -webkit-animation-iteration-count: infinite;/* 动画无限播放 */ -webkit-animation-timing-function:step-start;/* 马上跳到动画每一结束桢的状态 */ } /* 跑步动画名称 */ @-webkit-keyframes person-xfast{/* 超快 */0% {background-position: 0 0;}14.3% {background-position: -180px 0;}28.6% {background-position: -360px 0;}42.9% {background-position: -540px 0;}57.2% {background-position: -720px 0;}71.5% {background-position: -900px 0;}85.8% {background-position: -1080px 0;}100% {background-position: 0 0;} } @-webkit-keyframes person-fast{/* 快 */0% {background-position: 0 0;}14.3% {background-position: -180px 0;}28.6% {background-position: -360px 0;}42.9% {background-position: -540px 0;}57.2% {background-position: -720px 0;}71.5% {background-position: -900px 0;}85.8% {background-position: -1080px 0;}100% {background-position: 0 0;} } @-webkit-keyframes person-normal{/* 正常 */0% {background-position: 0 0;}14.3% {background-position: -180px 0;}28.6% {background-position: -360px 0;}42.9% {background-position: -540px 0;}57.2% {background-position: -720px 0;}71.5% {background-position: -900px 0;}85.8% {background-position: -1080px 0;}100% {background-position: 0 0;} } @-webkit-keyframes person-slow{/* 慢 */0% {background-position: 0 0;}14.3% {background-position: -180px 0;}28.6% {background-position: -360px 0;}42.9% {background-position: -540px 0;}57.2% {background-position: -720px 0;}71.5% {background-position: -900px 0;}85.8% {background-position: -1080px 0;}100% {background-position: 0 0;} } /* 跑步动作频率控制 */ .xfast .charector{/* 超快 */ -webkit-animation-name: person-xfast; -webkit-animation-duration: 500ms; } .fast .charector{/* 快 */ -webkit-animation-name: person-fast; -webkit-animation-duration: 650ms; } .normal .charector{/* 正常 */ -webkit-animation-name: person-normal; -webkit-animation-duration: 800ms; } .slow .charector{/* 慢 */ -webkit-animation-name: person-slow; -webkit-animation-duration: 950ms; }
暂停跑步:使用 animation-play-state:paused 可以暂停正在进行的动画,并停留到当前的动作,那么当用户停止操作时,给父级加上功能 class 来停止动画
CSS:
/* 暂停动画 */ .paused .charector{-webkit-animation-play-state:paused; }
最后再通过 js 控制不同的跑步速度。
jQuery:
$(document).ready(function(){ $("a").on("click",function(e){$("#js_wrap").find(".charector-wrap").removeClass("paused");$("#js_wrap").attr("class","charector-wrap " + $(e.target).attr("class").split("-")[1])})$(".btn-paused").click(function(){$("#js_wrap").addClass("paused");})})
最后界面:
demo,这里下载(请使用 webkit 内核的浏览器打开)
总结:
animation 适合相对简单的动画,使用起来比较灵活,如支持切换不同的动画名、暂定动画等
animation-timing-function 的 step-start 属性等不完全支持 android 2.1~4.3 、ios 4.3 系统
作者:白树
出处:http://peunzhang.cnblogs.com/
尊重别人的劳动成果,让分享成为一种美德,欢迎转载。
转载于:https://www.cnblogs.com/ericHTML5/p/4029155.html
CSS3实现GIF动画相关推荐
- css3圆形轨迹动画
<!doctype html> <html lang="en"> <head> <meta char ...
- css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构 该css3线条波浪动画效果的HTML结构如下: CSS样式 然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
- loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
- css3半空心圆_15个超强悍的CSS3圆盘时钟动画赏析
本文作者html5tricks,转载请注明出处 在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个 ...
- 9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
- JS框架_(JQuery.js)纯css3进度条动画
百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <htmllang="zh"> <head><meta ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载 更多专业前端知识,请上 [猿2048]www.mk2048.com
- html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图 各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
- html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
- css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
最新文章
- 剑指offer--JavaScript版
- RDLC 2010设计器的数据源无法找到静态类作为数据源
- matlab中怎么给符号变量赋值
- maven给默认中央仓库设置镜像为阿里云maven仓库并添加全局远程仓库
- 人生的主干,提及程序化
- 开放273项AI能力,创建34万模型,汇聚265万开发者,百度大脑的2020成果一览
- SpringBoot2.x(3)---基础入门
- html 多标签页,html更多标签
- c语言源程序自动评判系统,C语言源程序的自动评判毕业设计论文
- 机器学习(二)——xgboost(实战篇)Pima印第安人数据集上的机器学习-分类算法(根据诊断措施预测糖尿病的发病)
- 精益创业(LeanStartup)
- Java接口自动化测试框架
- Java静态代理和动态代理(代理模式)详解
- Android签名验证与反调试机制的对抗技术
- 性格木讷面试时如何脱颖而出?
- centos 8 的图形操作界面在哪_【行测备考】立体图形截面有哪些实用技法?
- 婚礼纪 java面试
- Android图表库MPAndroidChart(二)——线形图的方方面面,看完你会回来感谢我的
- ORACLE grant用法
- java如果判断文件夹或文件不存在就创建文件夹或文件
热门文章
- 有了3D Touch,再也不用AssistiveTouch了
- 快速上手!7款简单易用的在线绘图工具推荐
- Linux之父—托瓦尔兹
- 算法的时间复杂度是什么?如何计算?
- 怎么把背景图片变透明html,怎样把图片背景变成透明
- Ckeditor+Ckfinder+Ext4 整合
- AI绘图实战(七):室内设计线稿渲染、景观设计手绘稿改动、建筑照片转线稿|Stable Diffusion成为设计师生产力工具
- java函数多态_Java 多态
- Vue:Uncaught SyntaxError: Unexpected identifier踩坑回忆
- c语言中的float类型,C语言中float类型详解