美文网首页
余弦函数的曲线特性

余弦函数的曲线特性

作者: XLsn0w | 来源:发表于2017-09-05 15:12 被阅读26次

    一、实现效果

    通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间的变大。效果如下:

    二、原理说明

    1、上面的动画效果是根据余弦函数的曲线特性实现的,先看一下函数曲线y=cos(x),在区间-π/2 到 π/2的范围内,y的值在x的0的是后是最大的,左右则越来越小。

    2、可以将被滚动的卡片的高度按照0.0~1.0的比例放大缩小,效果如下:

    3、放置到手机屏幕上的效果如下:

    三、代码

    代码思路是假设控件的中心为原点,中轴线为x轴和y轴,当卡片的中心为距离y轴越近时,卡片长度缩短的比例越趋近1.0,当卡片中线距离y轴越远时,卡片长度缩短的比例越趋近0;

    如下图所示假设方块从位置1到位置2向左移动了长度a(写代码时需要做角度和长度的转换),那么在曲线上b的值为cos(a),假设b=0.8,那么就在位置2的时候把高度缩短为原来的0.8倍,以此类推越趋近于控件中轴线的位置卡片越长。(这里角度和长度的转换倍数依情况而定)

    相关文章

      网友评论

          本文标题:余弦函数的曲线特性

          本文链接:https://www.haomeiwen.com/subject/fiwujxtx.html