JS 위 챗'똥 튀기'대작 전 기능 구현

15324 단어 js작은 편지똥 을 튀기다대작 전
안녕하세요,저 는 가을 바람 입 니 다.최근 에 위 챗 은 새로운 기능(위 챗 8.0.6 으로 업데이트)을 발 표 했 습 니 다.가장 뜨 거 운 것 은'똥 튀기'기능 이 아 닌 것 이다.각종 무리 에서 똥 튀기 기능 을 가지 고 놀 기 시작 했다.

여러분 들 이 그런 시간 을 겪 어 보 셨 는 지 모 르 겠 지만 어 렸 을 때(어 렸 을 때,제 가 초등학교 에 다 닐 때)설날 에 도 이런 나 쁜 재 미 를 시도 해 보 았 는데 위 챗 이 온라인 버 전 으로 만들어 줄 줄 줄 은 몰 랐 습 니 다.이 기능 발명 은 제품 을 만 든 본인 까지 조롱 했다.하지만 전 국민 을 즐겁게 해 주 는 기능 을 할 수 있다 는 것 도 제품 의 등장 의 미 를 헛 되 게 하지 않 는 다.

이전에 위 챗 8.0 업데이트 때 나 도 한 편<위 챗 8.0『폭 열』을 실현 하 는 예 화 이모 티 콘 효 과 를 알려 드 립 니 다>을 쓴 적 이 있다.이전 글 에서 저 는canvas으로 이 루어 졌 습 니 다.지난번 에 글 끝 에 댓 글 이 있 었 는데lottie 을 통 해 비슷 한 기능 을 실현 할 수 있다 고 평 가 했 습 니 다.사실 저 는 이것 에 관심 이 많 았 지만 시도 하지 않 았 습 니 다.이번 에는 새로운 방식lottie을 통 해 이 기능 을 실현 하고 싶 습 니 다.
효과 체험:
https://example.qiufeng.blue/wechat-feces/3-2-feces.html
Github 주소:
https://github.com/hua1995116/node-demo/tree/master/wechat-feces
단계 분해
모든 물 체 는 더 작은 물체 로 구성 되 어 있 기 때문에 우 리 는 상기 기능 을 실현 하려 면 자 연 스 럽 게 한 걸음 한 걸음 해 야 한다.나 는 대체로 상기 기능 을 다음 과 같은 네 단계 로 분해 했다.안에 있 는 모든 것 이 그리 어렵 지 않 고 전단 소 백도 쉽게 이 루어 질 수 있다 고 할 수 있다.
1.폭탄 을 던진다
이 단 계 는 2 차 함수 지식 으로 궤적 경로(y=$x^2$와 유사)를 작성 한 다음tween.js를 통 해 보충 애니메이션 을 만 들 수 있 습 니 다.
2.폭탄 폭발lottie을 이용 하여 애니메이션 을 실현 한다.
3.떡 이 터지다css애니메이션 으로 실현
4.모두 진동css애니메이션 으로 실현
총결산
이상 에서 우리 가 대체적으로 말 하고 싶 은 사고방식 은 아마도 네가 사고방식 을 보면 그 중의 일부 실현 에 대해 이미 익숙 해 졌 을 것 이다.그러면 너 는 일부분 을 뛰 어 넘 을 수 있다.위의 생각 이 떠 오 른 후에 우 리 는 진짜 총 으로 실천 하기 시작 했다.
구체 적 실현
1.폭탄 을 던진다

