余弦函数的曲线特性

一、实现效果

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

二、原理说明

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倍,以此类推越趋近于控件中轴线的位置卡片越长。(这里角度和长度的转换倍数依情况而定)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 高级钳工应知鉴定题库(858题) ***单选题*** 1. 000003难易程度:较难知识范围:相关4 01答案:...
    开源时代阅读 11,267评论 1 9
  • 一、实验目的 学习使用 weka 中的常用分类器,完成数据分类任务。 二、实验内容 了解 weka 中 explo...
    yigoh阅读 12,767评论 5 4
  • 又是一部韩国电影。 为什么选择韩国电影?他们的电影没有欧美电影的大场面,没有日本电影那样“引人入胜”,也没有国产电...
    大叔是个loli控阅读 3,767评论 0 1
  • 一个人来到这个世界,一个人离开这个世界。注定人生就是一个人的狂欢。 我是一个很害怕孤单的人,有时我宁可待在房间里也...
    猫咪如意阅读 2,833评论 0 0
  • 01 红烧肉 用料: 五花肉500克、生姜小块、蒜10克、葱10克、盐5克、冰糖7粒、八角2个、香叶2片、料酒20...
    生活有易阅读 1,651评论 0 1