JS动画之缓动函数分析及动画库
上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库。
熟悉的图
实际使用
jquery animate()+jquery.easing插件的使用:
$(selector).animate(styles,speed,easing,callback)
原生js使用:
张鑫旭同学的文章
缓动函数知识
什么是缓动函数?我的理解是动画参数与数学公式结合的函数。
各流行库缓动函数对比,以easeInQuad为例,如图:
easingFn.easingQuadraticIn = function (t) { return t*t; };
分析对比结果
基本数学公式是一样的,都是2次方;
缓动函数是独立的,与平台载体无关;
缓动函数反应的是动画进程与数值变化量的对应关系,具体分析如下:
GSAP Ease在线示例,动画进程每增加一格,数值变化量是增加量是越来越大的,效果就是由慢到快。
与定时器无关,具体演变代码分析如下:
左侧演示的是,由于算法二次方,进程每次等量增加1/5,但是变化量却越来越大;右侧演示的是,虽然定时器改变了(间隔减小一倍,由“滴答”执行五次改成十次),但是变化量的趋势是一样的,相同的进程增量,对应的变化量也是相同。
动画库
动画库做的事基本就是一下四点:1,定时器;2,各种属性变量处理的封装;3,过程控制;4,缓动函数。
实际运用中还是推荐大家用动画库,不满足业务需求的可以自己整合,当然学习的时候可以找个简单的读下源码,试着自己写下核心功能,深入理解动画库的本质,入门我推荐Kute.js。
动画库推荐(各自优劣势及区别下次再详述)
jquery animate(插件jquery.easing.js)
Tween.js
GSAP
CreateJS
Kute.js
JS动画之缓动函数分析及动画库的更多相关文章
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
- iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果
先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/dur ...
- Silverlight动画学习笔记(三):缓动函数
(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效 ...
- GSAP JS基础教程--使用缓动函数
今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里来下载 学习之前,先来准备一下: <!DO ...
- WPF中的动画——(四)缓动函数
缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation = new D ...
- EaseType 缓动函数
EaseType(动画曲线) EaseType 缓动函数或者我习惯叫它动画曲线,在很多的软件或动画中都有涉及到,下面是摘取的一些资料: 缓函数图例 Tween效果 每一幅图像当鼠标移上去,会有路径效果 ...
- 支持xcode6的缓动函数Easing以及使用示例
支持xcode6的缓动函数Easing以及使用示例 用xcode6新建工程后,直接导致不支持之前的Easing缓动函数的代码,经过修改后就可以正常使用了,虽然比不上POP高大上的动画,但用缓动函数的动 ...
- NGUI缓动函数
缓动函数:http://easings.net/zh-cn 研究NGUI的博客:http://dsqiu.iteye.com/category/295721
随机推荐
- SAP PM:参考维护工单创建测量凭证
(1)使用FM:CO_BC_ORDER_POST获取工单资料(Aufnr, aufpo and materials etc): (2)使用FM:MEASUREM_DOCUM_RFC_SINGLE_00 ...
- 吴裕雄--天生自然python学习笔记:python 用 Open CV通过人脸识别进行登录
人脸识别登录功能的基本原理是通过对比两张图片的差异度来判断两张图片是 否是同 一人的面部 . 对比图片 差异度 的算法有很多种,本例中使用“颜色直方图” 算法来实现对人脸图像的识别. 下面为比较 im ...
- linux 有了源码创建git版本库(coding)
进入目录,比如ewei_shop 执行 git init 瞬间Git就把仓库建好了,而且告诉你是一个空的仓库(empty Git repository),当前目录下多了一个.git的目录,如果没有看到 ...
- 调用支付JSAPI缺少参数:sign
微信jsapi调用微信支付时报 :调用支付JSAPI缺少参数:sign 这个问题我查了很久,最后把前端的代码也拿过来看来,发现前端 sign的参数名传错了~~~~~~~前后端分离很容易出现这种问题,对 ...
- pycharm里配置了项目虚拟环境,terminal打开并不是在虚拟环境下,如何解决
在pycharm里,点开下方的Terminal,此时默认目录为当前项目对应的根目录, 第一步:输入 cd venv\Scripts 进入Scripts目录 第二步:然后运行activate.b ...
- Critical-Value|Critical-Value Approach to Hypothesis Testing
9.2 Critical-Value Approach to Hypothesis Testing example: 对于mean 值 275 的假设: 有一个关于sample mean的distri ...
- 解密优秀博士成长史 ——微软亚洲研究院首届博士生学术论坛Panel讨论经验总结
--微软亚洲研究院首届博士生学术论坛Panel讨论经验总结" title="解密优秀博士成长史 --微软亚洲研究院首届博士生学术论坛Panel讨论经验总结"> 编者 ...
- MOOC(7)- case依赖、读取json配置文件进行多个接口请求-解决用例间依赖问题(17)
最最重要,处理case依赖.字段依赖 # -*- coding: utf-8 -*- # @Time : 2020/2/13 21:14 # @File : data_depend_17.py # @ ...
- OpenCV 腐蚀与膨胀(Eroding and Dilating)
#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...
- tomcat启动不了的问题
tomcat启动的几个问题 1.端口冲突 2.非端口冲突,需要加入配置host文件 日志文件: 解决办法:https://blog.csdn.net/u012949658/article/detail ...