贴代码不如贴思路.
我记录一下, 我在编写这个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 谁发生变化