[游戏开发] keyframes介绍与调用动画方法

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> keyframes介绍与调用动画方法 -> 正文阅读

[游戏开发]keyframes介绍与调用动画方法

keyframes介绍

@keyframes changecolor{

 0%{

  background: red;

 }

 50%{

  background: red;

 }

 100%{

  background: green;

 }

}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，

如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，

从而达到一种在不断变化的效果。

02调用动画

调用动画
	animation-name属性主要是用来调用 @keyframes 定义好的动画。
	需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），
	如果不一致将不具有任何动画效果。
	属性值：
	none:默认值。当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。
	“@keyframes”定义的动画名称。

eg：

视图页面代码
<body>
	<div><span></span></div>
</body>

外链CSS的代码
@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}

@keyframes around {
	 0%{
	 transform:translateX(0);
	}
	 25% {
	 transform: translateX(180px);
	}
	 50% {
	 transform: translate(180px, 180px);
	}
	 75% {
	 transform:translate(0, 180px);
	}
	 100% {
	 transform: translateY(0);
	}
}
div {
	width: 200px;
	height: 200px;
	border: 2px solid #C0F;
	margin: 100px auto;
}
div span {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #93C;
	animation-name:around;
	animation-duration:0.5s;
	animation-timing-function:ease;
	animation-delay:.3s;
	animation-iteration-count:5;
}

效果图：显示的页面为：

当我们进去页面（开启页面或者刷新页面）时，图中的小紫圆点就会围绕紫色的框顺时针旋转几圈，用时0.3S 。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1UxY1IKe-1646470051758)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220301110533922.png)]$

03 ----animation-duration设置动画播放时间

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，

是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
@keyframes toradius{
  from {
    border-radius: 0;
  }
  to {
    border-radius: 50%;
  }
}
div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  background: green;
  margin: 20px auto;
  
  animation-name:toradius;
  animation-duration:2s;
  animation-timing-function:linear;
  animation-delay:.5s;
  animation-iteration-count:infinite;
}
div:hover{
	animation-play-state:paused;
}

效果图：从一个正方形变化成一个圆形。变化时间太短，截屏跟不上。

在这里插入图片描述

animation-timing-function设置动画播放方式

animation-timing-function属性主要用来设置动画播放方式。

主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。

ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。

linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。

ease-in:动画开始的速度较慢，然后速度加快。

ease-out:动画开始的速度很快，然后速度减慢。

ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.

HTML代码：
<body>
<div><span></span></div>
</body>

CSS外链的代码：
@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
@keyframes move {
  0%{
    transform: translate(0);
  }
  15%{
    transform: translate(100px,180px);
  }
  30%{
    transform: translate(150px,0);
  }
  45%{
    transform: translate(250px,180px);
  }
  60%{
    transform:translate(300px,0);
  }
  75%{
    transform: translate(450px,180px);
  }
  100%{
    transfrom: translate(480px,0);
  }
}
div{
	width:500px;
	height:200px;
	border:2px solid #903;
	margin:100px auto;
}
div span{
	display:inline-block;
	width:20px;
	height:20px;
	background:#C0F;
	border-radius: 100%;
	animation-name:move;
	animation-duration:10s;
	animation-timing-function:ease-out;
}

效果图：刚开始的视图图片

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HkuekxDW-1646470051760)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220302153221603.png)]$

动画效果图，当刷新之后，紫色的点的运行路径。播放次数是一次。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqjlAucx-1646470051760)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220302153406942.png)]$

animation-iteration-count动画的播放次数

animation-iteration-count属性主要用来定义动画的播放次数。

1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，

这意味着动画将从开始到结束只播放一次。

2、如果取值为infinite，动画将会无限次的播放。

HTML代码：
<body>
<div><span></span></div>
</body>

CSS外链的代码：
@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
@keyframes move {
  0%{
    transform: translate(0);
  }
  15%{
    transform: translate(100px,180px);
  }
  30%{
    transform: translate(150px,0);
  }
  45%{
    transform: translate(250px,180px);
  }
  60%{
    transform:translate(300px,0);
  }
  75%{
    transform: translate(450px,180px);
  }
  100%{
    transfrom: translate(480px,0);
  }
}
div{
	width:500px;
	height:200px;
	border:2px solid #903;
	margin:100px auto;
}
div span{
	display:inline-block;
	width:20px;
	height:20px;
	background:#C0F;
	border-radius: 100%;
	animation-name:move;
	animation-duration:10s;
	animation-timing-function:ease-out;
	animation-iteration-count:infinite;
	/*animation:move 10s ease-in infinite;*/
}

效果图：刚开始的视图图片

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jL9q66QY-1646470051760)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220302153221603.png)]$

动画效果图，当刷新之后，紫色的点的运行路径。紫色的点会一直沿着这条路径不停的运行。播放次数是多次。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9BjgKBGE-1646470051761)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220302153406942.png)]$