运动曲线研究(缓动效果)

刚刚学习了一下网页动画中上的缓动效果，分享一下学习心得。

缓动曲线的概念：

缓动曲线是一个0为起点的连续函数曲线，x轴表示时间变化，y轴表示位移变化。曲线的斜率反映出运动的数度。

缓动效果在Flash动画中比较常见，用于模拟一些现实中常见的运动轨迹，或者制造一些超绚的效果。
而且新版本的Flash中，内置了一些常用的缓动曲线函数。

可惜,Flash的这些曲线函数不是开源的，我们不知道内部如何实现，也就无法将其移植到JS中。感受其绚丽的同时，未免有一丝遗憾。

于是乎，自己琢磨琢磨。

首先，我对Flash的渐变函数接口非常不满。
搞那么多参数干吗？
要描述一个区间的渐变运动特征，只需一个y = f(x)足已。那么一大堆参数，真够罗嗦。
//原理：我们以终点位移为参考，只需要知道中间个点相对于最终位移，我们就能确定运动的规律。
y= f(x)
//约定
//x ∈ [0,1] #将x变化换算成[0,1]是最简单不过的操作
//f(0) = 0 #运动是连续的嘛^_^.
//f(1) != 0 #如果f(1) = 0了，那不就没有运动嘛，中间即使有位移，我也无法计算中间的位移相对于总体位移的比例。

曲线转换
每种类型的渐变都有三种变形

渐入(in)	在过渡的开始提供缓动效果。
渐出(out)	在过渡的结尾提供缓动效果。
渐入渐出(inOut/Both)	在过渡的开始和结尾提供缓动效果。

其中，我们只要知道一个的曲线，其他两个都可以转换生成：
知道渐入曲线之后，将其相对于(0.5,0.5)点绘制镜像，就是一个缓出运动，分段叠加就是一个完整的缓入缓出运动。

首先，常见的加速/减速运动：
初中物理就能搞定。
加速渐变函数为(easeIn)：
y=x*x; //y轴比例常数无需考虑

这是一个简单的2次曲线，表现一个渐入运动。
简单的变换一下：y = 1-(1-x)*(1-x) 减速运动(easeOut)
复杂一点：
y = x>0.5? 1-2(1-x)*(1-x) :
2*x*x :
先加速后减速运动(easeBoth)

既然有二次曲线，很自然就想到三次、四次曲线。是的，这些曲线都有类似特征，区别在中间更陡峭，两头平缓（缓入缓出）

接下来，我就想实现一下弹动效果：
这类效果就好像一个甲虫飞到蜘蛛网上，在网上抖动两下，静下来听天由命。
抖动，周期运动，好，我们很快就想到正弦曲线。
方法基本正确，不过我起初还是走弯路了，我自作聪明的想着延长开始的半周期（x轴边形处理，振动让周期先大后小）。
但最终发现效果非常不理想，最后查看yui的实现。模仿一下，走出了这个误区。
我们通常看到的振荡移位效果，都是开始移动了较长位移，给人一种开始的振动周期更长的错觉，振动周期是不需要变化的。
纠正这个错误后，实现曲线函数如下：

y = Math.pow(1024,x-1)*Math.sin(x*((2*(period||1)+0.5)*Math.PI));

利用指数函数的第二象限的渐变特征变形，取处理正弦波形的振幅，达到一个衰减的效果。

趁热打铁，看看yui的其他几类渐变效果：

回退起步效果。
喜欢看动画片的话，你一定记得这个常见的场面，当一个家伙想快跑的时候，一点要先回撤一段距离，能后如突然加速前进。ok要的就是这个效果。
实现其实也很简单，一个二次曲线就可以搞定

y = x*(x-(backDistance||0.1)*4)

撞墙效果

这个名字可能不太合适吧，应该叫撞地效果更合适，鉴于撞墙这个名词更常见一些，也就标题党一回好了：）
玩过弹球吧，弹球的运动规律一定还记得。
对就是这种轨迹。
运功轨迹就是若干条二次曲线的分段拼接。改写一个yui里面的模拟实现。

this.bounceOut = function (x) {
if (x < (1/2.75)) {
return x*x;
} else if (x < (2/2.75)) {
return (x-=(1.5/2.75))*x + .75/7.5625;
} else if (x < (2.5/2.75)) {
return (x-=(2.25/2.75))*x + .9375/7.5625;
}
return (x-=(2.625/2.75))*x + .984375/7.5625;
};
这里手动指出了一大堆参数，其实，这些参数都可以通过计算得出，偷个懒，就这么地吧，^_^

运动曲线研究(缓动效果)相关推荐

JavaScript Tween算法及缓动效果
Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等. 我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果. ...
软件项目技术点(1)——Tween算法及缓动效果
AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...
javascript的缓动效果
这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...
简单动画函数封装及缓动效果
function animate(obj, target) {clearInterval(obj.timer);//obj.timer = setInterval(function() {var ti ...
javascript 45种缓动效果BY司徒正美
javascript 45种缓动效果参数类型说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...
网页轮播图+缓动效果
实现某宝上面的网页轮播图+缓动效果代码和注释: <!DOCTYPE html> <html lang="en"><head><meta ...
css3-定时缓动效果与块旋转
先来了解一下两个css3的属性(当前学习到并理解的属性) 1.transform(变换) 语法: transform : none | <transform-function> [ < ...
ui动效 unity_【FairyGUI Unity】使用动效功能实现血条UI扣血与加血的缓动效果
原理血条使用进度条组件,可以得到当前值与最大值. 通过动效-改变缩放可以让图片宽度从1到0按百分比变化. 动效可以指定播放动效的时间范围组件设计创建一个进度条组件,作为血条. bar是实际血量条 ...
swiper.js实现区域轮播-两边小中间大的缓动效果
效果展示(已加速) 第一步:在页面引入css和js <link rel="stylesheet" href="css/swiper.min.css"> ...

运动曲线研究(缓动效果)

运动曲线研究(缓动效果)相关推荐

最新文章

热门文章