简单技巧，谁都能写出无限循环列表

Creator 2.x
#1

最终结果GIF.gif1132×666 1.5 MB

###核心思路###

这样一个动画循环列表，看起来代码写起来是不是比较麻烦。
实际上我们仔细分析，画面上一共只有5个元素在循环，它们所运行的轨迹和动画是一模一样的，如下图。

你是不是想到了，没错，就是 时间轴动画。

我们已经知道了动画有这种规律，只要每张卡片给挂一个组件，然后定义一个值progress，范围为 0~1。理论上我们只要控制 0 和 1的变化，就能控制动画停留在指定的位置。

刚好cc.Animation 有这个API: setCurrentTime，那么我们就能实现这个控制了。

只要 增加减少progress值 就能让卡片进行移动，而且计算 progress = (progress + 0.1)%1 就可以让 progress的值在0~1直接完美的循环衔接，避免了循环列表中复杂坐标的计算。

如果想要让美术改效果也异常方便，只要修改动画即可，具有高度拓展定制性，而且美术想要整出个什么 奇形怪状和复杂动画 的滚动列表都能完美实现。

###实践###

核心讲解完了，就是实践了。
首先创建一个动画clip，给卡片对象挂载 cc.Animation 组件，然后编辑这个clip。注意需要按照下图编辑动画的位置。分为起始位置(progress=0)、居中位置(progress=0.5)、结束位置(progress=1.0)。必须设置WrapMode 为 Loop 模式，防止动画播放到结束时停止。
这样通过 this.anim.setCurrentTime( clip.duration *progress) 调用，就能将动画clip的时间和progress关联起来。

动画教程.png1221×821 74.1 KB

  • 最后自己做个父节点的容器 放入这张卡片节点，复制出其他4卡片节点，并且初始化所有卡片的位置，均匀分布。
  • 监听父节点的鼠标移动事件，获取鼠标移动delta值
  • 使得容器下所有卡片progress 根据delta的增加和减少，就会一起按照设定的动画时间进行运动了。

具体思路已经讲完了，这篇文章是临时写的，如果有不清楚的地方，可以看看下面的项目代码:
(为了保证逻辑清晰，下面的例子只包含最基础的实现部分，操作体验没有完善，欢迎大家根据这个思路做出更好用的插件)
ScrollAnimation.zip (806.7 KB)

33赞
#2

好吧，我以前写的时候是自己去计算缩放和位置:joy:

#3

思路不错

1赞
#4

mark

#5

非常巧妙思路，必须给一个赞

#6

非常巧妙思路，必须给一个赞+1

#7

思路清晰

#8

巧妙!

#9

学到了

#10

卧槽，前两天就用代码写 累死了 也没写出来特别符合需求的

#11

豁然开朗，好思路

#12

大码的赞！

#13

感谢分享

#14

mark

#15

我也写过代码控制的，但是拓展性还是差，不能满足所有效果要求。而这种思路下，只要写一次，之后想怎么弄，修改动画就可以了。再来这种需求也不慌了。

#16

请教大佬如何实现，每次正好滚动一格呢，或者是松开手后滚动到中间。:blush:

#17

思路还不错

#18

先求出你要吸附的位置，再用lerp 过渡到目标位置就行了:
比如：屏幕有5个卡片，要捕捉一格就是 1/5 = 0.2， 所以一格目标是 targetProgress = progress - progres %0.2
在update 里 将 progress， 通过 progress = lerp(progress,targetProgress ,detlaTime) 持续计算，就会吸附到对齐卡片的位置

#19

我自己试了下，确实可以一次移动一格，但是如果移动的多了，会有偏移，越来越大。 不知我这样写是否有问题

image.png997×315 20.7 KB

#20

谢谢大佬，:grin:，小弟又有个疑问，这种循环列表如果我想同屏显示5个，但我有10多个物体，那么该如何显示后面的呢