우 리 는 자세히 관찰 한 결과 폭탄 의 운동 궤적 이 사실은 포물선 이라는 것 을 알 수 있다.우 리 는 이 기능 을 실현 하려 면 2 차 함 수 를 쉽게 연상 할 수 있다.
우선 2 차 함수 의 정 의 를 살 펴 보 자.
일반적으로 y=ax 와 같다.²+bx+c(a≠0)(a,b,c 는상수의함수.를 2 차 함수 라 고 한다.
그림 으로 표현 하면 이렇다.

이것 은 우리 가 원 하 는 궤적 과 매우 비슷 하 다 는 것 이 분명 하 다.
정상 적 인 피리 칼 좌 표 는 모두 수직 으로 위로 Y 정 축 이 고 수평 으로 오른쪽으로 x 정 축 이기 때문이다.한편,dom 포 지 셔 닝 에 있어 왼쪽 위 는(0,0)수평 으로 오른쪽으로 x 정 축 이 고 수직 으로 아래로 Y 정 축 이다.단지 좌 표를 x 축 을 따라 뒤 집 었 을 뿐이다.
그래서 우 리 는 2 차 함수 하나만 확정 하면 궤적 을 얻 을 수 있다.2 차 함수 의 통 항 은 3 개의 미지수 가 있 기 때문에 우 리 는 3 개의 점 만 알 면 2 차 함 수 를 확정 할 수 있다.우 리 는 먼저 우리 의 2 차 함수 가 이렇다 고 가정 한다.

우리 의 세 가지 점 은 각각(0,H),(H,0),(3H,3H)이다.우 리 는 대 입 통 항 을 통 해 다음 과 같은 공식 을 얻 을 수 있다.

그리고 풀 어.

획득:

따라서 우 리 는 이 폭탄 의 가장 높 은 거리 인'똥'의 높이 만 얻 으 면 모든 궤적 을 그 릴 수 있다.

지금 우리 의 폭탄 이 10px*10px 의 작은 사각형 이 라 고 가정 하고 시작 점 을(300,300)종점(0,100)H=100 으로 설정 합 니 다.이때 우리 가 얻 은 2 차 함 수 는:

우 리 는 다음 과 같은 궤적 애니메이션 을 얻 을 수 있다.

한편,모든 애니메이션 을 과장 하면 우 리 는 유명한 보충 애니메이션 라 이브 러 리Tween.js보충(애니메이션)는 하나의 개념 으로 대상 의 속성 을 부 드 럽 게 변경 할 수 있 습 니 다.어떤 속성 을 변경 해 야 하 는 지 알려 주 십시오.보 간 이 끝 날 때 어떤 최종 값 을 가 져 야 하 는 지,그리고 얼마나 걸 리 는 지 알려 주 십시오.보 간 엔진 은 시작 점 에서 끝 점 까지 의 값 을 계산 합 니 다.

var coords = { x: 300 };  //       x = 300
var tween = new TWEEN.Tween(coords)
	.to({ x: 0  }, 1000) //     x = 0,         1    
  .easing(TWEEN.Easing.Linear.None)	//
상기 정 의 를 통 해 우 리 는onUpdate에서 매번 변화 하 는x값 을 얻 은 다음 에 위의 2 차 함 수 를 통 해 y 를 얻 은 다음 에 작은 사각형 을 업데이트 할 수 있다.

tween.onUpdate(function() {
    var x = coords.x;
    var y = 1/120 * x * x - 11/6 * x + 100;
		box.style.setProperty('transform', 'translate(' + x + 'px, ' + y + 'px)');
})
이때 우리 가 완성 한 효 과 는 아직도 부족 하 다.마치 그림 을 그 리 는 것 처럼 우 리 는 그 에 게 뼈 만 그 려 주 었 다.우 리 는 그것 에 색칠 을 해 야 한다.그 다음 에 우 리 는 다음 과 같은 두 가지 일 을 한 후에 효 과 를 볼 수 있다.
1.사각형 을 폭탄 으로 바 꾸 면 폭탄 의 모양 이 간단 합 니 다.우 리 는 ps 를 통 해 그림 에서 파 낼 수 있 습 니 다.
2.운동 할 때의 각 도 를 수정한다.

이 절의 전체 코드:https://github.com/hua1995116/node-demo/blob/master/wechat-feces/1-2-animation.html
2.폭탄 폭발
그리고 폭탄 폭발의 효과 에 대해 서도 말씀 드 리 지만lottie 애니메이션 으로 바 꾸 고 싶다 면lottie은 무엇 일 까요?
Lottie 는 AE 로 제 작 된 애니메이션 을 분석 할 수 있 는 라 이브 러 리 로 웹,ios,android,react native 를 지원 합 니 다.웹 사 이 드 에서 lotusie-web 라 이브 러 리 는 내 보 낸 애니메이션 json 파일 을 분석 하고 svg 또는 canvas 방식 으로 애니메이션 을 우리 페이지 에 그 릴 수 있 습 니 다.
그리고 나 서 나 는https://lottiefiles.com/폭발 한 필터 파일 을 찾 았 다.

그리고 그의 쓰기 방법 은 매우 간단 하 다.json을 도입 한 다음 에lottie 방법 을 사용 해 야 한다.

<script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.7.8/lottie.min.js"></script>
</head>
<body>
<div class="bodymovin"></div>
<script>
    const animation = window.bodymovin.loadAnimation({
        container: document.querySelector('.bodymovin'), //        dom  
        renderer: 'svg', //     ，svg、canvas、html（    svg  ）
        loop: true, //       
        autoplay: true, //       
        path: './bomb.json', //   json    
    });
</script>
그래서 우 리 는 포물선 이 완 성 된 후에 바로 폭발 효 과 를 사용 해 야 하고bodymovin.loadAnimation도 나 에 게 사건 방법tween.js을 제공 해 주 었 다.우 리 는onComplete리 셋 에서 폭발 애니메이션 을 시작 해 야 한다.

tween.onComplete(function () {
  //      
})


이 절의 전체 코드:https://github.com/hua1995116/node-demo/blob/master/wechat-feces/2-2-lottie.html
3.떡 이 터지다
3.1 형상
같은 이치 의 폭탄 은 PS 로 그림 을 파 서'똥'을 투명 한 그림 층 으로 파 내 고 싶 었 다.약간 가시 가 있어 도 괜찮아 요.실제 떡 도 이렇게 크 지 않 아서 가시 가 잘 보이 지 않 아 요.미세 조정 을 통 해 복구 할 수도 있어 요)

