[关闭]
@EncyKe 2016-01-13T03:39:02.000000Z 字数 5326 阅读 1333

JS:动画特辑

前端 JavaScript



一、线性运动

  1. <style type="text/css">
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. div{
  7. display: inline-block;
  8. width: 200px;
  9. height: 200px;
  10. background: bisque;
  11. position: relative;
  12. left: -200px;
  13. }
  14. span{
  15. display: inline-block;
  16. width: 30px;
  17. height: 80px;
  18. background: violet;
  19. position: absolute;
  20. bottom: 0;
  21. right: -30px;
  22. }
  23. </style>
  24. <div>
  25. <span></span>
  26. </div>
  27. <script type="text/javascript">
  28. window.onload = function(){
  29. var div = document.getElementsByTagName('div');
  30. var timer = null;
  31. div[0].onmouseover = function(){
  32. startMove(0);
  33. }
  34. div[0].onmouseout = function(){
  35. startMove(-200);
  36. }
  37. function startMove(destination){
  38. clearInterval(timer);
  39. var stepInTime = 20;
  40. timer = setInterval(function(){
  41. var speed = 200;
  42. var stepIn = null;
  43. if (div[0].offsetLeft > destination) {
  44. stepIn = -stepInTime * Math.ceil(div[0].offsetWidth/speed);
  45. }else{
  46. stepIn = stepInTime * Math.ceil(div[0].offsetWidth/speed);
  47. };
  48. if (div[0].offsetLeft == destination) {
  49. clearInterval(timer);
  50. }else{
  51. div[0].style.left = div[0].offsetLeft + stepIn + 'px';
  52. }
  53. },stepInTime);
  54. }
  55. }
  56. </script>

二、缓冲运动

  1. <style type="text/css">
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. div{
  7. display: inline-block;
  8. width: 200px;
  9. height: 200px;
  10. background: bisque;
  11. position: relative;
  12. left: -200px;
  13. }
  14. span{
  15. display: inline-block;
  16. width: 30px;
  17. height: 80px;
  18. background: violet;
  19. position: absolute;
  20. bottom: 0;
  21. right: -30px;
  22. }
  23. </style>
  24. <div>
  25. <span></span>
  26. </div>
  27. <script type="text/javascript">
  28. window.onload = function(){
  29. var div = document.getElementsByTagName('div');
  30. var timer = null;
  31. div[0].onmouseover = function(){
  32. startMove(0);
  33. }
  34. div[0].onmouseout = function(){
  35. startMove(-200);
  36. }
  37. function startMove(destination){
  38. clearInterval(timer);
  39. var stepInTime = 20;
  40. timer = setInterval(function(){
  41. var stepIn = (destination - div[0].offsetLeft)/20;
  42. stepIn = stepIn > 0 ? Math.ceil(stepIn) : Math.floor(stepIn);
  43. if (div[0].offsetLeft == destination) {
  44. clearInterval(timer);
  45. }else{
  46. div[0].style.left = div[0].offsetLeft + stepIn + 'px';
  47. }
  48. },stepInTime);
  49. }
  50. }
  51. </script>

三、多物体运动

  1. <style type="text/css">
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. li{
  7. width: 200px;
  8. height: 200px;
  9. background: bisque;
  10. position: relative;
  11. margin: 10px 0;
  12. border: 4px solid black;
  13. }
  14. </style>
  15. <ul>
  16. <li></li>
  17. <li></li>
  18. <li></li>
  19. </ul>
  20. <script type="text/javascript">
  21. window.onload = function(){
  22. var li = document.getElementsByTagName('li');
  23. for (var i = 0; i < li.length; i++) {
  24. li[i].timer = null;
  25. li[i].onmouseover = function(){
  26. startMove(this, 'opacity', 30);
  27. }
  28. li[i].onmouseout = function(){
  29. startMove(this, 'opacity', 100);
  30. }
  31. };
  32. function startMove(obj, attr, destination){
  33. clearInterval(obj.timer);
  34. obj.timer = setInterval(function(){
  35. var cur = 0;
  36. if (attr == 'opacity') {
  37. cur = Math.round(parseFloat(getStyle(obj, attr))*100);
  38. }else{
  39. cur = parseInt(getStyle(obj, attr));
  40. };
  41. var stepIn = (destination - cur)/10;
  42. stepIn = stepIn > 0 ? Math.ceil(stepIn) : Math.floor(stepIn);
  43. if (cur == destination) {
  44. clearInterval(obj.timer)
  45. }else{
  46. if (attr == 'opacity') {
  47. obj.style.filtet = 'alpha(opacity:' + (cur + stepIn) + ')'
  48. obj.style.opacity = (cur + stepIn)/100;
  49. }else{};
  50. obj.style[attr] = cur + stepIn + 'px';
  51. };
  52. },30);
  53. }
  54. }
  55. // 获取属性值的封装函数;
  56. function getStyle(obj, attr){
  57. if (obj.currentStyle) {
  58. // IE:currentStyle;
  59. return obj.currentStyle[attr];
  60. }else{
  61. // FF:getComputedStyle;
  62. return getComputedStyle(obj,false)[attr];
  63. };
  64. }
  65. </script>

