지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 간단한 애니메이션 라이브러리 캡슐화 tween.js 예제 튜토리얼

간단한 애니메이션 라이브러리 캡슐화 tween.js 예제 튜토리얼

零下一度
풀어 주다： 2017-07-16 15:03:47
원래의
1699명이 탐색했습니다.

            이 글은 네이티브 javascript를 사용하여 나만의 animation라이브러리를 구축하는 과정을 기록합니다. 지속적인 개선 과정에서 다음과 같은 애니메이션 효과가 달성됩니다.

동일한 DOM 요소에서 차례로 발생하는 애니메이션의 경우 다음을 시도해 보세요. 다음 기능 구현 계획(하나의 요소에서 여러 요소로 확장하는 것은 어렵지 않으며 여기서는 깊이 다루지 않겠습니다):

기능 1. 애니메이션 A와 애니메이션 B가 발생하는 순서를 알아보세요(예: A가 먼저 발생함) , B는 나중에 발생), 애니메이션 A가 코드를 작성한 순서대로 끝나면 애니메이션 B는

함수 2를 호출합니다. 함수 1을 만족하는 것을 바탕으로 한 단계 더 나아가 애니메이션 A와 애니메이션의 발생 순서가 일치하면 애니메이션 B는 알 수 없습니다(예: 애니메이션 A를 트리거하려면 버튼 1을 클릭하고, 버튼 2를 클릭하면 애니메이션 B가 트리거됩니다(어떤 버튼을 먼저 클릭했는지 확실하지 않음). 이는 1) 두 애니메이션이 동시 간섭을 일으키지 않습니다. 2) 버튼을 클릭하는 순서에 따라 한 애니메이션이 끝난 후 다른 애니메이션이 실행됩니다. 즉, 애니메이션 시퀀스가 ​​실현될 수 있으며 애니메이션 체인이 호출됩니다.

구체적인 코드는 다음과 같습니다. 