.feces {
  position: absolute;
  background-image: url(./feces.jpg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
  transform-origin: center;
}

//         
function createfeces(scale = 1) {
  const fece = document.createElement('div');
  fece.className = 'feces';
  //         ，   ，      。
  const symbol = Math.random() > 0.5 ? 1 : -1;
  fece.style.transform = `scale(${scale * 1.1}) rotate(${symbol * 20 * Math.random()}deg)`
  return fece;
}
3.2 위치

우 리 는 떡 이 터 진 곳 에서 날 아 오 르 는 것 을 볼 수 있다.주로 7 개의 떡 이 날 아 오 르 는데 그 중에서 중간 이 가장 크 고 다른 것 은 중심 떡 에서 멀 어 질 수록 작 아 지 며 배열 하 는 방식 은 원 과 비슷 하지만 그렇게 규칙 적 이지 않다.
그래서 우 리 는 가장 간단 한 방식 으로 먼저 실현 할 수 있 는데 그것 이 바로 원형 으로 둘러싸 인 것 이다.하나의 원 은 360°이 므 로 우 리 는 그것 에 게 평균 6 등분 만 나 누 어 주면 된다.우리 가 둘 러 싼 것 은 모두 6 개의 떡 이기 때문에 각각 60°이다.
우리 위의 폭탄 은 대략 300*300 의 구역 이기 때문에 나 는 중심의 좌 표를(150,150)로 정 한 다음 에 70~230 의 x 점 을 무 작위 로 생 성하 면 y 값 을 계산 할 수 있다.첫 번 째 점 을 확정 한 후에 각 점 간 의 각도 에 따라 60°이 고 나머지 5 개의 점 을 계산 할 수 있다.

중심 점(150,150)을 원심 으로 계산 하 는 것 이 비교적 번 거 롭 기 때문에 나 는 중심 점 을(0,0)으로 옮 겨 계산 한 다음 에 계산 한 모든 점 을 x 축,y 축 으로 150 으로 옮 겼 다.

//              
//      num          
function randomPosition(num) {
  const radius = 80; //    
  const randomX = Math.random() * radius //   0         x
  const y = Math.round(Math.sqrt(radius * radius - randomX * randomX)); //              
  const radian = Math.atan(y / randomX); //        

  const step = Math.PI * 2 / num; //          

  return new Array(num).fill(0).map((item, index) => {
    const r = (index * step + radian)
    //     0 - 2 * PI
    const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
    return {
      x: radius * Math.sin(tr),
      y: radius * Math.cos(tr),
    }
  })
            
}

그리고 우 리 는 이 사고방식 에 따라 떡 6 개 를 그리고 x 축 과 y 축 으로 각각 150 개 를 평평 하 게 옮긴다.

randomPosition(6).map(item => ({ x: item.x + 150, y: item.y + 150 })) //         6

약간 그런 맛 이 나 는 것 같 지만 모든 것 이 똑 같 기 때문에 우 리 는 처리 해 야 한다.거리 중심 에서 멀리 떨 어 진 크기 에 따라 크기 를 조정 하고 대체적으로 하 나 를 썼 다.원 의 반지름 이 80 이기 때문에 80 이 증가 할 때마다 떡 의 크기 를 원래 의 2/3 으로 바 꾸 었 다.

const dis = Math.sqrt((end.x - 150) * (end.x - 150) + (end.y - 150) * (end.y - 150)); //          150 ，              
const r = Math.pow(2/3, dis / length); //

그러나 실제 장면 에서 우 리 는 위 치 를 더욱 랜 덤 으로 배치 하기 때문에 나 는 모든 떡 의 위치 에 랜 덤 치 를 추 가 했 고 중심 떡 은 왼쪽 상단 에 더욱 치 우 치고 일정한 랜 덤 치 를 더 했다.

function randomPosition(num) {
...
return new Array(num).fill(0).map((item, index) => {
  const r = (index * step + radian)
  const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
  return {
    //      
    x: length * Math.sin(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
    y: length * Math.cos(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
  }
})
}

3.3 각도
마지막 으로 응 가 각 각도 만 포인트 해 주시 면 됩 니 다.

function createfeces(scale) {
  const fece = document.createElement('div');
  fece.className = 'feces';
  const symbol = Math.random() > 0.5 ? 1 : -1; //    -20 ~ 20        
  fece.style.transform = `scale(${scale}) rotate(${symbol * 20 * Math.random()}deg)`
  fece.style.opacity = '0';
  return fece;
}

3.4 애니메이션
이곳 은 폭탄 을 잃 어 버 리 는 것 과 유사 하기 때문에,나 는 상세 하 게 설명 하지 않 겠 다.언급 해 야 할 것 은 똥 이 먼저 폭탄 위치 에서 나 온 다음 에 천천히 내 려 오기 때문에 여기 서 우 리 는 두 번 의 Tween 보충 애니메이션 을 이용 해 야 한다.

//            ，       
function initFece(end) {
	...
  const start = { x: 0, y: 100, z: 0 }; //    
  const tween = new TWEEN.Tween(start)
  .to({ ...end, z: 1 }, 100)
  .easing(TWEEN.Easing.Linear.None)
  .onUpdate(function () {
    fece.style.setProperty('top', `${start.y}px`);
    fece.style.setProperty('left', `${start.x}px`);
    fece.style.setProperty('opacity', `${start.z}`);
  })
  .onComplete(function () {
    initDown(start, fece).start(); //     ，        
  })
  return tween;
}
//          
function initDown(start, fece) {
  const s = {
    y: start.y,
    o: 1,
  };
  const e = { y: start.y + 80, o: 0 };
  const tween = new TWEEN.Tween(s)
  .to(e, 2000 + 500 * Math.random())
  .easing(TWEEN.Easing.Quadratic.In)
  .onUpdate(function () {
    fece.style.setProperty('top', `${s.y}px`);
    fece.style.setProperty('opacity', `${s.o}`);
  })
  .onComplete(function () {
  })
  return tween;
}
최종 효과

이 절의 전체 코드:https://github.com/hua1995116/node-demo/blob/master/wechat-feces/3-2-feces.html
3.5 총화
이 절 은 비교적 길 기 때문에,지식 을 총 결 해 보 자.
  • 먼저onComplete원 궤적 의 특성 을 이용 하여 초보적인 위치
    • 를 구축한다.
  • 랜 덤 값 을 추가 하여 전체 분 포 를 약간 불규칙 하 게 한다
  • 떡 에 무 작위 각도 추가
  • 중심 응 가 를 폭발 구
    • 로 만 들 었 다.
  • 체인 애니메이션 의 등장 과 행방 추가
    • 4.모두 진동
    이 기능 은 간단 한 css 애니메이션 으로 만 완성 할 수 있 습 니 다.여 기 는 더 이상 자세히 말 하지 않 겠 습 니 다.관심 있 는 파트너 는 이 를 실현 하여 댓 글 에 올 릴 수 있 습 니 다~
    엔 딩
    이번 에는 순 전 히 이 효과 에 대해 궁금 한 탐색 에 속 하 며 100%애니메이션 을 복원 하 는 것 이 아니다.본인 도 애니메이션 을 전문 적 으로 쓰 는 것 이 아니 라 상기 라 이브 러 리 도 처음 사용 하 는 것 입 니 다.그렇게 전문 적 이지 않 을 수도 있 습 니 다.그러나 여러분 에 게 재 미 있 는 아 이 디 어 를 제공 하고 싶 습 니 다.애니메이션 을 할 때1 = x² + y²와lottie두 개의 라 이브 러 리 를 이용 하고 복잡 한 문 제 를 단순화 시 켜 불규칙 한 것 을 규칙 적 인 것 으로 만 들 고 복잡 한 것 을 간단 한 것 으로 만 들 며 마지막 에 한 걸음 더 심화 시 킬 수 있 습 니 다.동시에 남 계 가 본문 에 대한 교정 에 감 사 를 드 립 니 다.
    JS 의 위 챗'똥 튀기'작전 수행 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 js 위 챗 똥 튀기 작전 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
    vue 프로젝트 패키지 및 최적화 실현 절차
    node.js+postman 아 날로 그 HTTP 서버 와 클 라 이언 트 의 상호작용 실현

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage