Day11：空间转换、动画

2024-06-03 21:12
文章标签 转换 day11 空间 动画

本文主要是介绍Day11：空间转换、动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目标：使用 3d 空间转换、动画丰富网页元素的呈现方式。


一、空间转换

1、空间转换简介
  • 空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同
  • 空间转换也叫 3D 转换
  • 属性：transform

在这里插入图片描述

2、平移
/* 使用 translate3d，小括号里面必须逗号隔开三个数 */
/* 如果只写 1 个或 2 个，不起作用  */
transform: translate3d(x, y, z);
/* 沿 X 轴方向  */
transform: translateX();
/* 沿 Y 轴方向  */
transform: translateY();
/* 沿 Z 轴方向  */
transform: translateZ();

（1）取值与平面转换相同，像素值、百分比。
（2）使用 translate3d，三个参数都必须写，且用逗号隔开。
（3）默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果，需要配合视距才能看到效果。

3、视距

作用：指定了观察者与 Z = 0 平面的距离，为元素添加透视效果，父级元素添加了视距，子级元素的 Z 轴平移（translateZ()）就能看到效果。

透视效果：近大远小、近实远虚。

属性：添加给父级，取值范围 800-1200。

perspective: 视距;

在这里插入图片描述

<head><title>透视效果</title><style>/* 视距属性必须添加给 直接父级 */.father {perspective: 1000px;/* perspective: 10000px; *//* perspective: 100px; */}.son {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.son:hover {/* transform: translateZ(-300px); */transform: translateZ(300px);}</style>
</head><body><div class="father"><div class="son"></div></div>
</body>

在这里插入图片描述

4、旋转
  • Z 轴：rotateZ()

沿 Z 轴旋转，Z 轴和平面旋转的中心点重叠，所以旋转效果和平面相同。

  • X 轴：rotateX()

沿 X 轴旋转。

  • Y 轴：rotateY()

沿 Y 轴旋转。

注意：平面旋转只有一个 rotate()，沿中心点旋转，默认情况，Z 轴经过平面的中心点，所以旋转效果相同。但是平面可以通过 transform-origin 修改中心点。

5、左手法则

作用：根据旋转方向确定取值正负。

使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向。

在这里插入图片描述

6、rotate3d（了解）
  • rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
  • x，y，z 取值为0-1之间的数字
7、立体呈现

作用：设置元素的子元素是位于 3D 空间中还是平面中。

属性名：transform-style

属性值：

  • flat：子级处于平面中，默认值
  • preserve-3d：子级处于 3D 空间

通过一个案例什么是子级处于 3D 空间中，先看效果图：

在这里插入图片描述

<head><title>立体呈现</title><style>.cube {/* background-color: pink; */position: relative;width: 200px;height: 200px;margin: 100px auto;transition: all 2s;/* 设置子级位于 3D 空间中 */transform-style: preserve-3d;/* 添加视距, 还能看到近大远小的效果 *//* perspective: 1000px; */}.cube div {position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front {background-color: orange;/* 设置向 Z 轴正方向平移 100px, 不旋转, 看不到效果 */transform: translateZ(100px);}.back {background-color: green;/* 设置向 Z 轴负方向平移 100px, 不旋转, 看不到效果 */transform: translateZ(-100px);}/* 鼠标悬停, 沿 Y 轴旋转, 能清楚的看到 front 和 back 元素 */.cube:hover {transform: rotateY(90deg);}</style>
</head><body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
8、小案例-3d导航

在这里插入图片描述

案例步骤

  1. 搭建立方体
    1. 绿色是立方体的前面
    2. 橙色是立方体的上面
  2. 鼠标悬停，立方体旋转

在这里插入图片描述

具体代码如下：

<head><title>3D导航</title><style>ul {margin: 0;padding: 0;list-style: none;}.nav {width: 300px;height: 40px;margin: 50px auto;}.nav ul {display: flex;}/* li 是立方体, 所以 transform-style: perserve-3d 属性添加给 li */.nav li {position: relative;width: 100px;height: 40px;line-height: 40px;transition: all 0.5s;transform-style: preserve-3d;}.nav li a {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;color: #fff;text-align: center;/* 去掉下划线 */text-decoration: none;}/* 立方体每个面都有独立的坐标轴，互不影响 */.nav li a:first-child {background-color: green;/* 绿色的面要当立方体前面, 向 Z 轴正方向平移高度的一半，即20px */transform: translateZ(20px);}.nav li a:last-child {background-color: orange;/* 先沿 X 轴旋转 90 度, 将橙色的面放平, 再往上平移 20px *//* 注意: 因为旋转会改变坐标轴, 此时的竖直轴是 Z 轴, 所以设置 translateZ(20px), 而不是 translateY(20px) */transform: rotateX(90deg) translateZ(20px);}.nav li:hover {transform: rotateX(-90deg);}</style>
</head><body><div class="nav"><ul><li><a href="#">首页</a><a href="#">Index</a></li><li><a href="#">登录</a><a href="#">Login</a></li><li><a href="#">注册</a><a href="#">Register</a></li></ul></div>
</body>

（1）立方体每个面都有独立的坐标轴，互不影响。
（2）旋转 rotate 会改变坐标轴，如果使用多重转换，先旋转，再平移的时候，要注意旋转后的坐标轴。比如：此案例中，橘色面先旋转 90deg，此时竖直方向变成了 Z 轴，不再是 Y 轴了，向上平移 20px 就是 translateZ(20px)。

9、缩放
transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

（1）如果使用 scale3d 进行缩放，三个参数都必须填写，如果只填写 1个 或 2个 都不起作用。
（2）参数值， 大于 1 表示放大，小于 1 表示缩小。


二、动画

  • 过渡：实现两个状态间的变化过程
  • 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
1、动画实现步骤

（1）定义动画

/* 方式一：动画只有 2 个节点， 可以使用 from 和 to 表示开始和结束 */
@keyframes 动画名称 {from {}to {}
}/* 方式二：动画很多个节点时，使用此方法 */
@keyframes 动画名称 {0% {}10% {}......100% {}
}

（2）使用动画

对需要使用动画效果的元素添加：animation: 动画名称 动画花费时长 ... 属性。

animation: 动画名称 动画花费时长 ...;
2、animation复合属性

在这里插入图片描述

提示：

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

animation 拆分写法

在这里插入图片描述

小案例-走马灯效果

在这里插入图片描述

<head><title>走马灯</title><style>* {padding: 0;margin: 0;}li {list-style: none;}img {display: block;width: 200px;}.box {margin: 100px auto;width: 600px;height: 112px;border: 5px solid #000;overflow: hidden;}.box ul {display: flex;animation: move 6s infinite linear;}/* 定义位移动画，ul使用动画，鼠标悬停暂停动画 */@keyframes move {0% {transform: translate(0);}100% {transform: translate(-1400px);}}/* 鼠标悬停到 box, 但是动画是在 ul 上, 所以是 .box:hover ul {} */.box:hover ul {animation-play-state: paused;}</style>
</head><body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><!-- 替身：填补显示区域的露白, 最后一帧和第一帧一样, 当动画播放完, 第一帧瞬间替换最后一帧, 实现无限循环效果 --><!-- 具体宽度和张数, 根据实际情况 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div>
</body>

无缝东海原理果：需要填补显示区域的露白，具体填补的宽度和张数，根据实际情况。

3、精灵动画

精灵动画也叫逐帧动画，动画的核心使用 animation-timing-function: step(数字) 属性。

在这里插入图片描述

使用精灵图和动画，实现如下效果：

在这里插入图片描述

制作步骤

  1. 准备显示区域

盒子尺寸与一张精灵小图尺寸相同。

  1. 定义动画

移动背景图，移动距离 = 精灵图宽度。

  1. 使用动画

steps(N)，N 与精灵小图个数相同 （steps(数字) 是速度曲线的逐帧动画）。

<head><title>精灵动画</title><style>div {margin: 200px;width: 140px;height: 140px;border: 1px solid #000;background-image: url(./images/bg.png);/* 精灵图是 12 张小图, 这里分 12 帧, 每一帧通过移动背景图位置, 展示一张精灵图, 实现跑步的效果 */animation: run 1s steps(12) infinite;}@keyframes run {from {background-position: 0 0;}/* 动画结束, 移动背景图位置 */to {background-position: -1680px 0;}}</style>
</head><body><div></div>
</body>
4、多组动画
animation: 动画一,动画二,... ...
;

每一组动画都是一套完整的动画，动画名称、动画时长、重复次数、动画执行方向等。

在这里插入图片描述

<head><title>多组动画</title><style>body {background-color: #eee;}div {margin: 200px;width: 140px;height: 140px;/* border: 1px solid #000; */background-image: url(./images/bg.png);animation:run 1s steps(12) infinite,move 3s forwards linear infinite;}/* 当动画的开始状态样式 跟 盒子默认样式相同，可以省略动画开始状态的代码 */@keyframes run {/* from {background-position: 0 0;} */to {background-position: -1680px 0;}}@keyframes move {/* 0% {transform: translate(0);} */100% {transform: translate(500px);}}</style>
</head><body><div></div>
</body>

当动画的开始状态样式 跟 盒子默认样式相同，可以省略动画开始状态的代码


三、综合案例-全民出游

通过今日所学，完成如下页面动画效果：

在这里插入图片描述

想要完整代码的，点击这里获取Day11综合案例完整代码。完全免费，仅供学习参考使用。



在这里插入图片描述

乾坤未定，你我皆是黑马


这篇关于Day11：空间转换、动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1028125。

相关文章

Python 标准库time时间的访问和转换问题小结

Python 标准库time时间的访问和转换问题小结

《Python标准库time时间的访问和转换问题小结》time模块为Python提供了处理时间和日期的多种功能,适用于多种与时间相关的场景,包括获取当前时间、格式化时间、暂停程序执行、计算程序运行时... 目录模块介绍使用场景主要类主要函数 - time()- sleep()- localtime()- g
阅读更多...
JAVA中整型数组、字符串数组、整型数和字符串 的创建与转换的方法

JAVA中整型数组、字符串数组、整型数和字符串 的创建与转换的方法

《JAVA中整型数组、字符串数组、整型数和字符串的创建与转换的方法》本文介绍了Java中字符串、字符数组和整型数组的创建方法,以及它们之间的转换方法,还详细讲解了字符串中的一些常用方法,如index... 目录一、字符串、字符数组和整型数组的创建1、字符串的创建方法1.1 通过引用字符数组来创建字符串1.2
阅读更多...
最好用的WPF加载动画功能

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验（UX）是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时，提供良好的用户体验（UX）是至关重要
阅读更多...
基于Python实现PDF动画翻页效果的阅读器

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主
阅读更多...
Java将时间戳转换为Date对象的方法小结

Java将时间戳转换为Date对象的方法小结

《Java将时间戳转换为Date对象的方法小结》在Java编程中,处理日期和时间是一个常见需求,特别是在处理网络通信或者数据库操作时,本文主要为大家整理了Java中将时间戳转换为Date对象的方法... 目录1. 理解时间戳2. Date 类的构造函数3. 转换示例4. 处理可能的异常5. 考虑时区问题6.
阅读更多...
基于C#实现将图片转换为PDF文档

基于C#实现将图片转换为PDF文档

《基于C#实现将图片转换为PDF文档》将图片（JPG、PNG）转换为PDF文件可以帮助我们更好地保存和分享图片,所以本文将介绍如何使用C#将JPG/PNG图片转换为PDF文档,需要的可以参考下... 目录介绍C# 将单张图片转换为PDF文档C# 将多张图片转换到一个PDF文档介绍将图片（JPG、PNG）转
阅读更多...
Qt QWidget实现图片旋转动画

Qt QWidget实现图片旋转动画

《QtQWidget实现图片旋转动画》这篇文章主要为大家详细介绍了如何使用了Qt和QWidget实现图片旋转动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、效果展示二、源码分享本例程通过QGraphicsView实现svg格式图片旋转。.hpjavascript
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

上回我们学到创建一个地形和一个人物，今天我们实现一下人物实现移动和跳起，依次点击，我们准备创建一个C#文件 创建好我们点击进去，就会跳转到我们的Vision Studio，然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类，继承自MonoBehaviour{private Rigidbo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2