四、链式运动

  1. <style type="text/css">
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. li{
  7. width: 200px;
  8. height: 200px;
  9. background: bisque;
  10. position: relative;
  11. margin: 10px 0;
  12. border: 4px solid black;
  13. }
  14. </style>
  15. <ul>
  16. <li></li>
  17. </ul>
  18. <script type="text/javascript">
  19. window.onload = function(){
  20. var li = document.getElementsByTagName('li');
  21. li[0].onmouseover = function(){
  22. startMove(li[0], 'width', 400, function(){
  23. startMove(li[0], 'height', 400, function(){
  24. startMove(li[0], 'opacity', 1);
  25. });
  26. });
  27. }
  28. li[0].onmouseout = function(){
  29. startMove(li[0], 'opacity', 100, function(){
  30. startMove(li[0], 'width', 200, function(){
  31. startMove(li[0], 'height', 200);
  32. });
  33. });
  34. }
  35. function startMove(obj, attr, destination, fn){
  36. clearInterval(obj.timer);
  37. obj.timer = setInterval(function(){
  38. var cur = 0;
  39. if (attr == 'opacity') {
  40. cur = Math.round(parseFloat(getStyle(obj, attr))*100);
  41. }else{
  42. cur = parseInt(getStyle(obj, attr));
  43. };
  44. var stepIn = (destination - cur)/10;
  45. stepIn = stepIn > 0 ? Math.ceil(stepIn) : Math.floor(stepIn);
  46. if (cur == destination) {
  47. clearInterval(obj.timer)
  48. if (fn) {
  49. fn();
  50. };
  51. }else{
  52. if (attr == 'opacity') {
  53. obj.style.filtet = 'alpha(opacity:' + (cur + stepIn) + ')'
  54. obj.style.opacity = (cur + stepIn)/100;
  55. }else{};
  56. obj.style[attr] = cur + stepIn + 'px';
  57. };
  58. },30);
  59. }
  60. }
  61. // 获取属性值的封装函数;
  62. function getStyle(obj, attr){
  63. if (obj.currentStyle) {
  64. // IE:currentStyle;
  65. return obj.currentStyle[attr];
  66. }else{
  67. // FF:getComputedStyle;
  68. return getComputedStyle(obj,false)[attr];
  69. };
  70. }
  71. </script>

五、动画框架

  1. window.onload = function(){
  2. var li = document.getElementsByTagName('li');
  3. li[0].onmouseover = function(){
  4. animate(li[0], {width:400,height:400});
  5. }
  6. li[0].onmouseout = function(){
  7. animate(li[0], {width:200,height:200});
  8. }
  9. }
  10. // 封装动画主函数,需传入对象、运动数组、回调函数(可选);
  11. function animate(obj, moves, fn){
  12. var flag = true;
  13. clearInterval(obj.timer);
  14. obj.timer = setInterval(function(){
  15. for (var attr in moves) {
  16. var cur = 0;
  17. if (attr == 'opacity') {
  18. cur = Math.round(parseFloat(getStyle(obj, attr))*100);
  19. }else{
  20. cur = parseInt(getStyle(obj, attr));
  21. };
  22. var stepIn = (moves[attr] - cur)/10;
  23. stepIn = stepIn > 0 ? Math.ceil(stepIn) : Math.floor(stepIn);
  24. if (cur != moves[attr]) {
  25. flag = false;
  26. }
  27. if (attr == 'opacity') {
  28. obj.style.filter = 'alpha(opacity:' + (cur + stepIn) + ')'
  29. obj.style.opacity = (cur + stepIn)/100;
  30. }else{};
  31. obj.style[attr] = cur + stepIn + 'px';
  32. if (flag) {
  33. clearInterval(obj.timer)
  34. if (fn) {
  35. fn();
  36. };
  37. };
  38. }
  39. },30);
  40. }
  41. // 获取属性值的封装函数;
  42. function getStyle(obj, attr){
  43. if (obj.currentStyle) {
  44. // IE:currentStyle;
  45. return obj.currentStyle[attr];
  46. }else{
  47. // FF:getComputedStyle;
  48. return getComputedStyle(obj,false)[attr];
  49. };
  50. }

六、jQuery的animate()运动框架

  1. $(selector).animate(styles,speed,easing,callback)

附:参考

[慕课:JS动画效果][2]

[2p

附:参考

慕课:JS动画效果

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注