~function(){
  var myEffect = {
    Linear:function(t,b,c,d){
      return c*t/d+b
    },
    Quad: {//二次方的缓动（t^2）；
      easeIn: function(t,b,c,d){
        return c*(t/=d)*t + b;
      },
      easeOut: function(t,b,c,d){
        return -c *(t/=d)*(t-2) + b;
      },
      easeInOut: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
      }
    },
    Cubic: {//三次方的缓动（t^3）
      easeIn: function(t,b,c,d){
        return c*(t/=d)*t*t + b;
      },
      easeOut: function(t,b,c,d){
        return c*((t=t/d-1)*t*t + 1) + b;
      },
      easeInOut: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
      }
    },
    Quart: {//四次方的缓动（t^4）；
      easeIn: function(t,b,c,d){
        return c*(t/=d)*t*t*t + b;
      },
      easeOut: function(t,b,c,d){
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
      },
      easeInOut: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
      }
    },
    Quint: {//5次方的缓动（t^5）；
      easeIn: function(t,b,c,d){
        return c*(t/=d)*t*t*t*t + b;
      },
      easeOut: function(t,b,c,d){
        return c*((t=t/d-1)*t*t*t*t + 1) + b;
      },
      easeInOut: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
        return c/2*((t-=2)*t*t*t*t + 2) + b;
      }
    },
    Sine: {//正弦曲线的缓动（sin(t)）
      easeIn: function(t,b,c,d){
        return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
      },
      easeOut: function(t,b,c,d){
        return c * Math.sin(t/d * (Math.PI/2)) + b;
      },
      easeInOut: function(t,b,c,d){
        return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
      }
    },
    Expo: {//指数曲线的缓动（2^t）；
      easeIn: function(t,b,c,d){
        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
      },
      easeOut: function(t,b,c,d){
        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
      },
      easeInOut: function(t,b,c,d){
        if (t==0) return b;
        if (t==d) return b+c;
        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
      }
    },
    Circ: {//圆形曲线的缓动（sqrt(1-t^2)）；
      easeIn: function(t,b,c,d){
        return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
      },
      easeOut: function(t,b,c,d){
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
      },
      easeInOut: function(t,b,c,d){
        if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
        return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
      }
    },
    Elastic: {//指数衰减的正弦曲线缓动；
      easeIn: function(t,b,c,d,a,p){
        if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
        if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
      },
      easeOut: function(t,b,c,d,a,p){
        if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
        if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
      },
      easeInOut: function(t,b,c,d,a,p){
        if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
        if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
      }
    },
    Back: {//超过范围的三次方缓动（(s+1)*t^3 - s*t^2）；
      easeIn: function(t,b,c,d,s){
        if (s == undefined) s = 1.70158;
        return c*(t/=d)*t*((s+1)*t - s) + b;
      },
      easeOut: function(t,b,c,d,s){
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
      },
      easeInOut: function(t,b,c,d,s){
        if (s == undefined) s = 1.70158; 
        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
      }
    },
    zfBounce: {//指数衰减的反弹缓动。
      easeIn: function(t,b,c,d){
        return c - zhufengEffect.zfBounce.easeOut(d-t, 0, c, d) + b;
      },
      easeOut: function(t,b,c,d){
        if ((t/=d) < (1/2.75)) {
          return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
          return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
          return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
          return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
      },
      easeInOut: function(t,b,c,d){
        if (t < d/2) return zhufengEffect.zfBounce.easeIn(t*2, 0, c, d) * .5 + b;
        else return zhufengEffect.zfBounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
      }
    }
  };
  //move:实现多方向的运动动画
  /*
    curEle:当前要运动的元素
    target:当前动画的目标位置,存储的是每一个方向的目标位置{left:xxx,top:xxx...}
    duration:当前动画的总时间
  */
  //effect支持以下的情况
  /*
    
  */
  function move(curEle,target,duration,effect,callback){
    //处理我们需要的动画效果
    var tempEffect = myEffect.Linear;
    if(typeof effect === "number"){
      switch(effect){
        case 0:
          tempEffect = myEffect.Linear;
          break;
        case 1:
          tempEffect = myEffect.Circ.easeInOut;
          break;
        case 2:
          tempEffect = myEffect.Elastic.easeOut;
          break;
        case 3:
          tempEffect = myEffect.Back.easeOut;
          break;
        case 4:
          tempEffect = myEffect.Bounce.easeOut;
          break;
        case 5:
          tempEffect = myEffect.Expo.easeIn;
      }
    }else if(effect instanceof Array){
      tempEffect = effect.length>=2 ? myEffect[effect[0]][effect[1]] : myEffect[effect[0]]
    }else if(typeof effect === "function"){
      //我们的实际意义应该是:effect是不传递值的，传递进来的函数应该是回调函数的值
      callback = effect;
    }

    //在每一次执行方法之前，首先把当前元素之前正在运行的动画结束掉
    window.clearInterval(curEle.timer);
    //根据target获取每一个方向的起始值begin和总距离change
    var begin = {},change = {};
    for(var key in target){
      if(target.hasOwnProperty(key)){
        begin[key] = utils.css(curEle,key)
        change[key] = target[key] - begin[key];

      }
    }
    //实现多方向的运动动画
    var time = 0;
    curEle.timer = window.setInterval(function(){
      time+=10;
      //到达目标：结束动画，让当前元素的样式值等于目标样式值
      if(time>=duration){
        utils.css(curEle,target);
        window.clearInterval(curEle.timer);
        //在动画结束的时候，如果用户把回调函数传递给我了，我就把用户传递的回调函数执行,不仅执行还把this的指向改为当前操作的元素

        typeof callback === "function" ? callback.call(curEle) : null;
        //或者callback && callback()
        return;
      }
      //没到达目标:分别获取每一个方向的当前位置，给当前位置设置样式即可。
      for(var key in target){
        if(target.hasOwnProperty(key)){
          var curPos = tempEffect(time,begin[key],change[key],duration);
          utils.css(curEle,key,curPos);
        }
      }
    },10)
  }

  window.myAnimate = move;
}()
로그인 후 복사

위 내용은 간단한 애니메이션 라이브러리 캡슐화 tween.js 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript js 생기
원천：php.cn
이전 기사：배열 중복 제거의 JS 구현 예 다음 기사：js 사용자 정의 글머리 기호 상자 플러그인의 캡슐화 예 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