css animation 平移,CSS动画相关(打字动画、逐帧动画、环形路径平移)
一、 逐帧动画
很多时候,我们需要一个很难只通过CSS属性来实现的动画,比如一个复杂的进度提示框,在这样场景下基于图片的逐帧动画才是王道。
看到动画,你可能会想:[直接用GIF不就得了嘛,搞这么复杂的CSS干嘛]。不用GIF肯定是GIF有短板。呐,短板如下:
GIF颜色被限制在256色
不能实现半透明效果
无法在CSS层修改动画的参数,例如持续时间、循环次数等,GIF动画一旦生成这些参数就固定在文件内部,若想修改只能用PS等软件重新生成,可移植性虽好,但调试过程简直就是灾难
解决方案
假设我们将动画中的所有帧都合并到一张PNG图片中了,
兔斯基揉脸.png
将其设置为background,通过改变background-position的值就可以显示出每一帧图片。
代码
@keyframes loader {
0% {
background-position: 0px 0%;
}
100%{
background-position: 0px -400%;
}
}
div{
width: 32px;
height: 35px;
background-image: url(http://www.web-tinker.com/share/兔斯基揉脸.png);
animation: loader .4s steps(4) infinite;
}
注意点!
animation中的steps()属性较为少见,与贝赛尔曲线不同的是steps()会根据你指定的步进数,把整个动画切分为多帧,而且整个动画会在帧与帧之间硬切,不会有任何插值处理
效果
动画
二、 打字动画
打字动画即让字符逐个显现,模拟出一种打字的效果,用等宽字体可以营造出一种终端命令行的感觉。
CSS解决的思路是:让容器的宽度成为动画的主体,但仅适用于单行文本
代码
@keyframes typing {
from {
width: 0;
}
}
@keyframes caret {
50% {
border-color: currentColor;
}
}
h1 {
width: 15ch;
overflow: hidden;
white-space: nowrap;
border-right: .05em solid;
animation: typing 4s steps(15), caret 1s steps(1) infinite;
}
Ciger is a handsome boy
let text = document.getElementById('text');
let len = text.textContent.length;
text.style.width = len + 'ch';
text.style.animationTimingFunction = `steps(${len}),steps(1)`;
这里用h1标签包裹文字,设置一个默认宽度15ch,ch表示数字“0”的宽度,对于等宽字体来说,我们用ch单位来表达这个标题的长度,实际上就是字符的个数。这样写死宽度是不合理的,万一字符变多了还得改,于是设置标题宽度这我们得用到一点JS。
let text = document.getElementById('text');
let len = text.textContent.length;
text.style.width = len + 'ch';
text.style.animationTimingFunction = `steps(${len}),steps(1)`;
这段JS获取了文本内容的长度,因我们单位用了ch,字符长度即宽度,然后设置其style
画龙点睛的一步就是给他加上一个闪烁的光标,这里用了右边框来模拟光标效果,颜色为currentColor,这个属性的意思是“当前的标签所继承的文字颜色”,这样边框颜色就会自动与文字颜色保持一致。
上两张效果图
三、 沿环形路径平移的动画
不知道大家有没有见过一些网站的404页面,在浩瀚的宇宙中心有一个环形轨道,一个个星球绕着这个轨道运转,而自身的角度不发生变化。
类似的例子还有很多,下面是一个简化版本。用CSS让一副头像图片沿着环形路径动起来。
代码
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.round {
width: 200px;
height: 200px;
border-radius: 100%;
background: #6959CD;
padding: 20px;
}
.move {
width: 30px;
height: 30px;
margin: 0px auto;
border-radius: 50%;
animation: spin 5.5s infinite linear;
transform-origin: 50% 100px;
}
.move>img {
display: block;
width: inherit;
height: inherit;
border-radius: 50%;
animation: inherit;
animation-direction: reverse;
}
@keyframes spin {
to {
transform: rotate(1turn);
}
}
关键点是 transform-origin 以及 animation-direction: reverse
我们只设置了一个animation:spin,让其旋转一周。注意最外层的div,是一个圆形,直径是其宽/高度300px,所以半径为150px。
若直接给图片添加
animation:spin 3s infinite linear; transform-origin:50% 150px;
这样不仅让头像沿着环形路径旋转,头像自身也会旋转,这不是我们要的效果。
所以animation-direction发挥作用了,给头像加上,让它往相反的方向转回去,这样就抵消了,相当于没有旋转。
效果
沿着环形轨迹旋转
css animation 平移,CSS动画相关(打字动画、逐帧动画、环形路径平移)相关推荐
- android 逐帧动画自动播放以及逐帧动画与渐变动画结合的停止问题
关于逐帧动画的自动播放: android 逐帧动画一般不能直接在onCreat()方法里直接调用.start(),否则只是播放动画的第一帧,可重写onWindowFocusChanged(boolea ...
- Android 动画(四)---逐帧动画
1创建逐帧动画资源---文件res/drawable/animated_rocket.xml <?xml version="1.0" encoding="utf-8 ...
- CSS或JS实现逐帧动画方案
什么是逐帧动画 逐帧动画是一种在连续的关键帧中分解动画动作,即在时间轴的每一帧上绘制不同内容并使之连续播放成动画的一种常见的动画形式.与CSS关键帧动画不同的是,逐帧动画每一帧需要自行定义:关键帧动画 ...
- css动画帧动画效果,CSS3动画之逐帧动画
什么是逐帧动画 要了解 CSS3 逐帧动画,首先要明确什么是逐帧动画. 看一下维基百科中的定义: 定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果. 简而言之 ...
- Android 动画解析(一) 逐帧动画(Frame Animation)
简介 开发Android的同学都知道,Android中的动画有逐帧动画(Frame Animation).补间动画(Tween Animation)以及属性动画.其中,逐帧动画(Frame Anima ...
- html5+css3实现动画、逐帧动画效果
上篇博文中讲明了html5+css3实现2D-3D动画效果,介绍了html5中2d.3d的运用,顺便简明的提到了动画,而本篇将更加详细的说明动画的各运用及说明. 首先我们需要了解css3中动画的意思, ...
- 逐帧动画和补间动画的使用场景(二)
2019独角兽企业重金招聘Python工程师标准>>> 逐帧动画和补间动画的使用场景(二) 上一节我们详细的介绍了补间动画和逐帧动画的基本使用,如果你对这还不熟悉的请看这篇文章: h ...
- Android动画学习之补间动画和逐帧动画,移动互联网app开发
| fromXScale | 指定动画开始时X轴上的缩放系数 | 值为1.0表示不再变化 | | fromYScale | 指定动画开始时Y轴上的缩放系数 | 值为1.0表示不再变化 | | toXS ...
- 安卓学习笔记33:实现逐帧动画
文章目录 一.逐帧动画 (一)逐帧动画概念 (二)逐帧动画实现方式 二.利用动画资源文件实现逐帧动画 - 功夫熊猫 (一)运行效果 (二)涉及知识点 (三)实现步骤 1.创建安卓应用[PandaAni ...
- Android逐帧动画和补间动画
本篇博客来看一下Android中的逐帧动画和补间动画. 一.逐帧动画 逐帧动画也叫Drawable Animation. 在Android中实现逐帧动画,就是由设计师给出一系列状态不断变化的图片, 开 ...
最新文章
- fcm算法的MATLAB实现,FCM算法的matlab程序(初步)
- Linux服务器优化(转)
- 通过OAuth 2.0和Okta使用安全的服务器到服务器通信构建Spring Boot应用
- autocad2014 菜单栏 闪退_AutoCAD2014闪退的原因与处理办法 1打开就闪退怎样办
- “指向指针的指针”的作用和应用
- MIP 2016年终总结
- c语言mysql 学生信息管理系统_学生信息管理系统学生时代小作品源码(C语言版)...
- 在firefox中backspace返回键不能回到之前的页面
- 洛谷——P1085 [NOIP2004 普及组] 不高兴的津津
- 使用Eclipse开发Java EE应用
- 舆情监测系统哪家好?
- UE4 HTC VIVE手柄按键对应Montion Controller 蓝图的命令
- 人类的终极目标是什么?
- 网站服务器停止运行,服务器已停止响应是怎么回事
- Python爬虫爬取哈利波特小说,并用数据可视化分析出场人物
- ipa segmentation
- 焊接好的CH340G芯片不工作
- 微信公众平台开发(49)物联网硬件设备控制技术
- Jmeter测试最大在线用户数
- ceph monitor 选举leader和peon的过程