制作3D React Carousel

我里面有些东西令人惊讶，但精美的3D界面。 它们的功能像陀螺仪的功能菜单 ，技术的演示者（如著名的令人惊奇的元素周期表演示）一样，或像Ana Tudor或Hakim El Hattab的笔一样， 突破了当前CSS技术的局限性， 都 没有关系 。 我喜欢他们所有人，并寻找借口在我的应用程序中使用类似内容。

几个月前，我尝试了React，这让我惊讶，我很快就变得高效了，使我能够专注于编写应用程序。 我很快适应了引导程序主题，精心安排了交互性，并立即完成了应用程序界面。 但是我感到有些东西丢失了。 只要花很少的精力就可以完成基本的外观和感觉，我内心的声音就会变得不满意。 球门柱被移动了，我想要动画。

“如果一切似乎都受到控制，那么您的步伐就不够快。”

―马里奥·安德雷蒂

学习绳索

我决定使用React制作3D轮播，作为一个独立的练习，该框架如何与小型但可自我维持的组件一起工作。 我的第一个规则是添加和删除元素，更改布局或旋转圆盘传送带时动画不会重置。 甚至在商业轮播中也缺少的这种硬约束使得根本的设计有所不同。

起初，我看了一下React ReactCSSTransitionGroup，但不知何故，论坛上关于添加和删除元素的评论令人恐惧。 因此，我开始使用有关3D转换的Dave DeSandro 教程进行手动工作。 使用建议的布局绘制轮播并不是很难，而且我设法将DeSandro CSS规则转换为JavaScript函数也没有太大问题。

观看演示

实现3D效果

轮播由以下四个元素组成：

1.包含图像和控件的部分，具有固定的长度和宽度，包含透视图及其相对于父元素的部分。

// Static styling
.react-3d-carousel {
width: 400px;
height: 300px;
position: relative;
perspective: 1000px;
}

2.包含所示图形的

div

，其

position

是

absolute

并且具有

transform-style: preserve-3d

属性。 为了使轮播与观看者保持正确的距离，该元素在Z轴上平移。

// Static styling
.react-3d-carousel .carousel {  // image container
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
// Dynamic styling  example
transform:translateZ(-347px);

对于棱镜布局距离，计算为多边形的振幅。 对于经典的轮播布局，我尝试了一些公式，直到做出看起来不错的东西为止。

function apothem(width, sides) {
return Math.ceil(width / (2 * Math.tan(Math.PI / sides)));
}
function magic(width, sides) {
return Math.round(width * Math.log(sides))
}

3. Figure标签代表所示的单个图像。 根据提供的布局和动画状态动态设置样式。 由于功能定义太大，请检查布局文件以进行相应的计算。 下面，我将以布局函数生成的元素样式为例，介绍静态样式。

// Static styling
.react-3d-carousel .carousel figure { // single image
display: block;
position: absolute;
width: 400px;
height: 300px;
}
// Dynamic styling
// Prism layout figure example styling
transform: rotateY(1.047rad) translateX(0px) translateZ(347px);
opacity:  1;
// Classic layout figure example styling
transform: rotateY(0rad) translateX(620.94px) translateZ(358.5px); opacity: 1;

4.控件-当前，控件是静态样式，使用两个白色人字形作为背景，如果您有其他首选项，只需将CSS更改为style.css文件。 以下是代表定向V形的代码段。

.react-3d-carousel   .prev:before {
content: url("chevron_left_white.png");
}
.react-3d-carousel    .next:before {
content: url("chevron_right_white.png");
}

添加布局

如果要添加其他布局，例如说要在Royal 3D旋转木马或Ultimate 3D旋转木马的星形拓扑中使用的布局，则必须实现两个功能，这些功能可以计算距查看器的距离和每个图形的位置。

// Receives width of the image and number of sides returns
// distance from the viewer to the carousel
function distance(width, sides) {
// Receives width of the image, images and initial rotation
// of the carousel, return array of all images with their
// corresponding transformations & rotations
function figures(width, images, initial) {

这使得轮播可以通过其他布局进行扩展，但是用户将不得不找到一种将布局表示为功能的方法。

管理状态

另一方面，从一开始就管理状态是有问题的。 转盘在旋转时以及在添加或移除侧面时处于中间状态，由于动态更改布局的能力（完全改变了转盘的外观）而变得更糟。 我的第一种方法是使用动画库或引擎来管理状态。 有一些不错的库可以使我的生活更轻松，但是由于轮播是一个组件，我非常熟悉强迫人们添加比实际需要的功能大很多的依赖。 由于此刻RxJS看起来并不那么繁重，因此我使用Robert Penner的 Paul Taylor端口缓和函数并将Ramda用于低级函数任务进行了第一次迭代。

轮播状态存储在库文件中，该文件使用户能够传递新属性和/或旋转轮播。

删除依赖

代码可以正常工作，但是混乱不堪，RxJS和Ramda仍然感到负担沉重，因此在第二次迭代中，我提取了所需的所有功能并重构了代码。 动态更改布局的能力使我进行了非常实用的设计。 直接使用requestAnimationFrame会发现一些非常有趣的问题，例如为什么我的代码仅被调用一次。

发布和清理

我的组件已经准备就绪，因此我将开发过程中使用的演示作为示例进行捆绑，并将其发布在Github上。 最初，我有很多未预见的问题，其中大多数是JuhoVepsäläinen提出的，并提供了如何解决这些问题的有用建议。 当另一个用户无法安装转盘时，我感到非常惊讶。 但是我猜想错误会伴随用户出现，最终我设法修复了它们并使转盘可用。

观看演示

结论

轮播代表了单向数据流和管理中间状态的能力的微型示例。 这只是迈向下一代用户界面的一小步，在该界面中，动画将是交互的基础，而不是让用户欣赏的糖果。 随着硬件处理速度的提高，浏览器已经准备就绪，其余的取决于软件。

您可以在github上找到源代码，并在codepen上查看完成的轮播。 尝试更改布局，缓和功能，边数，当然还要旋转转盘。

.x-secondary-small { display: none; } @media only screen and (max-width: 600px) { .x-secondary { max-height: none; } .x-secondary-large { display: none; } .x-secondary-small { display: block; } }

翻译自: https://davidwalsh.name/3d-carousel