当前位置: 首页 > news >正文

仿天猫超市收藏抛物线动画工具库

DEMO

See Demo!

工具库GIT地址

get on GIT 求波star :)

如何实现

难点在于在不超出屏幕范围的前提下,尽量抛得更高

整体思路大致如下:

我们知道抛物线的方程式为: clipboard.png

现在我们知道抛物线上的两个点(动画的起点和终点)以及极值点的y值(因为要刚好接触屏幕顶部,所以可以知道这个值)来解这个方程,获得a, b, c

抛物线极值点:(clipboard.pngclipboard.png

当抛物线的方程确定之后,我们就能够画出这条轨迹了。

关于抛物线的相关知识可以参看:抛物线

关于缓动效果

如果我们需要整个动画是一个动感的效果而不是线性的执行完整个动画,这个时候就需要缓动函数了,类似CSS3中的animation-timing-function,我们给这个工具库添加了一个简易的实现,能够支持easeIn, easeOut, easeInOutlinear,如果要实现自定义更加复杂的效果,需要使用贝塞尔曲线,感兴趣的朋友可以研究下。

在动画中我们一般按照动画已经进行的时间计算出动画完成的进度,然后线性的更新动画的一个参数值(在我们的动画里面我们线性的更新x轴的值,然后计算y坐标),故整个动画过程看上去也是线性运动的,缓动函数的作用在于能够完成一种映射,把x的值根据我们定义的缓动函数映射成另一个值,打破目前这种线性的状态。一般我们会对值先进行归一化处理然后传入缓动函数进行映射。

缓动函数应该具备以下几点要求(归一化后):

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

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

  • 函数应该是连续的

clipboard.pngclipboard.png


更新记录

2016-10-08

  • 添加缓动函数效果

相关文章:

  • jq的所有事件
  • iOS移动开发周报-第22期
  • Makefile-入门与进阶【转】
  • PHP 合并数组 追加数组例子
  • django文件上传下载
  • 【228】◀▶ Excel 函数说明?
  • lvm 动态扩展
  • 开启总结之路
  • ios 缺少合规证明
  • V-rep学习笔记:机器人逆运动学数值解法(Cyclic Coordinate Descent Method)
  • SQLMAP注入json格式数据
  • 自己写deque
  • 突然有一个时刻想过静静,我知道你是谁。
  • Qinq技术介绍与实战
  • 搭建简易xss平台
  • hexo+github搭建个人博客
  • 10个最佳ES6特性 ES7与ES8的特性
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • github指令
  • Python爬虫--- 1.3 BS4库的解析器
  • Redash本地开发环境搭建
  • Spring Cloud中负载均衡器概览
  • VirtualBox 安装过程中出现 Running VMs found 错误的解决过程
  • vue中实现单选
  • 当SetTimeout遇到了字符串
  • 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 可能是历史上最全的CC0版权可以免费商用的图片网站
  • 使用Envoy 作Sidecar Proxy的微服务模式-4.Prometheus的指标收集
  • 思考 CSS 架构
  • 算法---两个栈实现一个队列
  • 微信小程序实战练习(仿五洲到家微信版)
  • Oracle Portal 11g Diagnostics using Remote Diagnostic Agent (RDA) [ID 1059805.
  • “十年磨一剑”--有赞的HBase平台实践和应用之路 ...
  • ​Linux Ubuntu环境下使用docker构建spark运行环境(超级详细)
  • ​软考-高级-信息系统项目管理师教程 第四版【第19章-配置与变更管理-思维导图】​
  • #pragma pack(1)
  • $L^p$ 调和函数恒为零
  • (cos^2 X)的定积分,求积分 ∫sin^2(x) dx
  • (补)B+树一些思想
  • (附源码)ssm基于web技术的医务志愿者管理系统 毕业设计 100910
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (一)基于IDEA的JAVA基础10
  • (转)AS3正则:元子符,元序列,标志,数量表达符
  • ***通过什么方式***网吧
  • .NET Core中的去虚
  • .net framwork4.6操作MySQL报错Character set ‘utf8mb3‘ is not supported 解决方法
  • .NET Micro Framework初体验
  • .NET 同步与异步 之 原子操作和自旋锁(Interlocked、SpinLock)(九)
  • .net6+aspose.words导出word并转pdf
  • .net下简单快捷的数值高低位切换
  • .pings勒索病毒的威胁:如何应对.pings勒索病毒的突袭?
  • @data注解_SpringBoot 使用WebSocket打造在线聊天室(基于注解)
  • [ C++ ] STL---仿函数与priority_queue
  • [<MySQL优化总结>]
  • [20190416]完善shared latch测试脚本2.txt