Animation动画

什么是动画？

"小人书"就很好的诠释了什么是动画，只要翻页的速度足够快，画面切换足够流畅，这就形成了动画。而每一页都是一个关键的动作或者场景，因此每一页就称为关键帧，而每一秒我们能翻的页数越多，那么画面越流畅，我们把每一秒切换图片的数量称为帧数。

完成自动播放的动画方式：

编写JavaScript脚本来完成动画
可以使用flash技术完成动画的设计
可以借助某些动画标签，比如marquee
h5中提供了canvas技术（绘图技术）来完成动画的设计
CSS3提供的animation动画，可以完成动画的自动播放

animation动画的基本使用

css3动画通过animation来控制
步骤：
1. 利用@keyframes来定义动画所有的关键帧，并且取名
2. 给使用动画的盒子添加animation属性，来指定我们动画的名字和执行的时间

animation关键帧

将动画拆分为多个步骤，每个步骤就是关键帧，多个步骤连接起来，形成一个完整动画
css3 animation里面使用关键帧：需要定义关键帧

定义关键帧

语法：

@keyframes 动画的名称{from{//动画开始的状态}to{//动画结束的状态}
}
也可以使用百分比，当动画执行到某个百分比时，是什么状态
@keyframes 动画名称{0%{}20%{}100%{}
}使用动画
animation：动画的名称 动画的时长；

0%代表from，to代表100%

每一帧动画的执行时间和两帧之间动画百分比有关，跨度越大，分配的时间越多
时间计算公式：总的时间*两帧跨度的百分比

动画的属性控制（速度、方向等）

用于控制动画中的速度，播放次数、方向等操作
基本属性
- anination-name:动画的名称
- animation-duration:动画的执行时长
- animation-timing-function:控制动画的执行速度
  - ease：默认值低速开始，然后变快，以低速结束
  - linear：匀速
  - ease-in
  - ease-out
  - ease-in-out
  - cubic-bezier（x1，y1，x2，y2）
- animation-delay:动画的延迟时间，默认0s
- animation-iteration-count:控制动画的执行次数
  - n 代表数字，定义动画播放多少次
  - infinite:无限次播放
- animation-direction:控制动画的播放方向
  - normal：默认值，动画正向播放
  - reverse：动画反向播放
  - alternate：方向为：去正往反，来回执行。最后回到初始位置
  - alternate-reverse：与alternate相反。最后回到初始位置
- aniamtion-fill-mode：设置第一帧或最后一帧是否作用在元素上
  - forwards:将最后一帧作用在元素上
  - backwards:恢复初始设置
  - both:将第一帧和最后一帧同时作用在元素上
- animation-paly-state：控制动画播放与否（一般配合hover使用）
  - running：正常播放
  - paused：暂停
复合属性
```
 animation: name duration timing-function delay iteration-count direction fill-mode;
```
- 复合属性写两个时间，前面代表执行时间，后面代表延迟时间
案例：

   <style>body{background-image: url("image/photo.jpg");background-repeat: no-repeat;background-size: cover;/* overflow: hidden; */margin: 0;}body,html{height: 100%;}div{position: absolute;top: 0;left: 0;width: 3300px;height: 100%;background-size: contain;background-repeat:repeat-x;animation:move 20s infinite linear;}.fog1{background-image: url("image/fog-1.png");}.fog2{background-image: url("image/fog-2.png");}@keyframes move {0%{left: 0px;}100%{left: -1580px;}}</style></head><body><div class="fog1"></div><div class="fog2"></div></body>

练习

骰子动画

加载动画

<style>#loading {background-color: #374140;height: 100%;width: 100%;position: fixed;z-index: 1;top: 0px;}#loading-center {width: 100%;height: 100%;position: relative;}#loading-center-absolute {position: absolute;left: 50%;top: 50%;height: 150px;width: 150px;margin-top: -75px;margin-left: -75px;}.object {width: 20px;height: 20px;background-color: #FFF;float: left;margin-right: 20px;border-radius: 50%;}#object_one{/* animation复合属性 */animation: load 1.5s infinite;}#object_two{/* animation复合属性 */animation: load 1.5s infinite;animation-delay: 0.25s;  }#object_three{/* animation复合属性 */animation: load 1.5s infinite;animation-delay: 0.5s;  }/* 关键帧*/@keyframes load{0%{transform: scale(1);}100%{transform: scale(0);}}
</style><div id="loading"><div id="loading-center"><div id="loading-center-absolute"><div class="object" id="object_one"></div><div class="object" id="object_two"></div><div class="object" id="object_three"></div></div></div>
</div>

轮播图

banner动画

ct_one">

```

轮播图

banner动画

[外链图片转存中…(img-zvBCM0Mm-1663674359460)]

20-animation动画相关推荐

安卓开发20：动画之Animation 详细使用-主要通过java代码实现动画效果
AlphaAnimation 透明效果实现: activity_main.xml中仅仅是一个简单的图片,下面的例子都会使用这个xml: <RelativeLayout xmlns:android ...
java运用ascii实现动画效果_安卓开发20：动画之Animation 详细使用-主要通过java代码实现动画效果...
AlphaAnimation 透明效果实现: activity_main.xml中仅仅是一个简单的图片,下面的例子都会使用这个xml: xmlns:tools="http://schemas ...
CSS3 Animation动画的十二原则
[本文系外部转贴,原文地址:https://cssanimation.rocks/principles/] 编者注:鉴于KM不能插入iframe直接演示效果,只能给链接跳转页面看代码了:(Animat ...
python【Matlibplot绘图库】Animation动画（真の能看懂~！）
文章目录 1 代码 2 效果 3 解释 1 代码 from matplotlib import pyplot as plt from matplotlib import animation impor ...
【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
文章目录 ◯.AnimatedWidget 组件引入一.创建 AnimatedWidget 动画组件二.创建动画控制器三.创建动画四.动画运行五.完整代码示例六.相关资源 Animated ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
第100天：CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由"keyframes& ...
jQuery源码解析（5）—— Animation动画
闲话 jQuery的动画机制有800行, 虽然不如样式的1300行,难度上却是不减.由于事前不了解animate接口的细节使用规则,看代码期间吃了很多苦头,尤其是深恶痛绝的defaultPrefilt ...
core Animation动画
在iOS中,图形可分为以下几个层次:越上层,封装程度越高,动画实现越简洁越简单,但是自由度越低:反之亦然.本文着重介绍Core Animation层的基本动画实现方案.在iOS中,展示动画可以类比于显 ...
SVG SMIL animation动画详解
一.SVG SMIL animation概览 1. SMIL是什么? SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体 ...

20-animation动画

Animation动画

什么是动画？

完成自动播放的动画方式：

animation动画的基本使用

animation关键帧

定义关键帧

动画的属性控制（速度、方向等）

练习

骰子动画

加载动画

banner动画

banner动画

20-animation动画相关推荐

最新文章

热门文章