以“人人都是产品经理”手机应用原型为例，说明了旋转过程中的侧画框和主图片放大功能，以及自动旋转和手动拖动的实时切换。（最后是彩蛋）
现在，在移动应用程序中，我们经常会看到放大前后画面的旋转效果。同时，它支持手动拖动和自动旋转。我以“人人都是产品经理”移动应用程序为例，制作了一个高保真的原型。
具体的GIF演示如下：
在这里，旋转表单是打开移动应用程序窗口的常用表单。具体特点如下：
（1）主要内容图片的两侧都有正面和背面图片的边框。
（2）打开窗口显示的主图片大小将自动放大。在这个原型中，主图片的高度高于正面和背面图片的高度。
（3）进入页面后，支持自动旋转。支持左右拖动。拖动后，如果没有进一步操作，将再次进入自动旋转状态。
思考
（1）为什么不使用动态面板的旋转功能
因为在两侧都有前后图片的帧效果，所以仅仅使用动态面板和不同状态之间的旋转无法实现这种效果。
（2）我可以使用动态面板更改图片坐标，同时将图片移动到内部以实现旋转效果吗
由于有“自动放大主画面，自动缩小副画面”的特殊效果，使用上述方法会非常麻烦。
（3）总体思路：
- 两边都有前后照片的框架效果——使用动态面板的遮罩功能；
- 手动和自动旋转切换效果——使用动态面板的“循环切换”功能；
- 图片循环--中继器实时排序功能；
- 主画面放大效果——尺寸变化的交互功能。
操作步骤
（1）准备动态面板NicholasTse。在属性中，取消选择“自动调整内容大小”选项。
（2）在mask的状态1中添加五个图片组件标记。不要导入特定图片并将其命名为1、2、3、4和5。因为这只是一张照片占位符确定位置，特定图片内容由后面描述的中继器分配。
将五幅图片排成一行，中间略微分开。第二张图片（名为2）调整为样本中主图片的大小（原型中主图片的大小为316宽）×高159），其他四张图片的高度低于图片2（原型中其他图片的宽度为366宽）×高144）。
然后将组合并为一个，放置位置正好。第一张图片在动态面板的左侧之外。
参见GIF：
（3）准备中继器
在页面的空白处（注意它不在动态面板中），拖动一个中继器删除里面的矩形。不放置任何组件，只需在数据集中创建两列，数字共有5行用于列输入12345，IMG列对应于我们需要显示的5张图片。
具体流程取决于GIF，这一点非常重要。
然后进来中继器继续在中继器上操作“装载”，加入互动，并根据“数字列”按升序排列。
接下来的互动非常重要。这是我们在中继器上正常的反向操作。在我们之前的大多数情况下，外部组件会为中继器分配值。现在，中继器将值分配给外部组件，如下所示：
关于案例1例如：
条件：如果“[[Item.index]]”等于“1”
说明：索引函数的用途：获取数据行的索引号。数字从1开始，从上到下增加1。它由系统自动生成，不随行数变化，就像Excel表格左侧的行号一样。
互动：在动态面板中设置NicholasTse的图片组合中的图1（第一行中的图片）==中继器中IMG列中第1行的图片，即我们在中继器IMG中导入的图片，即，图1在动态面板中的位置显示了IMG列中的图片内容，中继器中的索引=1。
说明：因为我们之前制作的动态面板中的图片是组件图标，没有导入特定的图片，现在将动态面板中的五张图片绑定到中继器中五个索引中的图片。之后，中继器的分拣功能将用于实现动态面板的循环效果。
以与3和4相同的方式设置图片。
（4）为动态面板NicholasTse添加交互
4.1向左拖动结束时
第一步：在动态面板中移动图片组合，并向左移动X坐标“相对”位置-322。这个值可以自己调整。在“动态”面板中拖动位置，然后自己计算起始位置和拖动位置之间的差值。请注意，选择了相对位置，即“通过”，因为在这种情况下，不需要设置Y坐标，再加上500毫秒的线性动画。
第二步：当图片组合向左移动一个网格时，动态面板图2的位置移出屏幕，并显示repeaterindex==2的图片内容。目前，它是中继器中的图片2。类似地，应在主屏幕上显示动态面板图3的位置，并显示中继器索引==3的图片内容。目前，中继器中是图片3，因此具有原始大图片的图片2的高度变小，而具有原始小图片的图片3变大。
第三步：等待550毫秒。在这里，我想重点讨论“等待”的交互作用。因为我们在上述步骤的交互中有一个500毫秒的线性动画设置，如果我们在后续动作中强调“同步”，也就是说，当执行上述500毫秒的线性动画时，我们可以在不添加“等待”交互的情况下执行其他动作。
如果强调“优先级”，即在500毫秒动画之后执行下一个操作，则必须在两个操作之间添加>500毫秒的等待时间。由于交互的下一个第四步将在上述所有操作完成后执行，因此应添加550毫秒的等待时间。
第4步：在大脑燃烧的时刻，我们需要重新排列中继器以产生旋转效果。
更新中继器的线路。更新条件为[[targetitem.Index==1]]，即中继器的第一行。注意上面提到的索引的含义。
将列更新为：数字列。
更新至：[[item.Number+targetitem]中继器.Datacount]]也就是说，第1行（targetitem.Index==1）中的列号的值为1。现在它被更新为1+5=6。这是targetitem中继器。Datacount指的是中继器中数据行的总数。这个中继器中有5行数据，所以它是1+5=6。
由于中继器在加载时是基于数字值按升序排列的，因此本步骤对原始图片顺序的更改如下：
在上面的顺序中，你可以通过冷静地抚摸来理解要点：
- 索引号是系统自己的行号，不能更改，就像Excel中左侧的一列数字一样。
- 数字列中的数字用于排序。
- 动态面板中的图片占位符用于确定位置。
现在，让我们看看效果：
第5步：你会发现，当我们拖动动态面板时，主窗口的图片从图2变为图3并放大，我们很快就会进入下一轮，即直接跳到图4，但我们的原型需要依靠人工主动拖动来旋转图片。因此，在完成位置重新排列后，我们将撤回预先播放的图片4。请注意，动画应选择为“无”。
第6步：重新排序后，动态面板中图片2的位置被拉回到主窗口，因此它被更改为大图片显示。类似地，图3在从窗口拉出的动态面板中的位置更改为小图片。请注意，动画应选择为“无”。
在这一步中，左滑动交互完成，图片旋转顺序的变化总结如下：
4.2以相同的方式将交互添加到动态面板-在向右拖动的末尾
详细步骤将不再重复。基于左右拖动，许多值与图片位置的计算正好相反。只需为你画一个关键点：
以下条件为：[[targetitem.Index==targetitem.Repeater.Datacount]]。
在这一步中，向右滑动，互动就完成了。
将“自动旋转”、“取消自动旋转”和“恢复自动旋转功能”的交互添加到旋转中
第一步：我们将一个名为auto的新动态面板拖动到页面中，并分别添加两个状态state1和State2。每个州都没有任何东西。
第二步：加载“动态面板自动”时，会添加自动旋转的交互。
第三步：当动态面板的自动状态发生变化时，在将包含图片的NicholasTse动态面板向左拖动到“触发器”之前添加交互，即每次状态变化时，自动将其向左拖动。
在这一步中，mask自动旋转动态面板的效果得以实现。接下来，我们将实现释放和恢复自动旋转的效果，即当手动拖动时，自动旋转停止，当不再拖动时，自动旋转恢复。
第4步（续）：在动态面板中，NicholasTse（包括带有图片组合的大型动态面板）“鼠标按下”，加入互动。
第5步：在动态面板NicholasTse（包括带有图片组合的大型动态面板）“鼠标出”，添加交互，即当不再执行操作时，在加载自动动态面板时重新触发自动旋转的交互。
此时，所有交互都已完成。
使用上述方法，我们可以产生许多网站的流行放大和旋转效果。
本文最初由@bobowang发表。每个人都是产品经理。未经允许不得转载
题图来自unsplash，基于cc0协议
最新评论