Your SlideShare is downloading. ×
0
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
缓动
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

缓动

650

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
650
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 缓动<br />口碑F2E 正邪 2010.08.22<br />
  • 2. EASING EQUATIONS<br /> Open source under the BSD License.<br /> Copyright 2001 Robert Penner<br /> All rights reserved.<br />http://www.robertpenner.com/easing.html<br />
  • 3. 什么是运动<br />时间<br />位置<br />位置是时间的函数,在任意指定的时间,运动都有确定的数值。<br />
  • 4. 匀速运动<br />机械<br />僵硬<br />看起来太假了<br />
  • 5. 缓动<br />缓入 (ease-in)<br />缓出 (ease-out)<br />缓入缓出 (ease-in-out)<br />
  • 6. 标准指数滑动<br />庄子:一尺之棰,日取其半,万世不竭<br />芝诺悖论(Zeno‘s paradoxes) :阿喀琉斯跑不过乌龟<br />
  • 7. 变形的关键因素<br />起始位置<br />改变量<br />所需时间<br />
  • 8. 变形函数<br />getTweenPosition=function(time, begin, change, duration){<br />return position;<br />}<br />getTweenPosition=function(t, b, c, d){<br />return position;<br />}<br />
  • 9. 线性变形<br />p(t) = t<br />Y.Anim.DEFAULT_EASING =Y.Easing.easeNone =<br />function (t, b, c, d) { <br />return c * t / d + b; // linear easing<br />};<br />
  • 10. 二次缓动<br />p(t) = t2<br />Y.Easing.easeIn<br />Y.Easing.easeOut<br />Y.Easing.easeBoth<br />
  • 11. 三次缓动<br />p(t) = t3<br />
  • 12. 四次缓动<br />p(t) = t4<br />Y.Easing.easeInStrong<br />Y.Easing.easeOutStrong<br />Y.Easing.easeBothStrong<br />
  • 13. 五次缓动<br />p(t) = t5<br />
  • 14. 正弦缓动<br />p(t) = sin( t×π/2)<br />
  • 15. 指数缓动<br />p(t) = 210(t-1)<br />
  • 16. 圆形缓动<br />
  • 17. 弹性缓动<br />p(t) = A×210(t-1)×sin((wt-s)÷p×π/2)<br />Y.Easing.elasticIn<br />Y.Easing.elasticOut<br />Y.Easing.elasticBoth<br />Amplitude & Period<br />
  • 18. 回退缓动<br />p(t) = at3 + bt2 + ct1<br />Y.Easing.backIn<br />Y.Easing.backOut<br />Y.Easing.backBoth<br />Overshoot<br />
  • 19. 弹跳缓动<br />p(t) = t2<br />Y.Easing.bounceIn<br />Y.Easing.bounceOut<br />Y.Easing.bounceBoth<br />

×