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

余弦函数的曲线特性

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

相关文章

  • 余弦函数的曲线特性

    一、实现效果 通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间的变大。效果如下: 二、原理说明 1、上面...

  • 微博红包加载动画

    新浪微博的红包加载动画,过年在家里抢红包看到这个效果,就顺手仿照着写了一下。主要还是利用余弦函数曲线的特性实现的。...

  • 双曲函数(一)——双曲余弦函数

    双曲余弦函数定义 双曲余弦函数的定义是这样的。 具体这个定义是怎么来的,可能和双曲线有关系,这里我就不商讨了。而且...

  • canvas中的曲线运动

    一 :曲线运动 三角函数相信大家在高中都有接触过,比如 正弦、余弦、正切等。这里我就简单介绍下正弦函数的运动轨迹。...

  • 自学Python:绘制余弦曲线

    用Python程序来画标准的图线是最标准了,下面试着绘制一条0~360°(2π)的余弦函数cos(x)曲线。 下面...

  • Android中的贝塞尔曲线简单认识应用-波浪效果

    先来看看最终效果 波浪效果是由两条波浪相向移动产生的 波浪可看成正余弦函数图 这里采用贝塞尔曲线的画法画出函数图 ...

  • 波浪效果

    在工程中碰到了需要实现波浪动画。只知道是使用正弦函数和余弦函数,CADisplayLink来实现。 正弦,余弦函数...

  • C语言(画一个余弦函数)

    1.三角函数说明 余弦函数说明 2.下面我用C语言给大家画一个余弦函数 这是一个彩色打印出来的余弦函数图像,在屏...

  • python3笔记之math模块

    import math dir(math)查看函数列表 cos(x) #余弦 acos(x) #反余弦 sin(x...

  • 第十七章 SQL函数 ACOS

    第十七章 SQL函数 ACOS 一个标量数值函数,返回给定余弦的弧余弦(以弧度为单位)。 大纲 参数 numeri...

网友评论

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

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