一崇棠、實現(xiàn)效果
通過拖拽屏幕實現(xiàn)卡片移動买优,左右兩側(cè)的卡片隨著拖動變小上枕,中間的變大咐熙。效果如下:
1辨萍、上面的動畫效果是根據(jù)余弦函數(shù)的曲線特性實現(xiàn)的,先看一下函數(shù)曲線y=cos(x),在區(qū)間-π/2 到?π/2的范圍內(nèi)棋恼,y的值在x的0的是后是最大的,左右則越來越小。
2爪飘、可以將被滾動的卡片的高度按照0.0~1.0的比例放大縮小,效果如下:
3义起、放置到手機屏幕上的效果如下:
代碼思路是假設(shè)控件的中心為原點师崎,中軸線為x軸和y軸默终,當(dāng)卡片的中心為距離y軸越近時,卡片長度縮短的比例越趨近1.0抡诞,當(dāng)卡片中線距離y軸越遠(yuǎn)時穷蛹,卡片長度縮短的比例越趨近0;
如下圖所示假設(shè)方塊從位置1到位置2向左移動了長度a(寫代碼時需要做角度和長度的轉(zhuǎn)換),那么在曲線上b的值為cos(a),假設(shè)b=0.8,那么就在位置2的時候把高度縮短為原來的0.8倍昼汗,以此類推越趨近于控件中軸線的位置卡片越長肴熏。(這里角度和長度的轉(zhuǎn)換倍數(shù)依情況而定)