签到

05月10日
尚未签到

共有回帖数 0

    回望空城

    等级:
    好了,让我们把最近学过的一些技巧整合一下。首先,让我们看一下下面这个例子,这个例子里面我为这个钟摆添的旋转参数添加了正玹曲线。

    freq = 1.0;
    amplitude = 50;
    decay = 0;
    amplitude*Math.sin(freq*time*2*Math.PI)/Math.exp(decay*time)
    我们将amplitude(振幅)设置成了50,所以钟摆的摆动幅度是在50至-50之间,我们将frequency(频率)设置为1,就形成了这个漂亮的钟摆匀速的动画。
    这个例子中还有一个参数是decay(衰减),下面我们就给衰减一个参数看看效果是怎样的。


    freq = 1.0;amplitude = 50;decay = 0.7;amplitude*Math.sin(freq*time*2*Math.PI)/Math.exp(decay*time)小丑来了
    好的,我们刚刚为旋转参数添加了表达式,下面我们将这个表达式添加到Y轴上面,我们可以得到一个非常漂亮的弹性动画,下面就是这个动画的表达式:freq = 1.0;amplitude = 50;decay = 0.7;amplitude*Math.cos(freq*time*2*Math.PI)/Math.exp(decay*time)





    这里大家可以注意一下下面的表达式我采用了Cosine曲线(这样我们就能保证我们的曲线从0开始)。这个小球的X轴运动是我自己手动添加的关键帧。
    freq = 0.9375
    amplitude = 130;
    decay = 0.5;
    posCos = Math.abs(Math.cos(freq*time*2*Math.PI));

    y = amplitude*posCos/Math.exp(decay*time);
    position - [0,y]
    在这个表达式中我们调用了一个新的方法Math.abs,这个方法可以帮助我们返回数字的绝对值,比如。
    Math.abs(-90) 返回的结果是90
    Math.abs(7.25-10) 返回的结果是2.75
    在这里面采用这个方法的目的是,去掉我们曲线里面的负值。


    大家可以看一下这个动画的曲线。有一点需要特别注意的,就是合成每秒的帧数,以及我们表达式中的freq,这两个数字会影像小球落地的位置。如果我们的合成是30帧的,我们要是将freq设置为2.0,小球的第一次弹跳就会发生在第三帧和第四帧之间,这样我们的小球看起开好像永远也不会落在地上。如果我们希望小球可以每一帧都落在地上,就需要将freq设置为2.5,如果希望第四帧落在地上就是1.875。我的合成石15帧的所以我设置为了0.9375,大家亲自尝试一下就理解了。
    Stretch(拉伸)
    刚刚我们尝试了“摇摆”动画,"弹跳"动画,下面我们看看将表达式添加到Scale(缩放)参数中的时候,我们会得到怎么样的结果。


    freq =3;amplitude = 55;decay = 1.0;s = amplitude*Math.sin(freq*time*2*Math.PI)/Math.exp(decay*time);scale + [s,s]这个表达式与上面我们所使用的所有的表达式差不多。我们将一个一维的数值赋予了变量S,通过Scale + [s,s]控制小球的拉伸动画。Amplititude可以将小球的弹性动画控制在原有参数的45%至155%之前。Squash(挤压) 和 Stretch(拉伸)我们的拉伸动画目前看起来还不是那么完美,让我们再为它添加一些挤压效果。在真实的世界中,当物体被挤压时,他的体积是保持不变的。所以,如果我们的物体被纵向挤压,它在横向会被挤扁。如果我们的图形是正方形,这个方形的体积我们可以通过宽乘高获得,那么我们看看如下的推导:挤压前的宽 X 挤压前的高 = 挤压后的宽 X 挤压后的高或者这么理解,“被挤压后的宽度” 等于 “被挤压前的宽度” 乘以 “新X缩放值”。挤压前的宽 X 挤压前的高 = 挤压前的宽 X (新X轴缩放/100) X 挤压前的高 X (新Y轴缩放/100)如上公式可以简化为:新Y轴缩放 = (1/新X轴缩放)X 10000好的,上面的推导如果你没看懂就算了,直接记住结果即可。我们看看将这个表达式运用的效果。


    amplitude = 25;
    decay = 1.0;
    t = time - inPoint;
    x = scale[0] + amplitude*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
    y = (1/x)*10000;
    [x,y]
    这里我们来理解一下inPoint,它的意思是素材的第一帧,还有就是outPoint,这么理解的话就是素材的最后一帧了。在这个表达式中我们将X轴和Y轴分开对待,我们增加了一个时间变量t,time减去inPoint,可以让我们的动画不是一定要从合成的第一帧开始,而且随着素材的第一帧才开始。然后我们通过公推导出来的Y值获得了Y的参数。
    让弹力小球更加逼真
    学习了挤压和拉伸后,让我们把这两项技能添加到我们的弹力小球动画中,让小球的动作看起来更加逼真吧。下面是这个小球位置的表达式,和我们之前的表达式一样:

    freq = 0.9375
    amplitude = 130;
    decay = 0.5;
    posCos = Math.abs(Math.cos(freq*time*2*Math.PI));

    y = amplitude*posCos/Math.exp(decay*time);
    position - [0,y]
    然后我们再添加如下的缩放表达式:
    freq = 0.9375; //小球挤压次数频率
    squashFreq = 4.0; //小球每一次挤压的频率
    decay = 5.0; //小球每一次挤压的衰减
    masterDecay = 0.4; //小球总体动画的衰减
    amplitude = 25;
    delay = 1/(freq*4); //这个参数会保证和位置动画吻合
    if (time  delay){ //这个条件保证小球只有在弹跳的过程中才会有挤压动画
    bounce = Math.sin(squashFreq*time*2*Math.PI); //计算弹跳曲线
    bounceDecay = Math.exp(decay*((time - delay)%(freq/2))); //每一次弹跳衰减
    overallDecay = Math.exp(masterDecay*(time - delay)); //总体衰减
    x = scale[0] + amplitude*bounce/bounceDecay/overallDecay;
    y = scale[0]*scale[1]/x;
    [x,y]
    }else{
    scale //保持原有缩放不变
    }
    动画效果如下:


    楼主 2015-12-02 14:01 回复

共有回帖数 0
  • 回 帖
  • 表情 图片 视频
  • 发表
Copyright © 2010~2015 直线网 版权所有,All Rights Reserved.沪ICP备10039589号 意见反馈 | 关于直线 | 版权声明 | 会员须知