css3逐帧动画
写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画。我们熟悉的animation动画有ease、ease-in、ease-out、linear、cubic-bezier等补间过段函数,当然还有我们可能不是很熟悉的steps跳帧函数。我们在做一些特殊的动画,比如一个飘动的旗子、一个奔跑的小人,这些动画不需要补间,这时候需要的是跳帧steps。
逐帧动画实现方法:
1、把动画帧切图合并在一起
2、通过CSS3的animation控制background-position
方法很简单,这里使用到的就是前面提到的过度函数steps
steps使用:
steps 函数指定了一个阶跃函数,第一个参数指定了时间函数中的间隔数量(必须是正整数);第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end
比如:steps(1,start)、steps(1,end)或者steps(1)
这样讲很抽象,即使记住了,真正在做动画的时候也可能搞混
逐帧动画实例:
下面通过一个数字(1—5)变化动画来看看到底start和end两个会有什么不同的效果:
1、steps(1,start)效果
先看下背景合并图:
代码(这里只写webkit的前缀,其它的兼容前缀在实际项目中自己补全):
.ani 1 { height : 200px ; width : 200px ; background : url (img/bg.png) no-repeat 0 0 ; -webkit-animation:num_ani 2 s steps( 1 ,start) infinite; /*效果1*/ } .ani 2 { height : 200px ; width : 200px ; background : url (img/bg.png) no-repeat 0 0 ; -webkit-animation:num_ani 2 s steps( 1 ) infinite; /*效果2*/ } @-webkit-keyframes num_ani{ 0% { background-position : 0 ; } 20% { background-position : -200px 0 ; } 40% { background-position : -400px 0 ; } 60% { background-position : -600px 0 ; } 80% { background-position : -800px 0 ; } 100% { background-position : -1000px 0 ; } } |
效果gif截图:
分析:效果一里面的数字‘1’没有显示出来,而且后面那个边空白了,效果二达到预期效果。
通过上面的栗子,相信已经明白了steps的第二个参数的区别了。再看看上面keyframes的设置,我们要的效果其实是5个变化,但是我们写了6帧的时间点。我们的第五个数字的背景是 background-position:-800px 0,为什么上面的帧要写到background-position:-1000px 0;
一开始,我们可能按照以前连贯的动画写法,但是这里是以跳帧的形式运行动画的。比如说,我们要见到数字1(也是0%-20%之间),那么我们应该显示0到-200px之间的背景。也就是说我们的逐帧动画的帧数应该加1的。
点击在线demo:
旗子飘动例子:
细心的童鞋可以看到,上面例子的steps的第一个参数都是取值1,取值为1的意思是指动画在一步完成,然后具体的跳帧是需要我们自己在keyframes里面设置。
旗子飘动代码:
.ani 3 { height : 55px ; width : 60px ; margin : 100px ; background : url (images/flag.png) no-repeat 0 0 ; -webkit-animation:flag_ani 0.8 s steps( 5 ) infinite; } @-webkit-keyframes flag_ani{ 100% { background-position : 0 -282px ; } } |
从上面可以看到,keyframes代码比数字变化的动画写法简单了很多,这是因为用了steps(5),整个旗子的变化由5张图组成,下面是背景图的雪碧图:
steps里面指定动画的步数,然后在keyframes里面指定整个背景的position,像上面的旗子雪碧图的高度就是282px,然后steps函数就会把他平均分成5份,也就是282/5。平均这个词很重要,也是他和前面steps(1)的主要区别。前面我们把整个动画看做一步完成,然后在keyframes里面具体的定义各个帧。而steps(5)是代码帮你平均分,如果你的雪碧图合拼的间距不一致,会出现动画错位的问题。
效果gif截图:
点击在线demo:
css3逐帧动画的更多相关文章
- css3 animation实现逐帧动画
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
- css3 实现逐帧动画
css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...
- animation中的steps()逐帧动画
在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...
- 利用css3-animation来制作逐帧动画
前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...
- 使用node.js开发一个生成逐帧动画小工具
在实际工作中我们已经下下来不下于一万个npm包了,像我们熟悉的 vue-cli,react-native-cli 等,只需要输入简单的命令 vue init webpack project,即可快速帮 ...
- Android动画效果之Frame Animation(逐帧动画)
前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...
- Android 逐帧动画
原理: 逐帧动画是最简单的一种动画.原理就是把几张图片连续显示出来,以达到动画的效果.就相当于下面这种手绘翻页动画啦~ 实现: 1.需要建立一个animation-list来设置静态图片资源.持续时间 ...
- 逐帧动画(Frame-by-frame Animations)
1.这一类动画可以创建一个Drawable序列,这些Drawable可以按照指定的时间间歇一个一个的显示. xml定义方法 <animation-list xmlns:android=" ...
随机推荐
- 下载恶意pcap包的网站
说几个我经常用的,免费的:1. Malware Traffic Analysis: http://www.malware-traffic-analysis.net/2018/index.htm ...
- python的tkinter,能画什么图?
今天从下午忙到现在,睡觉. 这个能绘点图的. import json import tkinter as tk from tkinter import filedialog from tkinter ...
- 基于Docker容器使用NVIDIA-GPU训练神经网络
一,nvidia K80驱动安装 1, 查看服务器上的Nvidia(英伟达)显卡信息,命令lspci |grep NVIDIA 05:00.0 3D controller: NVIDIA Corpo ...
- 项目Alpha冲刺(团队)-第八天冲刺
格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队) 团队名称:为了交项目干杯 作业目标:描述第八天冲刺的项目进展.问题困难.心得体会 队员姓名与学号 队员学号 ...
- Mybatis分页方法
使用方法https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse.md 使用 Maven 在 pom ...
- Hive UDF函数构建
1. 概述 UDF函数其实就是一个简单的函数,执行过程就是在Hive转换成MapReduce程序后,执行java方法,类似于像MapReduce执行过程中加入一个插件,方便扩展.UDF只能实现一进一出 ...
- learning java Charset 查看支持的字符集类型
import java.nio.charset.Charset; import java.util.SortedMap; public class CharsetTest { public stati ...
- Why We Changed YugaByte DB Licensing to 100% Open Source
转自:https://blog.yugabyte.com/why-we-changed-yugabyte-db-licensing-to-100-open-source/ 主要说明了YugaByte ...
- presto docker简单试用
starburstdata 团队提供了一个docker 版本的presto,其中已经内置了几个connectors tpch tpcds memory backhole jmx system pull ...
- circus && web comsole docker-compose 独立部署
问题的根本原因是web console 的bug(实际上还是python 对于依赖版本出来不明确) circus 进程docker 镜像 dockerfile FROM python:slim-str ...