仿天猫超市珍藏抛物线动画东西库

DEMO

See Demo!

东西库GIT地点

get on GIT 求波star :)

怎样完成

难点在于在不超越屏幕局限的前提下,只管抛得更高

团体思绪大抵以下:

我们晓得抛物线的方程式为: 《仿天猫超市珍藏抛物线动画东西库》

如今我们晓得抛物线上的两个点(动画的出发点和尽头)以及极值点的y值(由于要恰好打仗屏幕顶部,所以可以晓得这个值)来解这个方程,取得a, b, c

抛物线极值点:(《仿天猫超市珍藏抛物线动画东西库》《仿天猫超市珍藏抛物线动画东西库》

当抛物线的方程肯定以后,我们就可以画出这条轨迹了。

关于抛物线的相干学问可以参看:抛物线

关于缓动结果

假如我们须要全部动画是一个动感的结果而不是线性的实行完全部动画,这个时刻就须要缓动函数了,相似CSS3中的animation-timing-function,我们给这个东西库增加了一个浅易的完成,可以支撑easeIn, easeOut, easeInOutlinear,假如要完成自定义越发庞杂的结果,须要运用贝塞尔曲线,感兴趣的朋侪可以研讨下。

在动画中我们平常依据动画已举行的时候盘算出动画完成的进度,然后线性的更新动画的一个参数值(在我们的动画内里我们线性的更新x轴的值,然后盘算y坐标),故全部动画历程看上去也是线性活动的,缓动函数的作用在于可以完成一种映照,把x的值依据我们定义的缓动函数映照成另一个值,突破现在这类线性的状况。平常我们会对值先举行归一化处置惩罚然后传入缓动函数举行映照。

缓动函数应当具有以下几点请求(归一化后):

  • 传入为0,输出应当为0

  • 传入为1,输出应当为1

  • 函数应当是一连的

《仿天猫超市珍藏抛物线动画东西库》《仿天猫超市珍藏抛物线动画东西库》

更新纪录

2016-10-08

  • 增加缓动函数结果

    原文作者:musiq1989
    原文地址: https://segmentfault.com/a/1190000007055340
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