会变化的无限循环ScrollView

贴代码不如贴思路.

我记录一下, 我在编写这个UI时的处理思路.

横向无限循环, 是UIScrollView实现的. 这里视为已经得到实现, 在该基础上, 变化为新的效果

现在将它改造下, 已适配新的效果(中间大, 两边小)

里面有V1, V2, V3, 3个ImageView.

V2在中间, V1, V3在两边. 

因为V1, V3的坐标都是根据V2的位置而变化的. 所以先画出V2.

V2的位置, 还是画在最中间,调整好尺寸, 再带上圆角.

然后需要确定 V1, V3缩小多少, 尺寸多少, 左右偏移多少, 将V1, V3画在V2的两边

然后重写scrollView的scrollViewDidScroll(scrollView滚动时触发的方法)方法

在ScrollView 滑动的时候, V1, V2, V3的尺寸, 都会变.

V2的尺寸, 根绝向左, 或者向右滑动, 会变成小图尺寸, 相反的V1/V3的尺寸会变成大图尺寸

在ScrollView滑动的时候, 需要记录 X的变化量

X的变化, 就是contentOffSet的X值得变化. 根据X和ScrollView的width比较, 就可以知道当前滑动了百分之多少, 然后让V1, V2, V3的尺寸变化. (

value = contentOffSet.x / contentOffSet.width, value. 既是滑动了百分之多少.

因为我设置的V2 在中心, 所以默认value应该一开始就是1

value 从1 向2增加, 说明V2在逐步向左变小淡出, V3正在逐步变大进入

value 从1 向0减少, 说明V2在逐步向右变小淡出, V1正在逐步变大进入

) 

这样, 滑动的时候, 就可以实现 V2变小. V1或者V3变大了 

假设大尺寸为BFrame, 小尺寸为SFrame

那么V2的width变化为  BFrame.width - (BFrame.width - SFrame.width) * (1 - scale)

那么V2的height变化为  BFrame.height - (BFrame.height - SFrame.height) * (1 - scale)

那么V1 / V3的width变化为  SFrame.width + (BFrame.width - SFrame.width) * (scale)

那么V1 / V3的height变化为  SFrame.height + (BFrame.height - SFrame.height) * (scale)

scale的值, 是从 0 -> 1的

然后需要处理, 如何让任何变动, 最终都使得scale的值, 是由 0 -> 1变动,

需要用到大量的 if else

V2向左划出的话, value 是从1.0 -> 2.0的趋势,

此时, scale = value - 1. (当value > 1, 即scale = value - 1)

V2向右划出的话, value 是从1.0 -> 0的趋势,

此时, scale = 1 - value. (当value < 1, 即scale = 1 - value)

这时候, 就知道V2 的变化趋势了, 

下面, 要同时处理V1, V2, V3.

V1是根据value在 0 ~ 1 时,  发生变化.

V2是根据value在 0 ~ 2 时, 发生变化

V3是根据value在 1 ~ 2 时,  发生变化.

在for循环中, 根据value的值, 重新绘制 受影响的view就行了

我们需要的是逐步出现的V1 / V3 变大. 两者中显示变多的那一个尺寸变大. 另一个不变

所以我们需要知道他是向哪个方向滑动的,

这时候还是根据 contentOffSet的X值得变化 可以判断出他的朝向. ( 

float v;

float x = contentOffSet.x; 

if (v < x) {

此次x的值, 小于上一次的值, 所以contentOffSet.x 在变小. V2在向右变小

} else if (v > x){

此次x的值, 大于上一次的值, 所以contentOffSet.x 在变大. V2在向左变小

}

v = x;

根据这个情况, 就可以处理, 当V2变化时, V1和V2 谁发生变化