React Css애니메이션(keyframe,건배효과,짠효과)

https://flykimjiwon.tistory.com/74

좌우 흔들리는 건배효과 (cheers!)

위와같이 버튼을누르면 모든창에서 짠효과가 발동하게, 건배효과가 발동하게 만들었다.

 

기본은 html,css 베이스로만들었고 그걸 리액트에 적용시켰다.

 

Cheers.css

.ch{
  position: relative;
  animation-name: example;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  /* 이거무제한키워드 */
  /* top:200px;
  left:0%; */
  /* z-index:2147483647; */
  
}

@keyframes example {
  0%   {transform: rotate(-5deg)}
  25%  {transform: rotate(-30deg)}
}

키프레임도 딱히 적용한게없음 그저 살짝 기울어지게, 그리고 반복을 무제한으로 설정해서

 

리액트에서 컴포넌트를 jsx문법을사용해 모달방식으로 불러오게 만들었다.

 

여러방법을 시도했지만 이게가장 좋아보였음

 

import { useEffect, useState } from 'react';
import './Cheers.css'
import IMG from './img/cheers.png'

function Cheers() {

  let [ch,Setch] = useState('ch')
  let [sw,Setsw] = useState(false)
 
 
  return (
/* <div className={ch} onClick={()=>{
if(sw === false){
  Setch('ch')
  Setsw(!sw)
}else{
  Setch('c')
  Setsw(!sw)

}
}}> */
<div className={ch}>
<img src={IMG} width='200px'></img>

		{/* <img src="https://i.ibb.co/zs2fdST/cheers.png" width='200px'></img> */}
</div>
      

  );
}

export default Cheers;

고생한 흔적이보인다, 사실 여러방식을 고려해봤다.

 

라이브러리를 쓸지 뭐할지 이래할지 스위치할지 프롭스해서 className바뀌면 on/off되게할지

 

결론은 그냥 아주 어려운게아니면 직접만들고, 편하게 구현하는게 제일이라 생각이 들었다.

 

그저 '무한반복'되는 건배효과 애니메이션을 버튼을누르면 컴포넌트를 열어서 실행되게만 만들었다.

 

여기까지가 그냥 단순 react 컴포넌트에서 구현할 수 있는 어디서나 할 수 있는방식 (한페이지 내에서)

 

<button
                    onClick={ ()=>{
                      this.sendCheersSignal();
                    }}
                    >짠</button>
                    
                    
      {this.state.cheers===true
      ?(<div data-aos="zoom-in-down"
      data-aos-duration="500"><Cheers></Cheers>
        </div>
        )
      :null

      }

옛날 class문법으로 만들어진 openVidu라 저렇게 만들었지만 로직은 간단

 

그저 modal로 열리게 했을뿐! 그리고 줌효과는 AOS라이브러리로 살짝만 줬다.(링크참고)

https://flykimjiwon.tistory.com/56

AOS(Animate On Scroll Library) 스크롤 애니메이션 효과 라이브러리

---

여기부턴 그저 내가 기록하기위한곳, openVidu에서 전체에게 효과를 준 방식

 

1)this.setState에 true,false로 변환된거를 열어주고 2초뒤에 (setTimeout함수이용) 자동으로 닫히게만듬

 

2)시그널은 socket.io관련이라 그저 신호를 주고 받는 '트리거'라고만 생각하면됨

채팅관련 서비스를 만드는게아니라면 굳이 필요없는내용

 

3)그래도 추가하자면 모든 사용자에게 컴포넌트를 만들어두고 '누군가'가 건배버튼을 누르면 그 신호를

모두에게 쏴줘서 모두가 가지고있는 각자 건배컴포먼트 (cheers.js)를 열리게만듬

cheersToggle(){
    this.setState({ cheers: !this.state.cheers });
    setTimeout(() => {
      this.setState({ cheers: !this.state.cheers })
    }, 2000)
  }
  
  sendCheersSignal() {
    const mySession = this.state.session;

    mySession.signal({
      data: "start cheers",
      to: [],
      type: "cheersSignal",
    });
  }
 
  
  mySession.on("signal:cheersSignal", (event) => {
          this.cheersToggle();
        });
        
        <button
                    onClick={ ()=>{
                      this.sendCheersSignal();
                    }}
                    >짠</button>
                    
                    
      {this.state.cheers===true
      ?(<div data-aos="zoom-in-down"
      data-aos-duration="500"><Cheers></Cheers>
        </div>
        )
      :null

      }